Block-level elements and inline element records in HTML

Html
Block elements, inline elements

Classification of block-level elements
Block-level elements are divided into three types depending on their application to structure or content:
Structured block elements, terminal block elements, multi-object block elements.

Structured block elements

Such elements are used to construct the structure of a document, and a good document structure is advantageous for search engines and other technologies such as JavaScript. They have no semantic meaning that only divides the way the document is organized and does not reflect the content of the document.

The main structured block elements

* <ol>

* <ul>

* <dl>

* <table>

Support for structured elements

* <li>

* <dt>

* <dd>

*<caption>

* <thead>

* <tbody>

* <tfoot>

* <colgroup>

* <col>
Two
.
Terminal block elements

Such elements are used to move from structure to content, which has semantic meaning and can indicate the nature of the content. The terminal block elements belong to the end of the structure, and they can no longer contain other block-level elements, only text or row-level.

Terminal block elements

*
* <p>

* <blockquote>

* <dt>

* <address>

* <caption>

Three
.
Multi-target block elements

Multi-objective refers to the structure of a document that can be expanded or nested freely, in the form of a terminal. When the multi-object block element is used in a structured way, it contains the structure, and the use of the terminal form contains the connotation of semantics.

A multi-object block element can contain either a block element or a content (a combination of text and row-level elements as content), but not both. The content should be placed in a block element. The block element should not be a sibling of the line-level elements and text, and is limited by the HTML validator, but it should be avoided.

Multi-target block elements

* <div>

* <li>

* <dd>

* <td>

* <form>

* <noscript>

When we talk about CSS layouts, we need to know something in advance. For the various HTML tags/elements, you can make a classification from the block level: either blocks (block elements) or ine (inline elements): The characteristics of the block element:
*
Always start from another line;
*
Height, row height and top and bottom margin can be controlled;
*
The width default is 100% of the container in which it is located, unless you set a width.

Inline
Features of the element:
*
And the other elements are on one line;
*
Height, row height and top and bottom margin can not be changed;
*
Width is the width of the text or picture that it holds, and it cannot be changed.

The properties and applications of these are further explained below:

A block element is usually a container for other elements, which can accommodate inline elements and other block elements.

We know that by default, block elements are ordered to go down in a row each time, and CSS controls their style, so we can change the default layout pattern and place the block elements where you want them. It should be noted that table tags are also one of the block elements, based on table tables and Css+div-based layouts, in the view of the user in addition to the page loading speed differences (table is displayed after all content elements are loaded), there is no other difference. But from the source of the page, this difference is very big. CSS layout based on good structure concept design source code, at least make it easy for users without web development experience to find continuous page content. From this point of view, CSS layout code should have a better aesthetic experience.

We can think of the modular Div as a box, and then put them in accordance with their own intention to form the complete content, Web layout design is to follow the same pattern. Block element HTML tag classification details
* Address-addresses
* BLOCKQUOTE-Block reference
* Center-align Block
* DIR-List of directories
* Div-
Common block-level easy, but also the main label of CSS layout
* DL-Definition List
* Fieldset-form

Control group
* Form-
Interactive forms (can only be used to accommodate other block elements)
* H1-Big title
* H2-Subtitle
* H3-3 level Title
* H4-4 level Title
* H5-5 level Title
* H6-6 level Title

* HR-Horizontal divider Line

* Isindex-input Prompt

* menu-List of menus

* Noframes-frames Optional content, (for browsers that do not support frame, display this chunk content

* NoScript-Optional script content (this content is displayed for browsers that do not support script)

* Ol-Sort Form

* P-Paragraph

* Pre-formatted text

* Table-form

* ul-Non-sorted list


Inline elements
(inline Element) is generally based on the semantic level (semantic) of the basic elements, can only accommodate text or other inline elements. In order to clearly demonstrate the difference between block and inline, we can use their respective representative elements DIV and span demo to illustrate: xxxxxxxxx this ' s a DIV layoutxxxxxxxxxdiv another line, Its shape is unaffected by internal text Xxxxxxxthis's a span layoutxxxxxxx all elements on one line, span just contains text

Inline elements (inline Element) HTML tag Classification details

* A-Anchor point

* ABBR-abbreviation

* Acronym-First word

* B-Bold (not recommended)

* Bdo-bidi Override

* Big-Large font

* BR-line break

* Cite-citation

* Code-computer code (required when referencing the source)

* DFN-Define Fields

* EM-emphasis

* Font-typeface settings (not recommended)

* I-Italic

* img-Images

* Input-Enter box

* KBD-Define keyboard text

* Label-table label

* Q-Short reference

* S-Medium dash (not recommended)

* Samp-Define sample computer code

* Select-Project selection

* Small-Small font text

* span-a common inline container that defines chunks within a text

* Strike-Medium dash

* Strong-Bold Emphasis

* Sub-subscript

* SUP-Superscript

* TEXTAREA-multi-line text input box

* TT-Telex text

* U-Underline

* var-Define Variables


Variable element

is based on the above two changes with the environment, its basic concept is to determine whether the element is a block element or an inline element based on the context relationship. Once its category is determined, it follows the rules of the block element or inline element.

Variable element HTML tag classification details

* Applet-java Applet

* Button-Buttons

* Del-delete text

* Iframe-inline Frame

* INS-Inserted text

* Map-image block (map)

* Object-object Object

* Script-client-side scripting

But through CSS we can get rid of the limitations of the HTML tags in the table above, and freely apply the attributes we need on different tags/elements. For example, we can add the Display:inline property to the block element [UL] tag, and let the original vertical list be displayed horizontally, which is widely used when we set up the blog navigation bar, and we can also add the inline element [cite] with Display:block properties. Let it also have properties that start from the new line each time.

This article from "Don't Make good" blog, declined reprint!

Block-level elements and inline element records in HTML