HTML from Scratch: The HTML div Tag. Lesson #17

In today’s lesson, we will explore one of the most important elements in HTML — the <div> tag. It is a fundamental tool for creating web page structure and grouping content. Without it, modern website layout is impossible to imagine.

Layout Evolution: From Tables to Blocks

To understand the greatness of <div>, you need to look back. A long time ago, when the internet was slow and monitors were thick, website layout was done using tables (<table>).

Using tables for structure was inconvenient and cumbersome. Today, tables are used strictly for their intended purpose (for tabular data), and the standard has become block layout using the <div> tag.

What is the <div> tag?

The <div> tag (short for division) is a block-level element that serves as a container for other HTML elements. By itself, it has no visual styling, but it allows you to logically group headings, paragraphs, and images into separate blocks.

This is necessary to control the appearance and positioning of these element groups on the page using CSS (Cascading Style Sheets).

Main Attributes of the div Tag

To control containers, we need attributes. Let’s look at the key ones.

1. The id Attribute

It is like a passport. It must be unique on the entire page. There cannot be two people with the same passport number, and there cannot be two blocks with the same id.

• When to use: For unique, one-of-a-kind elements (for example, #header — the site header, or #footer — the footer).

2. The class Attribute

It is like a school uniform or club membership. A class can be given to hundreds of elements at once.

• When to use: When you have many similar elements that should look or behave the same way (for example, product cards, buttons, menu items).

3. The title Attribute

This attribute is responsible for a tooltip. The text placed inside it will appear when the user hovers the mouse cursor over the block.

• Example: title="Here I am!"

• Usage: Useful for explanations or additional information that shouldn’t take up space on the screen permanently.

4. The align Attribute

This attribute allows you to set the horizontal alignment of the content inside the <div> block.

• align="left" — aligns content to the left edge (default).

• align="right" — aligns content to the right edge.

• align="center" — aligns content to the center.

Note: In modern HTML5, CSS properties (like text-align) are more commonly used for alignment, but knowing the align attribute is useful for understanding older code.

Code Example

Let’s combine all the learned attributes in one example:

<div id="main-container" align="center">
    
    <div class="news-item" align="left" title="Click to read more details">
        <h3>HTML News 1</h3>
        <p>Learning new attributes.</p>
    </div>

    <div class="news-item" align="center" title="Click to read more details">
        <h3>HTML News 2</h3>
        <p>Text is centered</p>
    </div>

    <div class="news-item" align="right" title="Here I am!">
        <h3>HTML News 3</h3>
        <p>Text is shifted to the right.</p>
    </div>

</div>

Conclusion

In this lesson, we analyzed the <div> tag — the main building material for HTML layout. We learned how to use IDs and classes to refer to elements, as well as alignment and tooltip attributes.