HTML Elements and Tags

In HTML, elements are the building blocks of a webpage. An HTML element is defined by a start tag, some content, and an end tag. The tags are enclosed in angle brackets, and the content can be text, images, links, or other HTML elements.

Example of an HTML Element

  <p>This is a paragraph.</p>
  
  • Start tag: <p>
  • Content: This is a paragraph.
  • End tag: </p>

Block vs. Inline Elements

HTML elements are categorized into two types: block elements and inline elements.

Block Elements

Block elements take up the full width available, and they always start on a new line. They are used to create the structure of the document.

Common Block Elements

  • <div>
  • <p>
  • <h1> to <h6>
  • <ul>, <ol>, <li>
  • <section>
  • <article>
  • <header>
  • <footer>

Example of Block Elements

  <div>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</div>
  

Inline Elements

Inline elements take up only as much width as necessary, and they do not start on a new line. They are used to style parts of the text within block elements.

Common Inline Elements

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>

Example of Inline Elements

  <p>This is a <strong>bold</strong> word in a paragraph.</p>
  

Semantic HTML

Semantic HTML introduces elements that clearly describe their meaning in a human- and machine-readable way. These elements make the structure of a webpage more meaningful and improve accessibility and SEO.

Common Semantic Elements

  • <header>: Represents the header of a section or page.
  • <nav>: Contains navigation links.
  • <section>: Defines a section of a document.
  • <article>: Represents an independent piece of content.
  • <aside>: Contains content related to the main content, like a sidebar.
  • <footer>: Represents the footer of a section or page.

Example of Semantic HTML

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic HTML Example</title>
</head>
<body>
    <header>
        <h1>Website Header</h1>
        <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>
    <section>
        <article>
            <h2>Article Title</h2>
            <p>This is an article.</p>
        </article>
    </section>
    <aside>
        <h2>Related Content</h2>
        <p>This is an aside section.</p>
    </aside>
    <footer>
        <p>Website Footer</p>
    </footer>
</body>
</html>
  

By using semantic HTML elements, you can create a more meaningful and accessible webpage structure.