Элемент разделения контента HTML ( ) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.
Интерактивный пример
Являясь «чистым» контейнером, элемент , по существу, не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя атрибуты class или id , помечать раздел документа, написанный на разных языках (используя атрибут lang ), и так далее.
Категории контента
Потоковый контент, явный контент.
Допустимое содержимое
Потоковый контент или (в WHATWG HTML), если родительским является элемент : один или несколько элементов , сопровождаемых одним или более элементами , в ряде случаев смешанных с элементами и .
Пропуск тегов
Ни одного; Оба тега, открывающий и закрывающий, являются обязательными.
Допустимые родители
Любой элемент, который разрешает потоковый контент в качестве содержимого.. Или (в WHATWG HTML): элемент .
Допустимые ARIA-роли
Любые
DOM-интерфейс
HTMLDivElement
Атрибуты
К этому элементу применимы глобальные атрибуты.
Примечание: Атрибут align устарел и вышел из употребления; не используйте его больше. Вместо этого, вам следует использовать свойства CSS или методы, такие как CSS Grid или CSS Flexbox для выравнивания и изменения положения элементов на странице.
Примечание
Элемент следует использовать только в том случае, если никакой другой семантический элемент (такой как или ) не подходит.
Примеры
Простой пример
div>p>Любой тип контента. Например, <p>, <table>. Все что угодно!p>div>
Результат будет выглядеть так:
Стилизованный пример
Этот пример создаёт прямоугольник с тенью, применяя стили к с помощью CSS. Заметьте, что использование атрибута class на элементе даёт применение стилей «shadowbox» (в дословном переводе означает «теневая коробка») к элементу.
HTML
divclass="shadowbox">p>Вот очень интересная заметка в прекрасном прямоугольнике с тенью.p>div>
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 (
) and closing (
) 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.
html
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)
html
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.
html
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.
We can use CSS in any of the divisions ( tag) using the following methods:
1. Using class: We can use class on that particular div and apply CSS either inside a tag or linking an external CSS file.
html
html
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.
html
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 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.
In this article, we will see about the div Tag in HTML. HTML has two important tags which are used for a group many other HTML tags and content One is tag another is tag. The span tag is used for a group of content and tag in one line. Vertically grouping with style and the different tag is happened by span tag. The div tag is a division tag used for many HTML tags like table, list, and paragraph on the web page. Mostly div tag used an empty web page to partition or make a section for content or HTML tags. To make a particular design for some special content div tag is useful because it does not affect the div layout and any CSS design.
Web development, programming languages, Software testing & others
The various HTML tag has opening and closing tag like:
The div tag has compulsory to opening
and closing
tag. Required HTML tags and content put inside of div tag.
Content of Div tag in HTML
To make the section of required data or content multiple div tags are used in a container. Example: header, footer, navigation bar, table, images, texts, etc. Different div tag we can design differently using CSS and easily apply conditions using JavaScript.
How Tag Works In HTML?
The div tag can hold various HTML tags and texts together.
You can see the example of using a div tag and without a div tag.
a. Using tag in HTML
.one < background-color:orange; >.two
Content1 of div tag in Html
Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used in empty web page to partition or make section for content or HTML tags.
Content2 of div tag in Html
To make section of required data or content multiple div tags are used in container. Example: header, footer, navigation bar, table, images, texts etc.
Explanation:
The above exam is using a div tag in HTML. The first div is orange in color, and the second div is a yellow color.
Div contains a header tag and paragraph together. Two div tags divide container with different content.
b. Without using tag in HTML
p < background-color:orange; >h1
Content1 of div tag in Html
Div tag is used for a group many HTML tags like table, list, a paragraph on a web page. Mostly div tag used in empty web page to partition or make section for content or HTML tags.
Content2 of div tag in Html
To make section of required data or content multiple div tags are used in container. Example: header, footer, navigation bar, table, images, texts etc.
Explanation:
The above example is without using a div tag in HTML. The header and their paragraph are in a different section.
The header is yellow, and the paragraph is in orange color. All headers and their content paragraphs have different sizes.
Uses of div Tag
Below are the uses and needs of the div tag:
The div tag is mainly used for grouping of tags and elements like images and their descriptions. In web pages uses many HTML tags to create content. All HTML tags are different with particular meanings. div tag combines all required HTML tags.
A div tag means division tags. In web pages, much entity like header, footer, navigation bar, etc. div tag makes many sections in one container to make all sections elegant.
It is easily used for styling using CSS and manipulating with JavaScript. It is not affecting in context as well as layout. The Steady style using a div tag is easy.
The div tag is useful for a web page is look attractive and understand the content for the user.
Remove the complexity of the program for a web developer; the div tag is useful.
Examples of div Tag HTML
Given below are the examples mentioned:
Example #1
This example is a div tag with classes. For example, left, middle and right class. div is container comes in vertically. But we can place different div in one section as right, left or middle side; this is useful for position management for content.
Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used for a web page to partition or make a section for content or HTML tags. To make a particular design for some special content div tag is useful because it does not affect the div layout and any CSS design.
Middle Side
Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used in empty web page to partition or make section for content or HTML tags. To make particular design for some special content div tag is useful because it is does not affect on the div layout and any CSS design.
Right Side
Div tag is used for group many HTML tag like table, list, paragraph in web page. Mostly div tag used for a web page to partition or make a section for content or HTML tags. To make particular design for some special content div tag is useful because it is does not affect on the div layout and any CSS design.
Example #2
In this example, we used div tags for the table. Sometimes table layout changes, but table put in div tag then not affected on layouts.
Div tag is division tag used for group many HTML tag like table, list, paragraph in web page.
Conclusion
The div tag is a division tag to make a partition on a web page. This is one empty container to contain HTML tags and contents. Using div tag web application looks neat, clean and attractive. The web application is easier to understand to users and developers.
Recommended Articles
This is a guide to div Tag in HTML. Here we discuss the introduction, how tag works In HTML? uses and examples respectively. You can also go through our other related articles to learn more –
89+ Hours of HD Videos 13 Courses 3 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
97+ Hours of HD Videos 15 Courses 12 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
HTML & CSS Course Bundle — 33 Courses in 1 | 9 Mock Tests 125+ Hours of HD Videos 33 Courses 9 Mock Tests & Quizzes Verifiable Certificate of Completion Lifetime Access 4.5
