HTML block-level element/inline Element

Block-level element Classification (Original: http://kevinpeng.iteye.com/blog/743936)

Block-level elements include structured block elements, terminal block elements, and multi-object block elements.

1. Structured block elements

These elements are used to construct the structure of a document. A good document structure is very advantageous for search engines and other technologies (such as JavaScript. They do not have a semantic meaning. They only define the document organization mode and do not reflect the document content.

Main structured block elements

* <Ol>
* <Ul>
* <DL>
* <Table>

Supports structured elements

* <Li>
* <DT>
* <DD>
* <Caption>
* <Thead>
* <Tbody>
* <Tfoot>
* <Colgroup>
* <Col>

Ii. Block elements of terminals

These elements are used to shift from structure to content. They have semantic meanings and can indicate the nature of the content. Terminal block elements are the endpoints of the structure. They cannot contain other block-level elements, but can only contain text or row-level elements.

Terminal Block Element

* <H1>... <H6>
* <P>
* <BLOCKQUOTE>
* <DT>
* <Address>
* <Caption>

Iii. Multi-Objective block elements

The so-called multi-objective refers to the ability to freely expand or nest the structure of the document, in the form of a terminal. When a multi-object block element is used in a structured manner, it contains a structured connotation. When used as a terminal, it contains a semantic connotation.

Multi-objective block elements can contain both block elements and content (the combination of text and row-level elements is content), but cannot contain both. Content should be placed in block elements. Block elements should not be used as sibling elements of line-level elements and text. They are restricted by the HTML checker and cannot be detected yet, but should be avoided.

Multi-objective block elements

* <Div>
* <Li>
* <DD>
* <TD>
* <Form>
* <NoScript>

When talking about CSS layout, We Need To Know something in advance. For various HTML tags/elements, You can classify them at the block level: block or Inline ):

Features of block elements:

* Always start with another line;
* The height, Row Height, top, and bottom margins can be controlled;
* The default width is 100% of the container, unless a width is set.

Features of the inline element:

* And other elements are on one row;
* The height, Row Height, top, and bottom margins cannot be changed;
* The width is the width of the text or image it contains and cannot be changed.

The following describes their nature and application:
Block elements are usually used as containers for other elements. They can accommodate inline elements and other block elements.
We know that by default, block elements will be arranged down in sequence in the form of a new row each time, and CSS controls the style, we can change this default Layout mode, place block elements in the desired position. It should be noted that the table label is also a type of block elements, based on the table and the layout based on CSS + Div, in the user's opinion, there is no difference except the page loading speed (the table is displayed only after all content elements are loaded. HoweverSource codeThis is a big difference. CSS layout source code based on a well-structured concept can at least make it easy for users without web development experience to find continuous page content. From this perspective, CSS layout code should have a better aesthetic experience.
We can think of a modular Div as a box, and then arrange them as needed to form the complete content. The webpage layout design follows the same pattern.

Block Element HTML Tag classification details

* address-address
* BLOCKQUOTE-block reference
* Center-align block
* Dir-directory list
* div-common easy to block, it is also the main label of CSS layout.
* dl-definition list
* fieldset-form control group
* Form-interaction form (only used to hold other block elements)
* H1-title
* H2-subtitle
* H3-Level 3 title
* H4-Level 4 title
* H5-5 level title
* H6-6 level title
* HR-horizontal divider
* isindex-input prompt
* menu-Menu list
* noframes -frames: Optional content, (for browsers that do not support frame display the content of this block
* NoScript-optional script content (for browsers that do not support script display this content)
* Ol-sort form
* P-paragraph
* pre-formatted text
* Table-Table
* ul-non-sorted list

◎ Inline elements are generally Basic Semantic-based elements and can only contain text or other inline elements.

To clearly show the differences between block and inline, we can use their respective representations of the element Div and span to describe them:

XXXXXXXXX

This's a div Layout

XXXXXXXXX
Div starts with another line, and its shape is not affected by internal text
Xxxxxxxthis's a span layoutxxxxxxx all elements are in one line, and span is just inclusive of Text
Inline element HTML Tag classification details

* A-anchor
* Abbr-abbreviation
* Acronym-First word
* B-bold (not recommended)
* BDO-bidi override
* Big-large font
* Br-line feed
* CITE-Reference
* Code-computerCode (Required when source code is referenced)
* Dfn-define a field
* Em-emphasis
* Font-font setting (not recommended)
* I-italic
* IMG-Image
* Input-input box
* KBD-defines the keyboard text
* Label-Table label
* Q-short reference
* S-hyphen (not recommended)
* Samp-Defines sample computer code
* Select-select a project
* Small-small font text
* Span-commonly used inline containers that define text blocks
* Strike-dashes
* Strong-highlighted in bold
* Sub-subscript
* Sup-superscript
* Textarea-multi-line text input box
* Tt-telex text
* U-underline
* Var-define variables

◎ A variable element changes with the environment based on the above two. 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 complies with the rules and restrictions of block elements or Inline elements.

Variable element HTML Tag classification details

* Applet-Java Applet
* Button-button
* Del-delete text
* IFRAME-inline Frame
* Ins-inserted text
* Map-image block (MAP)
* Object-object
* Script-client script

But with CSS, we can get rid of the restrictions on HTML Tag classification in the above table and freely apply the attributes we need on different tags/elements. For example, we can add the display: inline attribute to the [ul] label of the block element to display the vertical list horizontally, which is widely used when we set the blog navigation bar; we can also add the inline element [Cite] to the display: block attribute so that it also has attributes starting from the new line each time.