Home > Developer > JavaScript
Basic HTML semantics and basic html Semantics
In order to make the page display a better content structure, when layout the page, combine the page elements to form Element blocks such as the header, article, footer, and sidebar, at the beginning, the <div> element is used for implementation, and the id or class is used to specify the role of the corresponding block. In naming, headers usually use headers, nav for navigation, article for articles, sidebar for sides, and footer for footers.
Some new elements are introduced in HTML5 to separate these parts, such as
First, let's give an example of a relatively complete structure. Here we only care about the HTML section, regardless of the actual style:
1 <body> 2Elements
<Nav> the navigation element is used to contain the main navigation blocks of a website. The actual words associated with the nav are navigation. In the preceding example, the <nav> element is placed in
<Article> the article element can be any independent content. If a page container contains multiple articles, each single article should belong to its exclusive <article> element. <Article> elements can be nested with each other. For example, a blog log is located in a <article> element, and each comment in this log is located in its sub-<article> element.
<Aside> additional information element. When located in the <article> element, it contains information related to the current article, instead of the overall page information, such as comments, quotes, and word lists. When the <aside> element is out of the <article> element, the element contains the content of the entire page, just as the code above contains links pointing to other parts of the website, it can also contain the latest log list, search box, return button at the top and bottom.
You can use the <section> element to centralize the relevant content on the page, and the element usually has a separate title. A website usually contains different parts, and each part can use the <section> element set. These content can also be the <article> element.
The
The above Code uses <figure> and <figcaption> to insert images. In fact, this structure can reference any content, such as videos, graphics, charts, and code, in the text of the chapter, however, the content cannot be an indispensable part of the page, such as the article body. <figcaption> is used to describe the text of the inserted content.
The hierarchical element <div> is still an important way to combine elements. The current element is not applicable to the combination of related elements, so this element should be used as a packaging container.
Old browsers that cannot identify these HTML5 elements will automatically process these elements as inline elements. Therefore, you need to add CSS code lines to render these elements as block-level elements, to associate these elements with CSS rules, you also need to apply some simple JavaScript, that is, HTML5 shiv or HTML5 shim.
For the HTML5 semantics, I feel like a comment. Although it can be left blank, it cannot be left blank. Especially in the early stages of code exposure, it is very important to develop good writing habits. It is good at adding comments to each part and rationally using semantic structural elements, which can not only directly benefit from the work, furthermore, writing is a good thing.
It may not always be used if you have mastered it. When you try it, you will always encounter problems. Then you can look back and find and solve the problems. This is a good way to learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
