HTML Tags: The Ultimate Cheat Sheet
Written by Backlinko Team
HTML (HyperText Markup Language) is the backbone of any web page.
Whether you’re a beginner or a seasoned web developer, understanding the purpose and proper usage of HTML tags is crucial.
This guide combines essential HTML and HTML5 tags, providing a clear overview, their purpose, and examples of how to use them.
Basic Structure Tags
1. <!DOCTYPE>
Purpose: Declares the document type and HTML version.
Example:
<!DOCTYPE html> signifies HTML5 document type.
2. <html>
Purpose: Defines the root of an HTML document.
Example:
<html lang="en">...</html> sets the document to use English.
3. <head>
Purpose: Contains meta-information about the HTML document.
Example:
<head> <meta charset="UTF-8"> <title>Page Title</title> </head>
4. <body>
Purpose: Contains the content of the HTML document.
Example:
<body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
Text Formatting Tags
<h1> to <h6>
Purpose: Represents six levels of section headings, <h1> being the most important and <h6> the least.
Example:
<h1>Main Title</h1> <h2>Sub Title</h2> ... <h6>Smallest Heading</h6>
<p>
Purpose: Defines a paragraph.
Example:
<p>This is a paragraph of text.</p>
<br>
Purpose: Inserts a single line break.
Example:
This is a line. <br> This is a new line.
<hr>
Purpose: Creates a thematic break (horizontal line).
Example:
<p>Paragraph above the line.</p><hr><p>Paragraph below the line.</p>
Link and Image Tags
<a>
Purpose: Creates a hyperlink.
Example:
<a href="https://www.example.com">Visit Example.com</a>
<img>
Purpose: Embeds an image.
Example:
<img src="image.jpg" alt="Descriptive Text">
List Tags
<ul>, <ol>, <li>
Purpose: Creates unordered (bulleted) and ordered (numbered) lists.
Example:
<ul> <li>List Item 1</li> <li>List Item 2</li> </ul> <ol> <li>First Item</li> <li>Second Item</li> </ol>
Table Tags
<table>, <tr>, <th>, <td>
Purpose: Used to create a table.
Example:
<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
Sectioning and Semantic Tags (HTML5)
<header>, <footer>, <article>, <section>, <nav>, <aside>
Purpose: Provide semantic meaning to different parts of a webpage.
Example:
<header>...</header> <nav>...</nav> <article> <section>...</section> </article> <aside>...</aside> <footer>...</footer>
<figure> and <figcaption>
Purpose: Represents self-contained content like illustrations, diagrams, photos, with an optional caption.
Example:
<figure> <img src="image.jpg" alt="..."> <figcaption>Caption for the image.</figcaption> </figure>
Multimedia and Embedding Tags (HTML5)
<audio> and <video>
Purpose: Embeds audio and video files.
Example:
<audio controls> <source src="audio.mp3" type="audio/mpeg"> </audio> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> </video>
<canvas>
Purpose: Used to draw graphics via scripting.
Example:
<canvas id="myCanvas"></canvas>
Other Useful HTML5 Tags
<details> and <summary>
Purpose: Create a widget that the user can open and close to reveal or hide information.
Example:
<details> <summary>Title</summary> <p>Hidden details here</p> </details>
<mark>
Purpose: Highlights or marks text.
Example:
<p>Do not forget to <mark>highlight</mark> this text.</p>
<progress>
Purpose: Represents the progress of a task.
Example:
<progress value="50" max="100"></progress>
How to Check Your Site’s HTML Tags
Ensuring that your website’s HTML tags are correctly implemented is crucial for both search engine optimization (SEO) and overall user experience. Regularly checking the HTML structure of your web pages can help identify errors, improve accessibility, and enhance the effectiveness of your site in search engine rankings. This section will guide you through the process of checking your site’s HTML tags.
Tools for Checking HTML Tags
- Browser Developer Tools: Modern web browsers like Chrome, Firefox, and Safari have built-in developer tools. These can be accessed by right-clicking on a webpage and selecting “Inspect” or by pressing F12. The ‘Elements’ tab in these tools allows you to view the HTML structure of your webpage.
- Online Validators and Checkers:
- W3C Markup Validation Service: This is a free service that checks the markup validity of web documents in HTML, XHTML, etc. Simply enter your site’s URL or upload your HTML file.
- SEO SiteCheckup: This tool analyzes your website for SEO-related issues, including HTML tag implementation.
- Semrush Site Audit: Offers a more comprehensive audit, including checking for missing or incorrect HTML tags.
Steps to Check HTML Tags
- Choose a Tool: Select a tool that suits your needs. For a quick check, browser tools are sufficient. For a more thorough analysis, online validators are recommended.
- Analyze Your HTML Structure:
- Look for missing tags like <title>, <meta>, <header>, <footer>, and <nav>.
- Check for proper use of heading tags (<h1>, <h2>, <h3>, etc.) to ensure a good structure.
- Verify if the <img> tags have alt attributes for accessibility.
- Ensure that <a> tags have meaningful href values and proper anchor text.
- Validate Your Code: Use online validators to check the validity of your HTML. These tools will highlight errors and provide suggestions for corrections.
- Review SEO Aspects: Ensure that your HTML tags are optimized for search engines. Check if meta tags like <meta name=”description”> are properly used and relevant.
- Accessibility Check: Ensure that your HTML is accessible, particularly if you are using more complex HTML5 tags. Tools like the WAVE Web Accessibility Evaluation Tool can be helpful.
- Test Across Different Browsers: Check how your HTML renders across different web browsers. Browser-specific issues can often be caught this way.