HTML Tags
HTML tags are the building blocks of HTML pages. Tags are used to define the structure and content of web pages.
HTML Tag Syntax
HTML tags are written with angle brackets: <tagname>content</tagname>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>Basic HTML Tags
| Tag | Description |
|---|---|
| <!DOCTYPE html> | Defines the document type |
| <html> | Defines an HTML document |
| <head> | Contains meta-information |
| <title> | Defines the document title |
| <body> | Defines the document body |
| <h1> to <h6> | Defines HTML headings |
| <p> | Defines a paragraph |
| <br> | Inserts a line break |
| <hr> | Creates a horizontal rule |
HTML Headings
HTML headings are defined with <h1> to <h6> tags:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6><h1> is the most important heading, <h6> is the least important.
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.example.com">Visit Example</a>
<a href="mailto:info@example.com">Send Email</a>
<a href="#section1">Jump to Section 1</a>HTML Images
HTML images are defined with the <img> tag:
<img src="image.jpg" alt="Description">
<img src="logo.png" alt="Logo" width="200" height="100">HTML Lists
Unordered Lists
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Ordered Lists
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>Description Lists
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>HTML Tables
HTML tables are defined with <table>, <tr>, <th>, and <td> tags:
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
</tr>
</table>HTML Formatting Tags
| Tag | Description | Example |
|---|---|---|
| <b> | Bold text | <b>Bold text</b> |
| <strong> | Important text | <strong>Important text</strong> |
| <i> | Italic text | <i>Italic text</i> |
| <em> | Emphasized text | <em>Emphasized text</em> |
| <mark> | Marked text | <mark>Marked text</mark> |
| <small> | Small text | <small>Small text</small> |
| <del> | Deleted text | <del>Deleted text</del> |
| <ins> | Inserted text | <ins>Inserted text</ins> |
| <sub> | Subscript text | H<sub>2</sub>O |
| <sup> | Superscript text | X<sup>2</sup> |
HTML Forms and Input
| Tag | Description |
|---|---|
| <form> | Defines an HTML form |
| <input> | Defines an input control |
| <textarea> | Defines a multi-line input control |
| <button> | Defines a clickable button |
| <select> | Defines a dropdown list |
| <option> | Defines an option in a dropdown list |
| <label> | Defines a label for an input element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a fieldset element |
HTML Semantic Tags
| Tag | Description |
|---|---|
| <header> | Defines a header for a document or section |
| <nav> | Defines navigation links |
| <main> | Defines the main content of a document |
| <section> | Defines a section in a document |
| <article> | Defines an independent self-contained content |
| <aside> | Defines content aside from the main content |
| <footer> | Defines a footer for a document or section |
| <figure> | Specifies self-contained content |
| <figcaption> | Defines a caption for a figure element |
| <time> | Defines a specific time |
| <data> | Links the content with a machine-readable translation |
HTML Media Tags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <picture> | Defines multiple image sources |
| <source> | Defines multiple media resources |
| <video> | Defines a video |
| <audio> | Defines sound content |
| <track> | Defines text tracks for video and audio |
| <map> | Defines an image map |
| <area> | Defines an area inside an image map |
| <iframe> | Defines an inline frame |
| <canvas> | Defines graphic drawing area |
| <svg> | Defines a container for SVG graphics |
HTML Meta Tags
| Tag | Description | Example |
|---|---|---|
| <meta charset="UTF-8"> | Specifies character encoding | <meta charset="UTF-8"> |
| <meta name="viewport"> | Controls viewport on mobile devices | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description"> | Specifies page description | <meta name="description" content="Free Web tutorials"> |
| <meta name="keywords"> | Specifies keywords | <meta name="keywords" content="HTML, CSS, JavaScript"> |
| <meta name="author"> | Specifies page author | <meta name="author" content="John Doe"> |
| <meta http-equiv="refresh"> | Specifies page refresh | <meta http-equiv="refresh" content="30"> |
HTML Script Tags
| Tag | Description |
|---|---|
| <script> | Defines a client-side script |
| <noscript> | Defines alternate content for users that do not support client-side scripts |
| <template> | Defines a container for content that should be hidden when the page loads |
HTML Document Structure
A complete HTML document structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="Page description">
<meta name="keywords" content="HTML, tutorial">
<meta name="author" content="Author Name">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Main Heading</h1>
<p>This is the main content.</p>
</section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Sidebar content.</p>
</aside>
</main>
<footer>
<p>© 2024 Website Name. All rights reserved.</p>
</footer>
<script>
// JavaScript code goes here
</script>
</body>
</html>HTML Tags - Chapter Summary
- HTML tags are the building blocks of HTML pages
- Tags are written with angle brackets: <tagname>content</tagname>
- HTML has tags for text formatting, links, images, lists, tables, forms, and more
- Semantic tags provide meaning to web page structure
- Meta tags provide metadata about the HTML document
- Every HTML document should have proper structure with DOCTYPE, html, head, and body tags
- Use semantic HTML5 tags for better accessibility and SEO