What Are HTML Tags?

HTML tags are the building blocks of HTML. They are enclosed in angle brackets (< >) and tell the browser how to display content. Most tags have an opening tag (<tag>) and a closing tag (</tag>), with content in between:

<tag>Content here</tag>

Some tags are self-closing (void elements) and don’t need a closing tag, like <img> or <br>.

Tags can have attributes that modify their behavior, written as name="value":

<img src="image.jpg" alt="Description">

Here, src (source) and alt (alternative text) are attributes.

Document Structure Tags

These tags define the overall structure of an HTML document. Every webpage starts with these.

1. `<!DOCTYPE html>`

Purpose: Declares the document type and HTML version (HTML5).
Syntax: Always the first line, no closing tag.
Example:
```
<!DOCTYPE html>  
```

2. `<html>`

Purpose: Root element that wraps all HTML content.
Syntax: Requires opening <html> and closing </html> tags.

Example:

<!DOCTYPE html>  
<html>  
  <!-- All other content goes here -->  
</html>

3. `<head>`

Purpose: Contains meta-information about the document (not visible on the page), like title, styles, and scripts.
Syntax: <head></head>
Common Child Tags: <title>, <meta>, <link>, <script>.

Example:

<head>  
  <title>My Webpage</title>  
  <meta charset="UTF-8">  
</head>

4. `<title>`

Purpose: Sets the page title (shown in browser tabs and search results).
Syntax: <title></title> (inside <head>).

Example:

<title>Ultimate HTML Guide | My Blog</title>

5. `<meta>`

Purpose: Adds metadata (e.g., character set, viewport settings, SEO info).
Common Attributes:
- charset="UTF-8": Sets character encoding (supports all languages).
- name="viewport" content="width=device-width, initial-scale=1.0": Ensures responsive design on mobile.
- name="description" content="...": Brief page summary for search engines.

Example:

<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<meta name="description" content="Learn HTML tags with examples">

6. `<body>`

Purpose: Contains all visible content (text, images, links, etc.).
Syntax: <body></body> (directly after <head>).

Example:

<body>  
  <h1>Welcome to My Page</h1>  
  <p>This is visible content.</p>  
</body>

Text Formatting Tags

These tags style and organize text content.

1. Headings: `<h1>` to `<h6>`

Purpose: Define section headings, with <h1> (most important) to <h6> (least important).
Best Practice: Use only one <h1> per page for SEO.

Example:

<h1>Main Heading</h1>  
<h2>Subheading</h2>  
<h3>Sub-subheading</h3>

2. `<p>` (Paragraph)

Purpose: Defines a block of text.

Example:

<p>This is a paragraph of text. It wraps automatically and adds spacing above/below.</p>

3. `<br>` (Line Break)

Purpose: Inserts a single line break (like pressing Enter).
Syntax: Self-closing.
Example:
```
<p>First line<br>Second line</p>  
```

4. `<hr>` (Horizontal Rule)

Purpose: Inserts a horizontal line to separate content.
Syntax: Self-closing.

Example:

<p>Above the line</p>  
<hr>  
<p>Below the line</p>

5. Text Emphasis Tags

Tag	Purpose	Example
`<strong>`	Indicates strong importance (bold).	`<strong>Warning!</strong>`
`<em>`	Indicates emphasis (italic).	`<em>Important note</em>`
`<u>`	Underlines text (use sparingly; avoid for links).	`<u>Underlined</u>`
`<mark>`	Highlights text (like a highlighter).	`<mark>Remember this</mark>`
`<small>`	Renders smaller text (e.g., fine print).	`<small>Copyright 2024</small>`
`<del>`	Strikethrough (deleted text).	`<del>Old price: $100</del>`
`<ins>`	Underline for inserted text.	`<ins>New price: $80</ins>`

Semantic HTML Tags

Semantic tags describe the meaning of content (not just presentation), making pages more accessible (for screen readers) and SEO-friendly.

1. `<header>`

Purpose: Introductory content (logo, navigation, headings).

Example:

<header>  
  <h1>My Website</h1>  
  <nav>...</nav>  
</header>

2. `<nav>`

Purpose: Container for navigation links (menus).

Example:

<nav>  
  <a href="/home">Home</a>  
  <a href="/about">About</a>  
</nav>

3. `<main>`

Purpose: Main content of the page (unique to the page, excluding headers/footers).

Example:

<main>  
  <article>...</article>  
  <section>...</section>  
</main>

4. `<article>`

Purpose: Self-contained content (blog post, comment, news story).

Example:

<article>  
  <h2>10 HTML Tips</h2>  
  <p>...</p>  
</article>

5. `<section>`

Purpose: Groups related content (e.g., chapters, tabs).

Example:

<section>  
  <h3>Introduction</h3>  
  <p>...</p>  
</section>

6. `<aside>`

Purpose: Side content (sidebar, callouts, related links).

Example:

<aside>  
  <p>Related: <a href="/guide">HTML Basics</a></p>  
</aside>

7. `<footer>`

Purpose: Footer for a section or the page (copyright, contact info).

Example:

<footer>  
  <p>© 2024 My Site. All rights reserved.</p>  
</footer>

8. `<figure>` and `<figcaption>`

Purpose: Groups media (images, charts) with a caption.

Example:

<figure>  
  <img src="chart.jpg" alt="Sales chart">  
  <figcaption>2024 Sales Data</figcaption>  
</figure>

Lists

Lists organize items in a readable format.

1. Unordered List (`<ul>`)

Purpose: Bullet points (no specific order).
Child Tag: <li> (list item).

Example:

<ul>  
  <li>Item 1</li>  
  <li>Item 2</li>  
  <li>Item 3</li>  
</ul>

2. Ordered List (`<ol>`)

Purpose: Numbered list (specific order).
Child Tag: <li>.

Example:

<ol>  
  <li>Step 1</li>  
  <li>Step 2</li>  
  <li>Step 3</li>  
</ol>

3. Definition List (`<dl>`)

Purpose: Terms and their definitions.
Child Tags: <dt> (definition term) and <dd> (definition description).

Example:

<dl>  
  <dt>HTML</dt>  
  <dd>HyperText Markup Language</dd>  
  <dt>CSS</dt>  
  <dd>Cascading Style Sheets</dd>  
</dl>

Links & Media

1. `<a>` (Anchor/Link)

Purpose: Creates hyperlinks to other pages, emails, or resources.
Key Attribute: href (hyperlink reference) = URL/email.
Common Attributes:
- target="_blank": Opens link in a new tab.
- rel="noopener noreferrer": Security for target="_blank".

Examples:

<!-- Link to a webpage -->  
<a href="https://example.com">Visit Example</a>  

<!-- Link to email -->  
<a href="mailto:[email protected]">Email Us</a>  

<!-- New tab -->  
<a href="https://example.com" target="_blank" rel="noopener noreferrer">New Tab</a>

2. `<img>` (Image)

Purpose: Embeds an image.
Key Attributes:
- src: Path to the image (URL or local file).
- alt: Alternative text (critical for accessibility and SEO if the image fails to load).
- width/height: Optional (use CSS for responsive sizing).

Example:

<img src="dog.jpg" alt="Cute dog" width="300" height="200">

3. `<video>`

Purpose: Embeds video content.
Key Attributes:
- src: Video file path.
- controls: Adds play/pause buttons.
- width: Sets video width.

Example:

<video src="movie.mp4" controls width="600">  
  Your browser does not support video.  
</video>

4. `<audio>`

Purpose: Embeds audio content.

Example:

<audio src="song.mp3" controls>  
  Your browser does not support audio.  
</audio>

5. `<iframe>` (Inline Frame)

Purpose: Embeds external content (YouTube videos, maps, etc.).

Example:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

Forms

Forms collect user input (e.g., contact forms, login pages).

1. `<form>`

Purpose: Wraps form elements.
Key Attributes:
- action: URL where form data is sent (e.g., /submit).
- method: HTTP method (GET for small data, POST for sensitive data).

Example:

<form action="/submit" method="POST">  
  <!-- Form elements here -->  
</form>

2. `<input>`

Purpose: Most common form element (text, email, buttons, etc.).
Key Attribute: type (defines input type).
Common Types:

Type	Purpose	Example
`text`	Single-line text	`<input type="text" name="username">`
`email`	Email address (validates format)	`<input type="email" name="email">`
`password`	Hidden password	`<input type="password" name="pass">`
`submit`	Submit button	`<input type="submit" value="Submit">`
`checkbox`	Multiple selection	`<input type="checkbox" name="hobby" value="reading"> Reading`
`radio`	Single selection	`<input type="radio" name="gender" value="male"> Male`

3. `<label>`

Purpose: Labels input elements (improves accessibility; clicking the label focuses the input).
Syntax: Use for attribute with the input’s id.

Example:

<label for="name">Name:</label>  
<input type="text" id="name" name="name">

4. `<select>` and `<option>`

Purpose: Dropdown menu.

Example:

<label for="country">Country:</label>  
<select id="country" name="country">  
  <option value="us">USA</option>  
  <option value="ca">Canada</option>  
  <option value="mx">Mexico</option>  
</select>

5. `<textarea>`

Purpose: Multi-line text input (e.g., comments).

Example:

<label for="message">Message:</label>  
<textarea id="message" name="message" rows="4" cols="50"></textarea>

Tables

Tables organize tabular data (rows and columns).

Key Tags:

<table>: Wraps the table.
<tr>: Table row.
<th>: Table header (bold, centered by default).
<td>: Table data cell.
<thead>, <tbody>, <tfoot>: Groups header, body, and footer rows (improves accessibility).

Example:

<table border="1"> <!-- border for visibility (use CSS instead) -->  
  <caption>Student Grades</caption>  
  <thead>  
    <tr>  
      <th>Name</th>  
      <th>Math</th>  
      <th>Science</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>Alice</td>  
      <td>90</td>  
      <td>85</td>  
    </tr>  
    <tr>  
      <td>Bob</td>  
      <td>75</td>  
      <td>95</td>  
    </tr>  
  </tbody>  
  <tfoot>  
    <tr>  
      <td>Average</td>  
      <td>82.5</td>  
      <td>90</td>  
    </tr>  
  </tfoot>  
</table>

Advanced & Utility Tags

1. `<div>` and `<span>`

Purpose: Generic containers for grouping content (non-semantic).
- <div>: Block-level (takes full width, new line).
- <span>: Inline (takes only needed width, same line).

Example:

<div class="header"> <!-- Group for CSS styling -->  
  <h1>Hello</h1>  
  <span class="highlight">World</span>  
</div>

2. `<meta>` (SEO/Viewport)

Purpose: As covered earlier, critical for SEO and mobile responsiveness.

3. `<script>`

Purpose: Embeds JavaScript code or links to external JS files.

Example:

<!-- Internal JS -->  
<script>  
  alert("Hello!");  
</script>  

<!-- External JS -->  
<script src="app.js"></script>

Best Practices

Use Semantic Tags: Prefer <header> over <div class="header"> for clarity.
Accessibility: Always add alt text to images, labels to form inputs.
Validate: Use tools like W3C Validator to check for errors.
Close Tags: Avoid unclosed tags (e.g., missing </p>).
Lowercase: Use lowercase tags/attributes (convention).

HTML Tag Reference Cheat Sheet

Tag	Purpose	Example
`<h1>`-`<h6>`	Headings (1-6)	`<h1>Title</h1>`
`<p>`	Paragraph	`<p>Text</p>`
`<a>`	Link	`<a href="url">Link</a>`
`<img>`	Image	`<img src="img.jpg" alt="Desc">`
`<ul>`	Unordered list	`<ul><li>Item</li></ul>`
`<ol>`	Ordered list	`<ol><li>Item</li></ol>`
`<form>`	Form container	`<form action="/submit"></form>`
`<input>`	Form input	`<input type="text" name="user">`
`<table>`	Table	`<table><tr><td>Data</td></tr></table>`
`<header>`	Page header	`<header>...</header>`

Conclusion

HTML tags are the foundation of web development. By mastering these tags and their uses, you’ll be able to structure content effectively, build accessible websites, and lay the groundwork for styling with CSS and interactivity with JavaScript.

Practice by building simple pages (e.g., a blog post, contact form) and refer back to this guide as a cheat sheet. Happy coding!

References: MDN Web Docs, W3Schools

Table of Contents

What Are HTML Tags?

Document Structure Tags

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <title>

5. <meta>

6. <body>

Text Formatting Tags

1. Headings: <h1> to <h6>

2. <p> (Paragraph)

3. <br> (Line Break)

4. <hr> (Horizontal Rule)

5. Text Emphasis Tags

Semantic HTML Tags

1. <header>

2. <nav>

3. <main>

4. <article>

5. <section>

6. <aside>

7. <footer>

8. <figure> and <figcaption>

Lists

1. Unordered List (<ul>)

2. Ordered List (<ol>)

3. Definition List (<dl>)

Links & Media

1. <a> (Anchor/Link)

2. <img> (Image)

3. <video>

4. <audio>

5. <iframe> (Inline Frame)

Forms

1. <form>

2. <input>

3. <label>

4. <select> and <option>

5. <textarea>

Tables

Key Tags:

Example:

Advanced & Utility Tags

1. <div> and <span>

2. <meta> (SEO/Viewport)

3. <script>

Best Practices

HTML Tag Reference Cheat Sheet

Conclusion

1. `<!DOCTYPE html>`

2. `<html>`

3. `<head>`

4. `<title>`

5. `<meta>`

6. `<body>`

1. Headings: `<h1>` to `<h6>`

2. `<p>` (Paragraph)

3. `<br>` (Line Break)

4. `<hr>` (Horizontal Rule)

1. `<header>`

2. `<nav>`

3. `<main>`

4. `<article>`

5. `<section>`

6. `<aside>`

7. `<footer>`

8. `<figure>` and `<figcaption>`

1. Unordered List (`<ul>`)

2. Ordered List (`<ol>`)

3. Definition List (`<dl>`)

1. `<a>` (Anchor/Link)

2. `<img>` (Image)

3. `<video>`

4. `<audio>`

5. `<iframe>` (Inline Frame)

1. `<form>`

2. `<input>`

3. `<label>`

4. `<select>` and `<option>`

5. `<textarea>`

1. `<div>` and `<span>`

2. `<meta>` (SEO/Viewport)

3. `<script>`