HTML <div> Tag
A <div> section in a document that is styled with CSS:
<div > <h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
More «Try it Yourself» examples below.
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements — which is then styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Note: By default, browsers always place a line break before and after the <div> element.
HTML Div – What is a Div Tag and How to Style it with CSS
Kolade Chris
The HTML division tag, called «div» for short, is a special element that lets you group similar sets of content together on a web page. You can use it as a generic container for associating similar content.
The div tag is one of the most used tags and doesn’t seem to be going anywhere despite the introduction of semantic elements (these elements let you use several tags as a container).
In this tutorial, I will show you the various things you can do with the div tag, how you can use multiple divs the same HTML file without getting confused, and how to style it.
When to Use the div Tag
The div tag is multi-purpose – you can use it to do several things on a web page. You’ll mostly use it in web layouts and CSS art, but it’s super flexible.
Ultimately, you’ll almost always to use it to style whatever it contains or manipulate such things with JavaScript.
1. Use div in Web Layouts
You’ll primarily use the div tag to group similar content together so you can style it easily. A great example of this is using div to group different sections of a webpage together. You can put together the header, nav, sections, and footer of a page in an individual div tag so they can be styled together.
Later in this tutorial, I will take you through how to make a web layout with multiple div tags without getting confused.
Div itself does not have a direct effect on the presentation of the content unless you style it.
2. Use div in CSS Art
With the div tag, you can make various shapes and draw anything because it is easy to style.
- How to make a square with the div tag
To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it.
- How to make a circle with the div tag
You can make a circle with the div tag by coding an empty div in the HTML, setting an equal height and width for it in the CSS, then a border-radius of 50%.
- How to make the Nigerian flag with CSS
Making the Nigerian flag with the div tag is not that hard. The flag is a rectangular shape with the colors green, white, and green.
To make it, define 3 div tags and attach different classes, then style them appropriately in the CSS.
How to Style the div Tag
As we discussed above, the div tag is very easy to style. It’s one of the reasons why many developers use it to group similar content.
The div tag accepts almost all CSS properties without a problem. Let’s look at a few examples of that now.
1. How to Apply Font Properties with div
You can apply the CSS properties such as font-size , font-family , font-weight , and font-style on content grouped together with the div tag:
2. How to Apply Color with the Div Tag
You can apply the CSS color and background-color properties on content grouped together with the div tag:
3. How to Style Texts with the Div Tag
You can apply the CSS text-transform and text-decoration properties on a div tag like this:
4. How to Create a Shadow Effect with the Div Tag
You can create a shadow effect with the div tag with the box-shadow property:
What’s happening in the CSS above?
I was able to create the shadow effect with the CSS box-shadow property.
- The first value (2px) represents the offset on the x-axis (offset-x)
- The second (another 2px) represents the offset on the y-axis (offset-y)
- The next 20px is for the blur-radius, that is, how blurry you want the shadow to be.
- The 23px value is the spread radius (how far you want the shadow to spread)
- The last value is the shadow color – in this case, #7fecad.
The output looks like this:
How to Use Multiple Div Elements without Getting Confused
Div tags are commonly used to group similar content together. In older and even some newer web pages, you’ll find divs all around, despite the fact that semantic tags are recommended for accessibility and better SEO.
Since div tags are still very common, I recommend applying class and id attributes to them so you can manipulate individual div elements with those attributes.
I will walk you through how to put this into practice by making a basic web layout.
The first section you’ll want to make is the header, containing the logo and navbar:
Before styling the navbar, I made some CSS resets to make things align correctly and display nicely:
In the code snippet above:
- I removed the default margin and padding
- I set a maximum width for the main sections so they don’t go all across for better UX
- I set a margin at the bottom of each section to give them some space
- I set a margin 0 at the top and bottom, auto on the left and right to center them.
To style the navbar appropriately, I will grab the container div tag with its class attribute, header . I’ll give it a display of flex , alongside some other properties to lay it out nicely. I will also grab the div wrapped around the navbar ( ul element) by its class and lay it out with Flexbox.
For the remaining sections apart from the footer, the HTML and stylings are generic:
I gave the individual sections a greyish background color and a height of 200px. I positioned the h1 tags inside in their centers with Flexbox and applied a line height of 1.5 to each of them.
Finally, I gave the footer a deeper grey background color to make it distinct, and centered the content in it with a line height of 1.7.
The resulting layout looks like this:
Conclusion
The HTML div tag is commonly used among web developers everywhere.
Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. This is because semantic tags are better for accessibility and SEO.
In short, the div tag remains useful and isn’t going anywhere anytime soon, so feel free to use it when necessary.
Что такое вым в html
The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open (<div>) and closing (</div>) tag and it is mandatory to close the tag. The Div is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.
- Div tag is Block level tag
- It is a generic container tag
- It is used to group various tags of HTML so that sections can be created and styles can be applied to them.
As we know Div tag is block-level tag, the div tag contains entire width. Hence, every div tag will start from a new line, and not the same line.
Example 1:
Output:
As we know, div tag is used for grouping HTML elements together and to apply CSS and create web layouts using it. In the below example we don’t use div tag and hence we need to apply CSS for each tag (in the example using H1 H2 and two paragraphs p tags)
Example 2:
Output:
Creating Web Layout using Div Tag The div tag is a container tag. Inside div tag, we can put more than one HTML element and can group them together and apply CSS for them. Div tag can be used for creating a layout of web pages. In the below example we had created a web layout using the div tag. We can also create web layouts using table tag but table tags are very complex to modify the layout. The div tag is very flexible in creating web layouts and easy to modify. The below example will show grouping of HTML element using div tag and create block-wise web layout.
Example:
Using Div tag we can cover the gap between the heading tag and the paragraph tag. This example will display a web layout with three blocks.
Output:
We can use CSS in any of the divisions (<div> tag) using the following methods:
1. Using class: We can use class on that particular div and apply CSS either inside a <style> tag or linking an external CSS file.
- In case of internal CSS: We need to define Class in the <head> section of HTML within <style> element.
- In case of External CSS: We need to create a separate .css file and include it in HTML code inside <head> section using <link> element.
- Code:
- CSS for color class: File name color.css
- Output:
2. Inline CSS: We can directly use CSS in div also. This method does not require class. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.
- Code:
- Output:
Difference Between div tag and span tag
The div and span tags are two commonly used tags when creating pages using HTML and performs different functionality. While div tag is a block level element and span is an inline element The div tag creates a line break and by default creates a division between the text that comes after the tag as begun and until the tag ends with </div>. div tag creates separate boxes or containers for all elements inside this tag like text, images, paragraphs.
| Properties | Div Tag | Span Tag |
|---|---|---|
| Elements Types | Block-Level | Inline |
| Space/Width | Contain Whole Width Available | Takes only required Width |
| Examples | Headings, Paragraph, form | Attribute, image |
| Uses | Web-layout | container for some text |
| Attributes | Not required,with common css, class | Not required,with common css, class |
The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.
Тег <div> HTML блочный элемент верстки, контейнер
Тег <div> в HTML является блочным элементом верстки. Используется как контейнер для содержимого.
С помощью тега <div> обычно создается каркас и внутренняя структура страницы.
Тег <div> может содержать вложенные <div> элементы в неограниченном количестве.
HTML элемент <div> — основной тег верстки современного сайта. Для определения свойств блоков div используют каскадные таблицы стилей (CSS).
Тег <div> — блочный элемент. Для определения стилей строчных объектов используют тег <span> .
Синтаксис
Отображение в браузере
Пример использования <div> в HTML коде
Поддержка браузерами
| Тег | |||||
| <div> | Да | Да | Да | Да | Да |
Атрибуты
В HTML5 у тега <div> нет атрибутов.
Устаревшие атрибуты
Устанавливает правило выравнивания по горизонтали. В HTML5 используйте CSS.
Значения:
left — по левому краю (значение по умолчанию);
center — по центру;
right — по правому краю;
justify — по ширине.