tags constitute a section to which to apply a specific formatting described with CSS code. Identifying an HTML div using an attribute makes it possible to target it with CSS, to systematically apply the corresponding formatting. The element container thus makes it easier to structure the web page.
> Download this guide and learn the basics of HTML and CSS ” align=”middle”/>To make all “Remember” paragraphs bold, for example, simply add the same HTML div to each “Remember” paragraph and then assign the div the corresponding property in the CSS code.
What is the HTML div tag?
The HTML div tag, for “division”, is a block element that is intended to contain other elements: an HTML div groups content within its
- The HTML div is a generic container: its function is structuring, it has no semantic value. Concretely: the semantic tags
- As a block-like container, the HTML div groups multiple elements. It thus differs from the “inline” type span container. Like the div, the span is a generic element. But unlike the HTML div, the span is an internal container, inserted in a line of code, which contains only one element. Illustration: to put an expression in bold in a paragraph, you must add the span tag before and after the expression; if the whole paragraph must be displayed in bold, the paragraph must be inserted in a div container.
- The HTML div element produces a visual effect provided you assign CSS properties to it. If the browser must apply distinct layouts several times, attributes, class or id for example, must be used to clearly identify each layout. Example: the web page must display two inserts and three paragraphs of text in underlined red; you have to create an “inset” HTML div to insert twice, and a “red underlined” HTML div to insert three times.
What is the div tag used for?
The div tag facilitates and clarifies the organization of the HTML file by dividing it into several sections. The different sections appear there in a distinctive way, the readability of the code is thus improved: the developer finds his way around more easily.
If necessary, the element also serves as a marker: each time the container appears in the HTML code, the browser applies the corresponding CSS properties to the section. To determine several layouts, you must use attributes: each attribute applies a specific CSS style. In this way, the content of the web page is structured in a coherent and attractive way. On the developer side, the HTML div avoids multiplying the lines of code: all you have to do is insert the appropriate container to apply the desired style.
How to use div in HTML?
The HTML div is inserted with the tags:
; the opening tag and the closing tag are mandatory. Inside, it is possible to include all types of HTML elements: a paragraph, a title, a hyperlink, a list, an image and even another div.
To apply a specific CSS style, you must identify the HTML div with a class or id attribute:
. Then the properties are populated in the CSS code with the desired values.
Do not hesitate to use an HTML editor to help you rewrite the code of your site. We also offer a list of free HTML editors.
Example of using the HTML div tag
In this example, the web page contains a section reserved for promotional offers. The title and text of this section must be highlighted in a frame, and displayed in bold. For this purpose, an HTML div identified using the class=”promo” attribute is created. The
title and the
tag is placed at the end of the promotional text paragraph. The CSS code indicates the border and font-weight properties of the .promo div.
Each time a new element is inserted into the “promo” div tags of the HTML file, it is displayed in bold in an inset.
Many CSS properties are available to customize the appearance of the content of the div: font-family to modify the font of the text, color and background-color to add color, text-align to center the text or even height to size a insert. The HTML div also allows you to create different types of layouts, with columns, boxes and grids for example.
To go further, download this guide to HTML and CSS programming languages and learn the definitions, differences and basic code elements of these two programming languages to manage your website.