HTML5: Organizational document structure
The document section, that is, the body section, contains the content that visitors can see. Traditional HTML documents usually use div elements to organize the document structure, coupled with appropriate style sheets. However, the problem with div elements is the lack of semantic information. When viewing others' source code, it is necessary to make effort to understand which div represents what and how to build the entire page, it usually needs to jump between HTML pages, style sheets, and browsers. Especially if the organizational structure of the HTML page is poor, it will easily lead to confusion. In this regard, HTML5 adds many semantic elements to replace div elements and separate semantics and presentation.
All semantic elements have a notable feature: they have little or even no influence on the content in appearance when nothing is actually done. There are several reasons for the existence of semantic elements:
1) Easy to modify and maintain. The HTML5 semantic elements can convey additional structured information, making it easy to understand the overall layout of the document and the role of different blocks.
2) Accessibility. An important topic of modern web design is to allow anyone to access webpages without any access. It is to allow screen readers and other auxiliary tools to freely navigate pages.
3) search engine optimization. HTML5 allows search engines to better understand your website and collect more information on the pages indexed by them.
4) Future features. New browsers and Web editing tools will certainly use semantic elements in the future. For example, the main part of the document is presented.
The most important thing is that if you use semantic elements correctly, you can create a clearer Page Structure and adapt to future development trends of browsers and Web design tools. The following describes the semantic elements used to organize the document structure. First, let's take an example to understand the common HTML 5 document structure.
HTML5 document structure
Old HTML pages use div elements with appropriate style sheets. However, the problem with div elements is that they do not reflect any page-related information. HTML5 pages replace these div elements with descriptive semantic elements. The following example contains the main semantic elements used in HTML5 to describe the structure of a document. The use of semantic elements is closely related to the meanings of the content they are labeled, you can use them flexibly.
Things I likeby Adam Freeman
Questions and comments?Email me
Contents
- Fruits I Like
- Activities I Like
- Kinds of Triathlon
- The kind of triathlon I am aiming for
......
Why Fruit is Healthy
Here ar three reasons why everyone should eat more fruit:
- Fruit contains lots of vitamins
- Fruit is a source of fibre
- Fruit contains few calories
I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.
Kinds of TriathlonThere are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
- 1.5km swim
- 40km cycle
- 10km run
More Information:Learn More About FruitLearn More About Triathlons
©2011, Adam Freeman. Visi Apress
The document above contains many HTML5 elements. If you want to differentiate different elements in the rendering, You need to match the appropriate appearance. This article does not cover the appearance.
Title
HTML defines a title element system with the highest levels from h1 to h6 and h1. Titles of the same level are usually used to divide the content into several parts, each of which is a topic. Titles at different levels are usually used to represent all aspects of the same topic. They constitute the outline of the document. Therefore, users only need to browse the titles at all levels of the document to get a preliminary understanding of its meaning and structure. Through the title system, users can quickly navigate to the content they are interested in.
Fruits I like......
Sub-title
The hgroup element can be used to process several title elements as a whole (if the hgroup element is not used, the main title and sub-title will be treated as two headers, the main title and subtitle will be treated as a title) to avoid disturbing the outline of the HTML document.
Fruits I likeHow I Learned to Love Citrus
......
Here, "How I Learned to Love Citrus" is a sub-title of "Fruits I like". The two are treated as one title, the title and Subtitle are usually tighter in the style.
Mark the main area of the page
A page usually has only one part representing its main content. You can put such content in the main element, which is used only once on a page.
......
......
......
Role = "main" helps the screen reader locate the main area of the page.
Create an article
The article element represents an independent part of an HTML element. It can be published or used independently of the rest of the page and can be viewed as an article. Article can be nested in another article, as long as the article and the outer article are partially related to the whole, and can exist independently in semantics. A page can have multiple article elements, and each article can be an independent article. An article can contain one or more section elements (see the next section ).
......
......
......
......
......
......
......
......
......
Section
The section element is added to HTML5 to indicate a section in the document. There is no clear rule on when to use the section element, but usually the section element should be used to include the content that should be included in the document outline or directory. A section can belong to one or more sections. The section element usually contains one or more paragraphs and one title, but the title is not required.
Fruits I LikeHow I Learned to Love Citrus
I like apples and oranges.
Additional fruitsI also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
More informationYou can see other fruits I like here.
The preceding three sections are defined and nested layer by layer. The title of each section is h1. However, in different browsers, the default appearance of the section hierarchy varies. You can create custom styles to solve this problem.
The difference between section and article is that section is more organized and structured in nature and can be considered as an independent paragraph, while article represents a self-contained container.
Header and tail
The header element indicates the header of a section, which can contain the title and logo. The header element usually contains a title element or an hgroup element. It can also contain the navigation element of this section. A page can contain any number of header elements. Their meaning can vary according to their context.
The footer element indicates the end of a section. It usually contains the summary information of this section. It can also include the author's introduction, copyright information, links to relevant content, logos, and disclaimer.
Things I likeby Adam Freeman
Fruits I LikeHow I Learned to Love Citrus
......
Activities I like
......
©2011, Adam Freeman. Visi Apress
This example defines three header elements. The header element of the body element serves as the header of the entire document.
Note: The header or another footer cannot be nested in footer, or the tooter cannot be nested in the header or address element.
Navigation area
The nav element indicates the navigation area in the document, including links to other pages or other parts of the same page. Not all links need to be placed in the nav element. The purpose of this element is to plan the main navigation area of the document.
Things I likeby Adam Freeman
Contents
- Fruits I Like
- Activities I Like
- Kinds of Triathlon
- The kind of triathlon I am aiming for
......
......
More Information:Learn More About FruitLearn More About Triathlons
......
Two nav elements are used here. The header provides you with the navigation method in this document, and the other is placed at the end of this document to provide you with some additional links.
Do not place all links in the nav block. nav should be used only in the largest and most important navigation area of the page. For example, the document navigation provided above must be placed in the nav block. However, if it is just information about the license and contact information, it is not necessary to put it in the nav block.
Note Column
The aside element is used to indicate content that is slightly different from the surrounding content. Similar to the sidebar in a book or magazine, its content is often related to other content, articles, or sections on the page, it is not a part of the subject content. It can be background information, links to relevant articles, and so on.
......
......
Why Fruit is Healthy
Here ar three reasons why everyone should eat more fruit:
- Fruit contains lots of vitamins
- Fruit is a source of fibre
- Fruit contains few calories
......
......
You can use the aside element like in the Notes bar of a print. You can use it to introduce another related topic or explain a point in the main document. You can also use the aside element to store advertisements and related content links.
Contact information
The address element is used to indicate the contact information of the document or article element. If the address element is a sub-element of the article element, the contact information provided by it is considered as the sub-element of the article. When the address element is a sub-element of the body element, the contact information provided by it is considered as the entire document. The address element cannot be used to indicate addresses other than the contact information of documents or articles. For example, it cannot be used to indicate the addresses of customers or users.
......Questions and comments?Email me......
......
Details Area
The details element generates a region in the document. You can expand it to learn more about a topic. A details element usually contains a summary element, which is used to generate a description label or title for the details area.
......
......
I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.
Kinds of TriathlonThere are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
- 1.5km swim
- 40km cycle
- 10km run
The details element has a default appearance in the browser. The effect in chrome is as follows:
By default, the details element is in the fold state, and only the content of its summary element is visible. To expand the page from the beginning, you can use its open attribute (Boolean attribute ).
Kinds of TriathlonThere are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
- 1.5km swim
- 40km cycle
- 10km run
The effect is as follows:
Summary The semantic elements of HTML5 are defined based on the existing web research by its inventor. They not only browsed their favorite sites, but also studied Google's statistics on billions of web pages. If you are interested, you can view them here (google sites cannot be viewed directly.
Currently, HTML5 semantic elements are supported in all modern browsers, but some remedy measures are required for earlier browsers (Internet Explorer earlier than IE9. Since semantic elements do not do anything themselves, to support them, you only need to let the browser treat them as common div elements. The rest of the work is to add vertex style rules for them, even if you use an antique browser to access these webpages, there is no problem. Fortunately, these jobs have already been implemented by Modernizr.
