Home > Article > Web Front-end > How to use HTML div tag? Here are examples of how to use div

How to use HTML div tag? Here are examples of how to use div

寻∝梦Original: 2018-08-28 13:54:2619018browse

This article introduces the detailed usage of HTML div tags. You can use divs without css. Although it is less useful, it is still somewhat useful. However, if you add css, it can better display the div tags. For specific usage, here is an introduction to the meaning of HTML div. Just take a look. Let’s take a look at it now

First of all, let’s talk about the meaning and usage of div:

Here is the definition introduction of div:

can define the partition or section (division/section) in the document.

tag can divide the document into independent and different parts. It can be used as a strict organizational tool and does not use any formatting associated with it.

If you use id or class to mark

, the tag will become more effective.

Here is an introduction to the usage of div:

is a block-level element. This means that its contents automatically start on a new line. In fact, line breaks are the only formatting behavior inherent to

. Additional styles can be applied via the

's class or id.

It is not necessary to add a class or id to every

, although there are certain benefits to doing so.

It is possible to apply either class or id attributes to the same

element, but it is more common to apply only one of them. The main difference between the two is that class is used for groups of elements (similar elements, or can be understood as a certain type of elements), while id is used to identify individual and unique elements.

HTML div tag prompt box:

Tips: The

element is often used together with CSS to lay out web pages.

Tip: By default, browsers usually place a line break before and after the

element. However, you can change this by using CSS.

Let’s analyze a case now:

<body>
 <h1>PHP中文网</h1>
  <p>编程语言教室，里面有很多课程...</p>
  ...
 <div class="news">
  <h2>php中文网首页 1</h2>
  <p>关于HTML5的东西都在这里...</p>
  ...
 </div>
 <div class="news">
  <h2>php中文网首 2</h2>
  <p>关于HTML的东西都在这里...</p>
  ...
 </div>
 ...
</body>

The effect of this case is as shown in the figure:

How to use HTML div tag? Here are examples of how to use div

Now let’s explain the example situation:

As you can see, the above HTML simulates the structure of a news website. Each of these divs combines the title and summary of each news item, which means that the divs add additional structure to the document. At the same time, since these divs belong to the same type of elements, you can use class="news" to identify these divs. This not only adds appropriate semantics to the divs, but also facilitates further use of styles to format the divs, which kills two birds with one stone.

Okay, the above are all the usages of HTML div tags, because many usages are used together with css, so this is the only point without using css styles. I hope everyone can learn css as soon as possible. If you have any questions, you can Question below

[Editor’s recommendation]

What is the function of HTML meta tag? Introduction to how to use html meta tag

#How to use html base tag? How to use the base tag (with examples)

The above is the detailed content of How to use HTML div tag? Here are examples of how to use div. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does the HTML ul tag mean? Detailed explanation of the role of HTML ul tagNext article：What does the HTML ul tag mean? Detailed explanation of the role of HTML ul tag

See more

How to use HTML div tag? Here are examples of how to use div

Related articles