HTML block elements, inline elements

Classification of block-level elements
Block-level elements are divided into three types of structure or content: structured block elements, terminal block elements, and multi-object block elements.
I. 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 and simply divide the way the document is organized, and it 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 elements.
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 connotation of structure, and the semantic connotation is used in the form of terminal.
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 inline (inline elements):
Features of the block element:
* Always start from another line;
* height, row height and top and bottom margin can be controlled;
* Width default is 100% of the container in which it is located, unless a width is set.
Features of the inline element:
* and 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 it contains, 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, is also the main tag of CSS layout
* DL-Definition List
* Fieldset-form control Group
* Form-interactive form (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) are generally based on the semantic level (semantic) of the basic elements, can only accommodate text or other inline elements.
To clearly demonstrate the difference between block and inline, we can use their respective representation of the element div and span to illustrate:
Xxxxxxxxx
This ' s a DIV layout
Xxxxxxxxx
Div another line, its shape is not affected by the internal text
Xxxxxxxthis ' s a span layoutxxxxxxx all elements on one line, span just contain 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
The variable element is based on the above two changes with the environment, and 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 with 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.

HTML block elements, inline elements