HTML Tags

Learn about essential HTML tags and their purpose in building web pages.

What are HTML Tags?

HTML tags are the building blocks of HTML documents. Tags are used to create elements that define the structure and content of a webpage. Most tags have an opening and a closing tag.

Note: Some tags, such as <img> and <br>, are self-closing and do not need a closing tag.

Common HTML Tags

1. <html>

The <html> tag represents the root of an HTML document. It contains all other HTML elements.

<html>
    <!-- HTML content goes here -->
</html>

2. <head>

The <head> tag contains meta-information about the HTML document, such as its title, linked resources, and metadata.

<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>

3. <title>

The <title> tag sets the title of the webpage, which appears in the browser tab and helps with SEO.

<title>My Web Page</title>

4. <body>

The <body> tag contains all the visible content of the page, including text, images, and other elements.

<body>
    <h1>Welcome to My Website</h1>
    <p>This is my homepage.</p>
</body>

5. <h1> to <h6>

Heading tags define headings of different levels, with <h1> being the highest (usually for main titles) and <h6> the lowest.

<h1>Main Heading</h1>
<h2>Subheading</h2>

6. <p>

The <p> tag represents a paragraph of text.

<p>This is a paragraph of text.</p>

7. <a>

The <a> (anchor) tag creates a hyperlink to other pages or locations within the same page.

<a href="https://example.com">Visit Example</a>

8. <img>

The <img> tag embeds an image in the document.

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

9. <ul>, <ol>, and <li>

These tags create lists. <ul> creates an unordered list, <ol> an ordered list, and <li> defines list items.

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

10. <div> and <span>

The <div> tag defines a block-level container, while <span> is an inline container.

<div>This is a block element.</div>
<span>This is an inline element.</span>

11. <form>

The <form> tag defines a form that allows users to submit data to a server.

<form action="/submit" method="POST">
    <input type="text" name="name">
</form>

12. <input>

The <input> tag creates interactive controls within a form, such as text fields, checkboxes, and radio buttons.

<input type="text" name="name" placeholder="Enter your name">

13. <button>

The <button> tag creates a clickable button.

<button type="submit">Submit</button>

14. <table>, <tr>, <th>, and <td>

These tags create tables. <table> is the table container, <tr> defines a row, <th> a header cell, and <td> a standard cell.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>24</td>
    </tr>
</table>

15. <iframe>

The <iframe> tag embeds another HTML page within the current page.

<iframe src="https://example.com" width="600" height="400"></iframe>

16. <section>

The <section> tag represents a thematic grouping of content, typically with a heading.

<section>
    <h2>Our Services</h2>
    <p>Details about services offered.</p>
</section>

17. <article>

The <article> tag represents a self-contained composition, such as a blog post.

<article>
    <h2>Blog Post Title</h2>
    <p>This is the content of the blog post.</p>
</article>

18. <aside>

The <aside> tag defines content related to the main content, like a sidebar.

<aside>
    <p>Related links and additional resources.</p>
</aside>

19. <nav>

The <nav> tag defines a set of navigation links, usually within the header or a menu.

<nav>
    <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="about.html">About</a></li>
    </ul>
</nav>

20. <header> and <footer>

The <header> and <footer> tags define introductory and concluding content for a section or page.

<header>
    <h1>Website Header</h1>
</header>

<footer>
    <p>Website Footer</p>
</footer>

21. <figure> and <figcaption>

The <figure> tag is used for self-contained content, often with a <figcaption> that provides a caption for the figure.

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Image Caption</figcaption>
</figure>

22. <mark>

The <mark> tag highlights or marks text for reference or emphasis.

<p>Don't forget to <mark>highlight</mark> important points.</p>

23. <time>

The <time> tag represents a specific time or date.

<time datetime="2023-03-10">March 10, 2023</time>

24. <progress>

The <progress> tag displays the progress of a task.

<progress value="70" max="100">70%</progress>

25. <meter>

The <meter> tag represents a scalar measurement within a known range.

<meter value="2" min="0" max="10">2 out of 10</meter>

26. <details> and <summary>

The <details> tag displays additional information upon user interaction. The <summary> tag represents the visible heading.

<details>
    <summary>More Information</summary>
    <p>This is the additional information.</p>
</details>

27. <abbr>

The <abbr> tag defines an abbreviation or acronym with an optional title for explanation.

<abbr title="Hypertext Markup Language">HTML</abbr>

28. <code>

The <code> tag represents a fragment of computer code.

<p>Example of <code>inline code</code>.</p>

29. <pre>

The <pre> tag displays preformatted text, preserving spaces and line breaks.

<pre>
Preformatted
  Text
    Example
</pre>

30. <kbd>

The <kbd> tag represents user input, typically from a keyboard.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

Additional Resources