HTML Elements

Introduction

In this chapter, you will learn about HTML elements, which are the building blocks of an HTML document. An element typically consists of a start tag, content, and an end tag.

What are HTML Elements?

HTML elements are the fundamental components of HTML that define the structure and content of a web page. Each element has a specific purpose and function. An HTML element is usually made up of a start tag, content, and an end tag.

Example of an HTML Element

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

• <p>: The start tag.
• This is a paragraph.: The content.
• </p>: The end tag.

Types of HTML Elements

Block-Level Elements

Block-level elements typically start on a new line and take up the full width available. Common block-level elements include:

• <div>: A generic container for content.
• <h1> to <h6>: Headings, with <h1> being the highest level and <h6> the lowest.
• <p>: Paragraphs.
• <ul> and <ol>: Unordered and ordered lists.
• <li>: List items.

Inline Elements

Inline elements do not start on a new line and only take up as much width as necessary. Common inline elements include:

• <span>: A generic container for inline content.
• <a>: Anchor, used for hyperlinks.
• <img>: Images.
• <strong>: Bold text.
• <em>: Italic text.

Empty Elements

Empty elements, also known as self-closing elements, do not have content or an end tag. Common empty elements include:

• <br>: Line break.
• <hr>: Horizontal rule.
• <img>: Image (with attributes to specify the source and alt text).
• <input>: Input field in a form.

Attributes

Attributes provide additional information about HTML elements. They are included in the start tag and usually come in name/value pairs. Common attributes include:

• id: Uniquely identifies an element.
• class: Specifies one or more class names for an element.
• src: Specifies the source of an image.
• href: Specifies the URL of a link.
• alt: Provides alternative text for an image.

Example with Attributes

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

• <a>: The start tag for an anchor element.
• href="https://www.example.com": The href attribute specifying the URL.
• target="_blank": The target attribute specifying that the link should open in a new tab.
• Visit Example: The content of the anchor element.
• </a>: The end tag for the anchor element.

Nested HTML Elements

Nested HTML elements are elements contained within other elements. This nesting allows you to create more complex and structured HTML documents.

Example of Nested Elements

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

• <ul>: The start tag for an unordered list.
• <li>: List item tags. These are nested within the <ul> element.
• <ul>: Another unordered list nested within a list item.
• <li>: Sub-items within the nested unordered list.

Explanation of Nested Elements

• The outer <ul> contains three <li> elements.
• The second <li> contains another <ul>, which in turn contains two more <li> elements.
• This nesting structure allows you to create complex lists and hierarchies.

Conclusion

HTML elements are the essential building blocks of web pages. Understanding the different types of elements and how to use them, including nested elements, allows you to create well-structured and semantically meaningful HTML documents. This knowledge is fundamental for anyone looking to develop web pages and web applications.