HTML5 semantic elements and html5 Semantics
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> semantic element </title>
</Head>
<Body>
<! -- Structure element -->
<Header> header
<Section> indicates a section: the section expression used for the region </section>
<Footer> footer of the Area </footer>
<Nav> menu navigation </nav>
<Article> indicates the subject content of the article </article>
<! -- Block-level elements are used to divide regions -->
<Aside> </aside>
<Figure>
<Figcaption> </figcaption>
</Figure>
<Code> indicates a piece of code </code>
<Dialog> indicates the dialog.
<Dt> speaker </dt> <dd> content </dd>
</Dialog>
<! -- Semantic element -->
<Mtter> value range </mtter>
<Time> </time>
<Progress> progress bar </progress>
<Video> video </video>
<Audio> audio </audio>
<! -- Interaction element -->
<Details> a specific section is displayed in a certain way </details>
<Datagrid> used to control client data display </datagrid>
<Menu> Dynamic Interaction menu </menu>
<Command> name </command>
<! -- Show case -->
<Article>
<Header>
<H1> tags in the HTML head header
<Time> December 12, 2015 </time>
</Header>
<P> there are many tags and elements in the HTML head header, involving browser rendering and SEO on webpages. Each browser kernel and various domestic browser vendors have their own tag elements, this leads to many differences. In the mobile Internet era, the head structure and the meta element on the Mobile End become more important. The purpose of this article is to understand the meaning of each label and write the head header label that meets your needs. Based on a few articles, this article provides an extension summary to introduce the meaning and use cases of various labels and elements in common headers. </P>
<Footer>
<P> http://www.baidu.com </p>
</Footer>
</Article>
<! -- Comment -->
<Section>
<H2> comment
<Article>
<Header>
<H3> Zhang Shuai
<P> <time pubdata datatime = "2013-09-23-"> one hour ago </time> </p>
</Header>
<P> comment </p>
</Article>
<Article>
<Header>
<H3> Zhang Shuai
<P> <time pubdata datatime = "2013-09-23-"> one hour ago </time> </p>
</Header>
<P> comment </p>
</Article>
</Section>
</Body>
</Html>
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
