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.
Top comments (0)