Detailed explanation of HTML programming tags and document structure

The purpose of using HTML to mark up content is to give web pages semantics. In other words, it is to give your web page content some meaning that the user agent can understand.

HTML specifies a set of tags to mark content in different ways. Each tag is a description of what it contains. The most commonly used HTML describes headings, paragraphs, links, and images. Currently, HTML has a total of 114 tags, but according to the 80/20 principle, using about 25 of them can meet 80% of the marking needs.

The latest version of HTML, HTML5, defines a new batch of structural tags to group tags of related content, thereby better regulating the overall structure of web pages. These new tags include <header>, <nav> (navigation), <article>, <section>, <aside>, and <footer>.

1. Tag closure

For each element that contains content (such as headings, paragraphs, and images), there are two different ways to tag them, one using a closed tag and the other using an open tag, depending on whether the content it contains is text or not.

1.1 Text closing tag

Example: <h1>Hello, CSS!</h1>
1.2 Use self-closing tags for quoted content

Example: <img src="images/dog.jpg" alt="This is my dog." >

hint:
For self-closing tags, XHTML requires that they be written like this:

In HTML5, you can omit the last closing slash and write:

2. Attributes

Tip: Screen readers used by visually impaired users will read the contents of the alt attribute aloud, so be sure to give the tag
The alt attribute adds content that is immediately clear to the listener (or reader).

3. Titles and paragraphs
4. Composite Elements

HTML not only specifies basic content tags such as titles, images, and paragraphs, but also specifies tags for creating lists,
Markup for complex user interface components such as tables and forms. These are so-called composite elements, i.e. they are composed of multiple
Labels together.

5. Nested Tags

Simply put, it is to nest one tag inside another tag.
6. HTML5 Templates

7. Block-level elements and inline elements

Document flow effect: HTML elements flow from the top of the page to the bottom in the order in which they appear in the markup.

Almost all HTML elements have a display attribute of either block or inline. The most obvious exception is the table element, which has its own special display value.

Block-level elements (such as headings and paragraphs) are stacked on top of each other down the page, with each element occupying its own line. Inline elements (such as links and images) will be displayed side by side, and will only be folded to the next line if there is not enough space to display them side by side.

No matter which HTML element you want to understand, the first question you should ask is: is it a block-level element or an inline element? Knowing this, you can anticipate how an element will be positioned initially when writing your markup, so you can plan how to reposition it with CSS in the future.

There are two things to know:

Block-level element boxes expand to the same width as their parent element.

Inline element boxes shrink-wrap their contents, and try to wrap as tightly as possible.

7. Nested Elements

Nested within the markup are HTML tags, and nested on the screen are boxes.
8. Document Object Model

The Document Object Model (DOM) observes the elements in the page and the attributes of each element from the perspective of the browser, thereby deriving a family tree of these elements. Through the DOM, you can determine the relationship between elements. Referencing the DOM in CSS
By clicking on a specific position in the HTML element, you can select the corresponding HTML element and modify its style attributes.

The process of CSS manipulating DOM is to first select one or a group of elements and then modify the properties of these elements. When you modify an element via CSS, such as changing the width or inserting a pseudo-element in the markup, those changes are immediately reflected in the DOM and on the page.

In short, the DOM is constructed through HTML markup, and then CSS is used to modify the DOM when the page is initially loaded and when the user interacts with the page.