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.

Basic HTML Elements

  1. Heading Elements

      <h1>This is a heading</h1>
<h2>This is a subheading</h2>
<h3>This is a smaller subheading</h3>

  2. Paragraph Element

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

  3. Anchor (Link) Element

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

  4. Image Element

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

HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and usually come in name/value pairs like name="value".

  1. href Attribute (used in <a> tag)

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

  2. src and alt Attributes (used in <img> tag)

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

  3. id Attribute

      <p id="unique-paragraph">This paragraph has a unique id.</p>

  4. class Attribute

      <p class="styled-paragraph">This paragraph is styled with a class.</p>

  5. style Attribute

      <p style="color: blue;">This paragraph is styled with an inline style.</p>

Example HTML Document

Here’s a complete example that demonstrates various HTML elements and their attributes:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tutorial on HTML elements and their attributes.">
    <title>HTML Elements and Attributes Tutorial</title>
</head>
<body>
    <h1>Welcome to the HTML Tutorial</h1>
    <h2>Introduction to HTML Elements</h2>
    <p>This tutorial covers the basics of HTML elements and their attributes.</p>
    
    <h3>Links</h3>
    <p>Here is a link to <a href="https://www.example.com">Example.com</a>.</p>
    
    <h3>Images</h3>
    <p>Here is an image:</p>
    <img src="https://via.placeholder.com/150" alt="Placeholder Image">
    
    <h3>Using Attributes</h3>
    <p id="unique-paragraph">This paragraph has a unique id.</p>
    <p class="styled-paragraph">This paragraph is styled with a class.</p>
    <p style="color: blue;">This paragraph is styled with an inline style.</p>
</body>
</html>

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.