|
HTML Tag |
Explanation |
Example |
Key Points to Remember |
|
<html> |
Root element of an HTML document. |
<html>...</html> |
Always the outermost tag in the document. |
|
<head> |
Contains metadata and links to stylesheets or scripts. |
<head><title>Page Title</title></head> |
Placed inside <html> and before <body>. |
|
<title> |
Defines the title of the document shown in the browser tab. |
<title>My Page</title> |
Should always be unique for SEO and usability. |
|
<body> |
Contains the main content of the HTML document. |
<body>Content here</body> |
Only one <body> tag is allowed per document. |
|
<h1> to <h6> |
Define headings, <h1> being the largest and <h6> the smallest. |
<h1>Main Heading</h1> |
Use headings hierarchically for better accessibility and SEO. |
|
<p> |
Defines a paragraph. |
<p>This is a paragraph.</p> |
Avoid unnecessary <p> tags to maintain clean structure. |
|
<a> |
Defines a hyperlink. |
<a href="https://example.com">Visit Example</a> |
Use the target="_blank" attribute to open links in a new tab. |
|
<img> |
Embeds an image. |
<img src="image.jpg" alt="Description of image"> |
Always use the alt attribute for accessibility and SEO. |
|
<ul> |
Defines an unordered list. |
<ul><li>Item 1</li><li>Item 2</li></ul> |
Use <ul> for non-sequential lists. |
|
<ol> |
Defines an ordered list. |
<ol><li>Step 1</li><li>Step 2</li></ol> |
Use <ol> for sequential steps or rankings. |
|
<li> |
Defines a list item inside <ul> or <ol>. |
<ul><li>Item</li></ul> |
Must be nested within <ul> or <ol>. |
|
<div> |
Defines a container or division in the document. |
<div class="container">Content</div> |
Use for structuring and styling sections of your page. |
|
<span> |
Defines inline text or elements for styling. |
<span style="color: red;">Red Text</span> |
Use for small parts of text or inline styling. |
|
<table> |
Defines a table. |
<table><tr><td>Data</td></tr></table> |
Use <table> only for tabular data, not for layout. |
|
<tr> |
Defines a row in a table. |
<tr><td>Row Data</td></tr> |
Must be inside <table>. |
|
<td> |
Defines a cell in a table row. |
<td>Cell Data</td> |
Use <th> for header cells if needed. |
|
<th> |
Defines a table header cell. |
<th>Header</th> |
Use with <tr> for header rows. |
|
<form> |
Defines an input form for user data. |
<form action="/submit" method="post"><input type="text" name="name"></form> |
Always specify action and method attributes. |
|
<input> |
Defines an input field in a form. |
<input type="text" name="username"> |
Use type to specify the kind of input, like text, password, or checkbox. |
|
<button> |
Defines a clickable button. |
<button>Click Me</button> |
Use for submitting forms or triggering JavaScript actions. |
|
<br> |
Inserts a line break. |
Line 1<br>Line 2 |
Avoid excessive use; use CSS margins or padding for spacing instead. |
|
<hr> |
Inserts a horizontal rule (line). |
<hr> |
Useful for separating content sections visually. |
|
<strong> |
Indicates important text (bold by default). |
<strong>Important Text</strong> |
Use for semantic emphasis. |
|
<em> |
Indicates emphasized text (italic by default). |
<em>Emphasized Text</em> |
Use for semantic emphasis. |
|
<header> |
Defines a header section of the document or a section. |
<header><h1>Website Header</h1></header> |
Can be used multiple times for sections, unlike <head>. |
|
<footer> |
Defines a footer section of the document or a section. |
<footer>Footer Content</footer> |
Commonly used for copyright or contact information. |
|
<article> |
Represents a self-contained piece of content. |
<article><h2>Article Title</h2><p>Content here.</p></article> |
Suitable for blog posts or news articles. |
|
<section> |
Groups related content into sections. |
<section><h2>Section Title</h2><p>Content here.</p></section> |
Use for logical grouping of content. |
|
<aside> |
Represents content indirectly related to the main content. |
<aside>Related Links</aside> |
Commonly used for sidebars or callouts. |
|
<nav> |
Defines navigation links. |
<nav><a href="/home">Home</a> <a href="/about">About</a></nav> |
Use for site-wide or major navigation links. |
|
<main> |
Represents the dominant content of the document. |
<main><h1>Main Content</h1></main> |
Only one <main> tag is allowed per document. |
|
<style> |
Embeds CSS styles within the HTML document. |
<style>body { background-color: lightblue; }</style> |
Prefer external stylesheets for better maintainability. |
|
<script> |
Embeds or references JavaScript code. |
<script>console.log('Hello, world!');</script> |
Place scripts at the end of <body> for faster page loading. |
|
<meta> |
Provides metadata about the document. |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Use for responsive design and SEO optimization. |
HTML tags with explanations, examples, and key points to remember:
Key Points to Remember
1. Proper Nesting: Always nest tags correctly (e.g., <ul><li></li></ul>).
2. Closing Tags: Ensure tags are properly closed. Some tags like <img> and <br> are self-closing.
3. Semantic Tags: Use semantic tags like <header>, <footer>, and <article> for better readability and SEO.
4. Attributes: Add relevant attributes (e.g., alt for images, href for links).
5. Validation: Use an HTML validator to ensure your code follows web standards.
6. Responsive Design: Use the <meta> tag and CSS for mobile-friendly pages.
HTML Crash Course: From Beginner to Expert
Introduction to HTML
HTML (HyperText Markup Language) is the standard language for creating web pages. It provides the structure of a webpage, which is styled by CSS and made interactive with JavaScript.
Chapter 1: Basics of HTML
1.1 What is HTML?
HTML is the backbone of a webpage. It uses elements (tags) to structure content, such as headings, paragraphs, images, and links.
1.2 Basic Structure of an HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>
- <!DOCTYPE html>: Declares the document as HTML5.
- <html>: Root of the document.
- <head>: Contains metadata (title, styles, etc.).
- <body>: Contains the visible content.
Chapter 2: Essential HTML Tags
2.1 Text Formatting Tags
|
Tag |
Description |
Example |
|
<h1> |
Largest heading |
<h1>Heading 1</h1> |
|
<p> |
Paragraph |
<p>This is a paragraph.</p> |
|
<strong> |
Bold important text |
<strong>Important</strong> |
|
<em> |
Italicize emphasized text |
<em>Emphasis</em> |
|
<br> |
Line break |
Line 1<br>Line 2 |
2.2 Links and Images
|
Tag |
Description |
Example |
|
<a> |
Hyperlink |
<a href="https://example.com">Visit Example</a> |
|
<img> |
Image |
<img src="image.jpg" alt="A description of the image"> |
2.3 Multimedia Tags
|
Tag |
Description |
Example |
|
<audio> |
Embeds audio content |
<audio controls><source src="audio.mp3" type="audio/mpeg"></audio> |
|
<video> |
Embeds video content |
<video controls><source src="video.mp4" type="video/mp4"></video> |
|
<source> |
Specifies media source |
Used inside <audio> or <video> tags. |
Chapter 3: Intermediate HTML
3.1 Lists
- Unordered List:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
- Ordered List:
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
- Description List:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
3.2 Tables
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
3.3 Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
Chapter 4: Advanced HTML
4.1 Semantic HTML
Semantic tags improve the meaning of the code:
|
Tag |
Description |
Example |
|
<header> |
Header section |
<header><h1>Site Title</h1></header> |
|
<footer> |
Footer section |
<footer>Footer Content</footer> |
|
<article> |
Independent content block |
<article><h2>Post Title</h2></article> |
|
<section> |
Thematic grouping of content |
<section><h2>Section Title</h2></section> |
|
<aside> |
Sidebar or related content |
<aside>Related Links</aside> |
|
<main> |
Main content of the document |
<main>Main Content Here</main> |
|
<nav> |
Navigation links |
<nav><a href="/home">Home</a></nav> |
4.2 Modern Multimedia Tags
- Embedding videos:
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
- Embedding audio:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Chapter 5: Latest HTML5 Tags and Features
5.1 New Structural Elements
|
Tag |
Description |
Example |
|
<figure> |
Groups media content with a caption |
<figure><img src="img.jpg"><figcaption>Caption</figcaption></figure> |
|
<figcaption> |
Caption for <figure> element |
<figcaption>Image Description</figcaption> |
|
<time> |
Represents a time or date |
<time datetime="2025-01-01">Jan 1, 2025</time> |
|
<mark> |
Highlights text |
<p>This is <mark>important</mark>.</p> |
|
<progress> |
Shows progress of a task |
<progress value="50" max="100"></progress> |
|
<meter> |
Represents a scalar measurement |
<meter value="2" min="0" max="10">2 out of 10</meter> |
Demo HTML Page
<!DOCTYPE html>
<html>
<head>
<title>HTML Demo Page</title>
</head>
<body>
<header>
<h1>Welcome to My Demo Page</h1>
</header>
<section>
<h2>About HTML</h2>
<p>HTML is the foundation of web development.</p>
</section>
<section>
<h2>Key Features</h2>
<ul>
<li>Easy to Learn</li>
<li>Highly Compatible</li>
<li>Widely Used</li>
</ul>
</section>
<section>
<h2>Media</h2>
<figure>
<img src="example.jpg" alt="An example image">
<figcaption>An Example Image</figcaption>
</figure>
<video controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<footer>
<p>Contact: <a href="mailto:info@example.com">info@example.com</a></p>
</footer>
</body>
</html>
Resources for Further Learning
1. Mozilla Developer Network (MDN) - HTML Documentation
Comments
Post a Comment