Basic concepts and application examples of HTML inline elements and block level elements

Time:2020-10-18

HTML tags are divided into two types: inline elements and block level elements. First, let’s understand the concepts of inline elements and block level elements

Block level elements:Generally, it is a container for other elements, which can accommodate inline elements and other block level elements. Block level elements exclude other elements from being in the same line with them. The width and height attributes can be set, and the block level elements in normal flow will be placed vertically. The common block element is “div”

Inline element (in line element):Inline elements can only hold text or other inline elements, and are descendants of block level elements. It allows other inline elements to be on the same line with them, and cannot set height and width. The common inline element is “a”.

According to the concept of block level elements, we can understand that block level elements are preceded by line breaks, which is equivalent to adding a < br > tag before and after the elements. We can think of block level elements as a block or a rectangle, so block level elements can set height and width attributes

For example:
CSS file:

Copy code

The code is as follows:

#div1{
width:200px;
height:200px;
background:#666
}
div2{
width:200px;
height:200px;
background:#F00
}

HTML file:

Copy code

The code is as follows:

<div>
div1
Block level elements exclude other elements from being on the same line
</div>
<div>
div2
Block level elements exclude other elements from being on the same line
</div>

Display effect:

Two div elements are not on the same line

According to the concept of inline elements, we can understand that there are no line breaks before and after the inline elements. We can think of an inline element as a line, so it cannot set the height and width attributes.

Element level block tag

Address – Address
Blockquote – block reference
Center – Center
Dir – directory list
Div – easy to use at the block level and is also the main tag of CSS layout
DL – definition list
Fieldset – form control group
Form – interactive form
H1 – headline
H2 – subtitle
H3 – 3 level title
H4 – 4 level title
H5 – 5 level title
H6 – 6 level title
HR – horizontal divider
isindex – input prompt
Menu – menu list
NOFRAMES – optional content of frames, (display this block content for browsers that do not support frame
Noscript – optional script content (displayed for browsers that do not support script)
Ol – sort form
P – paragraph
Pre – formatted text
Table – table
Ul – unsorted list

Inline element

A – anchor
Abbr – abbreviation
Acronym – initial
B – bold (not recommended)
bdo – bidi override
Big – big font
Br – line feed
Cite – Reference
Code – computer code (required when referencing source code)
DFN – define field
Em – Emphasis
Font – font setting (not recommended)
I – italics
IMG – picture
Input – input box
KBD – define keyboard text
Label – table label
Q – short reference
S – middle dash
Samp – define sample computer code
Select – project selection
Small – small font text
Span – a common inline container that defines blocks within text
Strike – middle dash
Strong – bold emphasis
Sub – subscript
Sup – superscript
Textarea – multi line text input box
TT – define typewriter text
Var – define variable