Comprehensive guide to HTML elements with examples, best practices, and advanced tips.
HTML elements are the foundation of web development. This guide provides a comprehensive overview of HTML elements, categorized for easy reference, with examples, best practices, and advanced tips.
HTML elements define the structure and content of a web page. They are represented by tags and can include attributes to provide additional information.
Headings are used to define titles and subtitles in an HTML document. Use <h1> for the main title and <h2> to <h6> for subheadings.
1<body>
2 <h1>Main Title</h1>
3 <h2>Subheading</h2>
4 <h3>Sub-subheading</h3>
5</body>
The <p> tag defines a paragraph. Use it to group sentences into blocks of text.
1<body>
2 <h1>Main Title</h1>
3 <p>This is a paragraph. It contains multiple sentences.</p>
4 <p>This is another paragraph.</p>
5</body>
A line break is used to complete one line and continue the remaining text at the start of a new line, like what was just done here.
This can be useful in many scenarios, such as when writing addresses. You can use the
tag to insert a line break in HTML. This is not a container tag and does not have any end tag. It is a self-closing tag.
1<body>
2 <h1>Main Title</h1>
3 <p>
4 This is a paragraph. It contains multiple sentences.<br />
5 This is another paragraph.
6 </p>
7</body>
The <blockquote> tag is used for quoting text.
1<blockquote cite="https://example.com">
2 This is a blockquote. It is used to quote text from another source.
3</blockquote>
<a> tag defines a hyperlink.Web pages can link to other pages or other places on the same page via a hyperlink. The tag defines a hyperlink in HTML, followed by the href attribute to define the destination address of the hyperlink.
1<a href="https://example.com" target="_blank" rel="noopener"
2 >Visit Example.com</a
3>
Hyperlinks are normally inserted into text so that when you click some hyperlinked text, it takes you to the destination. For example, if you want to hyperlink the word “IBM” to the official IBM website, you can use the tag with the href attribute as shown below:
1<a href="https://www.ibm.com">IBM</a>
In the example above, anytime a user clicks the “IBM” text, the IBM website will open in the current tab. If you want a hyperlink to open a certain destination in a new tab, you can do so by adding target="_blank" to the tag as follows:
1<a href="https://www.ibm.com" target="_blank">IBM</a>
1<a href="#">Top of Page</a> <a href="#top">Top of Page</a>
1<a href="#section">Link to section</a>
2...
3<h1 id="section">Section</h1>
The <img> tag defines an image. Always include the alt attribute for accessibility.
1<img src="image.jpg" alt="Descriptive text" width="200" height="200" />
<img> tag. Both external images (for instance, from the internet) and local images (for instance, files saved on your computer) can be used in this tag.src attribute. The src attribute specifies an external resource that you want to link,such as the URL of an image. If you are referencing a file online, you can insert the URL of the image in this attribute. If you want to insert a local image, you should insert the file path of the image relative to the location of your HTML file.<img> tag also requires the alt attribute, which defines alternative text to be displayed in the event the image cannot be loaded and when a screen reader is used. The size of an image can also (optionally) be specified using the width and height attributes, with the numbers listed in pixels.1<audio controls>
2 <source src="audio.mp3" type="audio/mpeg" />
3 Your browser does not support the audio element.
4</audio>
1<video controls width="600">
2 <source src="video.mp4" type="video/mp4" />
3 Your browser does not support the video element.
4</video>
1<ul>
2 <li>Item 1</li>
3 <li>Item 2</li>
4 <li>Item 3</li>
5</ul>
1<ol>
2 <li>First Step</li>
3 <li>Second Step</li>
4 <li>Third Step</li>
5</ol>
1<dl>
2 <dt>HTML</dt>
3 <dd>HyperText Markup Language</dd>
4 <dt>CSS</dt>
5 <dd>Cascading Style Sheets</dd>
6</dl>
Tables are used to display data in rows and columns.
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td>Data 1</td>
11 <td>Data 2</td>
12 </tr>
13 </tbody>
14</table>
1<form action="/submit" method="post">
2 <input type="text" name="username" placeholder="Enter your username" />
3 <input type="email" name="email" placeholder="Enter your email" />
4 <button type="submit">Submit</button>
5</form>
1<!-- Text Input -->
2<input type="text" name="name" required />
3
4<!-- Password Input -->
5<input type="password" name="password" />
6
7<!-- Checkbox -->
8<input type="checkbox" name="agree" id="agree" />
9<label for="agree">I agree to the terms</label>
10
11<!-- Radio Button -->
12<input type="radio" name="gender" id="male" value="male" />
13<label for="male">Male</label>
14
15<!-- Dropdown List -->
16<select name="country">
17 <option value="us">United States</option>
18 <option value="uk">United Kingdom</option>
19</select>
Semantic elements provide meaning to the structure of a web page. Examples include <header>, <footer>, <article>, and <section>.
1<header>
2 <h1>Website Title</h1>
3</header>
4<section>
5 <h2>Section Title</h2>
6 <p>Section content goes here.</p>
7</section>
8<footer>
9 <p>© 2024 Your Website</p>
10</footer>
The <div> tag is a block-level container.
1<div class="container">
2 <h2>Container Title</h2>
3 <p>Container Content</p>
4</div>
The <span> tag is an inline container.
1<p>This is a <span class="highlight">highlighted</span> text example.</p>
The <nav> tag defines navigation links.
1<nav>
2 <ul>
3 <li><a href="#home">Home</a></li>
4 <li><a href="#about">About</a></li>
5 <li><a href="#contact">Contact</a></li>
6 </ul>
7</nav>
The <footer> tag defines the footer of a document.
1<footer>
2 <p>© 2024 Your Website. All rights reserved.</p>
3</footer>
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <!-- Meta Information-->
5 <meta charset="UTF-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 </head>
8 <body>
9 <!-- Content goes here -->
10 </body>
11</html>
1<head>
2 <title>Page.Title</title>
3</head>
alt text to images for accessibility.<picture> for responsive images.Here are some live examples of HTML elements in action:
✅ Table Structure (<table>)
✅ Table Rows (<tr>)
✅ Table Headers (<th>)
✅ Table Cells (<td>)
✅ Table Headers (<thead>)
✅ Table Body (<tbody>)
✅ Table Footer (<tfoot>)
✅ Column Spanning (colspan)
✅ Row Spanning (rowspan)
✅ Alternating Row Colors (nth-child)
✅ Table Caption (<caption>)
alt attributes to images, and incorporating ARIA roles where necessary.src attribute specifies the image source, and the alt attribute provides alternative text for accessibility.controls attribute ensures users can play, pause, or adjust the media as needed.<picture> element for responsive images.<nav> element defines a section of navigation links, helping users navigate through the website.<blockquote> tag when quoting text from another source, optionally including the cite attribute for the source URL.action attribute specifies the URL where the form data will be submitted, making it essential for form functionality.<div> element is a block-level container used for grouping content, while <span> is an inline container used for styling or grouping text within a block.overflow-x: auto or frameworks like Bootstrap to ensure tables adapt to different screen sizes.<header>, <footer>, <article>, <section>, <nav>, and others that provide meaning to the content structure.required attribute is used on form fields, the browser will prevent submission and prompt the user to fill in the missing fields.<meta> tag provides metadata about the HTML document, such as character encoding, viewport settings, and SEO-related information.<picture> element for responsive images, allowing different image sources to be loaded based on screen size or resolution.<ul> or <ol> element inside a <li> element of another list.