HTML: A Comprehensive Guide
Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the basic structure of a website, which is enhanced and modified by other technologies like CSS and JavaScript.
Basic Structure of an HTML Document
An HTML document starts with a <!DOCTYPE html> declaration, followed by <html> and <head> tags, and the main content goes inside <body>.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Tags and Elements
HTML consists of tags, which enclose content. Tags can be opening (<tag>) and closing (</tag>), or self-closing (<tag />). For example:
<h1>to<h6>: Headings
<p>: Paragraphs
<a>: Links
<img>: Images
<div>and<span>: Structural elements
Text Formatting Tags
<b>: Bold
<i>: Italic
<u>: Underline
<strong>: Important text (semantic bold)
<em>: Emphasized text (semantic italic)
<mark>: Highlighted text
<small>: Smaller text
<sup>: Superscript
<sub>: Subscript
Lists
Ordered List
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Definition List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Links
- Internal Links:
<a href="#section">Go to Section</a>
- External Links:
<a href="https://example.com">Visit Example</a>
- Open in New Tab:
<a href="https://example.com" target="_blank">Visit Example</a>
Images
- Basic:
<img src="image.jpg" alt="Description">
- Width & Height:
<img src="image.jpg" width="300" height="200" alt="Description">
Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Forms
Forms collect user input.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
Form Elements:
<input>: Text, email, password, radio, checkbox, file, etc.
<textarea>: Multiline input.
<select>: Dropdown menus.
Semantic HTML
Semantic elements clearly define their purpose. Examples:
<header>: Introductory content
<nav>: Navigation links
<section>: Thematic grouping of content
<article>: Self-contained content
<aside>: Sidebar
<footer>: Footer content
Multimedia
Audio:<audio controls><source src="audio.mp3" type="audio/mpeg"></audio>
Video:<video controls><source src="video.mp4" type="video/mp4"></video>
HTML5 Features
Canvas: Used for graphics and animations.
<canvas id="myCanvas" width="200" height="100"></canvas>
Geolocation: Get user location.
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude, position.coords.longitude);
});
Local Storage: Store data locally.
localStorage.setItem("key", "value");
console.log(localStorage.getItem("key"));
Meta Tags
Meta tags provide metadata about the HTML document.
<meta charset="UTF-8">: Character set
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Responsive design<meta name="description" content="An overview of HTML">
Responsive Design with HTML
- Use the
<meta name="viewport" content="width=device-width, initial-scale=1.0">tag. - Combine with CSS for flexible layouts using percentages,
vh/vw, and media queries.
Common Attributes
Global Attributes:
id: Unique identifier
class: Class name(s)
style: Inline styles
title: Tooltip text
lang: Language of content
Event Attributes:
onclick: JavaScript to run on click
onchange: Triggered on input change
onmouseover: Triggered when hovering
Best Practices
- Use semantic elements for clarity and accessibility.
- Keep your HTML code well-organized and properly indented.
- Validate your HTML using tools like the W3C Validator.
- Optimize images and use alt attributes for accessibility.
- Minimize inline styles; use external CSS instead.
This comprehensive guide provides a strong foundation for HTML. Combined with CSS and JavaScript, HTML becomes a powerful tool for creating dynamic and responsive web applications.
SOCIAL SHARE CARD GENERATOR