HTML5 document structure

The document structure of HTML5

HTML5 is much simplified, and its design follows three principles: 1. Compatibility, 2. Practicality, 3 .Universal accessibility

1. header element

The

tag defines the header of a document or a part of a document, and can also be used to set the article title.

The

element should serve as a container for introductory content or a navigation link bar.

In a document, you can define multiple

elements.

Note: The

tag cannot be placed inside a

,

or another

element.

Syntax description:

tag pairs can contain six title elements h1~h6, as well as p, span and other elements.

hgroup element

The

tag defines the main title and subtitle of the document. Only six title elements h1~h6 are usually used between tag pairs.

2. footer element

The footer element is mainly used to define footnote content for a page or an article, including the copyright information of the article, author contact information, etc. A page can contain multiple footers. element.

Example:

##

<footer>
   <ul>
     <li>Copyright © 2000-2013 华软 All Rights Reserved</li>
     <li>学院地址：广州.从化.广从大道13号 电话：020-87818918</li>
   </ul>
</footer>　

3. article element

Tags define independent content, a piece of independent content on the page that is not relevant to the context. For example, a post, a blog post, etc.

The content defined by the

tag must be meaningful in itself and must be independent of the rest of the document.

Potential sources for

: forum posts, blog posts, news stories, comments, etc.

Syntax description:

tag pairs can contain elements such as header, footer, section, and nested article.

Example:

<article>
　　<header>
　　　　<h2 id="写给IT职场新人的六个-关于">写给IT职场新人的六个“关于”</h2>
　　</header>
　　<p>
　　　　<b>关于工作地点</b> ...
　　</p>
　　...
</article>

4. section element

The section element is used Divide a certain block of content on the page, such as further dividing the block of content into several parts such as the chapter title, content, and footer.

Syntax description:

The tag pair can contain six title elements h1~h6, p elements and multiple article elements

"Block" contains multiple articles inside. In addition, section elements can be nested.

Example:

<article>
　　<header>
　　　　<h2 id="写给IT职场新人的六个-关于">写给IT职场新人的六个“关于”</h2>
　　</header>
　　<section> 
　　　　<h3 id="关于工作地点">关于工作地点</h3>
　　　　<p>...</p>
　　</section>
　　<section> <h3 id="关于企业">关于企业</h3> <p>...</p> </section>
　　...
</article>

5. nav element

The nav element is used Define various navigation bars on the page. A page can have multiple nav elements as navigation for the entire page or different parts of the content.

The only impossible position for nav is within the address element

Basic syntax:

<nav><a>#</a><a>#</a><a>#</a></nav>

6. aside element

The aside element represents auxiliary information related to the content of the article element in addition to the content of the article element.

It can include references, sidebars, and advertisements related to the current page or main content. , navigation bars, and other similar parts that are distinct from the main content.

7. audio audio tag

The audio tag defines sound, such as music or other audio streams.

Currently, the audio element supports three file formats: MP3, Wav, and Ogg.

<audio></audio>

# Properties Description

src URL of the audio to be played

autoplay Play the audio as soon as it is ready

controls Display audio controls to the user, such as play/pause buttons

loop Restart playback whenever the audio ends

preload The audio is loaded when the page loads and is ready to play

8. video video tag

video tag Defines video, such as a movie clip or other video stream.

Currently, the video element supports three video formats: MP4, WebM, and Ogg.

<video></video>

## Property Description

src The video to be played URL

width Set the width of the video player

height Set the height of the video player

autoplay The video will be played as soon as it is ready

controls to the user Display video controls, such as play/pause buttons

loop Start playing again after the media file has finished playing

    muted      规定视频的音频输出应该被静音

    poster     规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像

    preload    视频在页面加载时进行加载并预备播放，属性值(none:只有单击了Play按钮才加载视频;metadata:仅加载元数据,例如视频长度、作者、版权)

    9. 图形中的 figure 及 figcaption

    元素figure及figcaption实际上不能算作结构性元素，但在组织独立图片、图像、图表及编码列表时仍然很受欢迎。

    每一个figure元素中只能包括一个figcaption元素。图片排列一起可用。百度文库里有篇“绚丽的HTML5 Figure图片字幕标题特效”

    常常用到一种图片列表，图片+标题或者图片+标题+简单描述。

    实例代码：

   

黄浦江上的的卢浦大桥

    figure用来代替原来li标签，P标签谁来取代呢？答案就是：figcaption

    w3c赋予的定义：figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    那么上面的代码就变成了：

    <figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img  src="/static/imghwm/default1.png" data-src="images/黄浦江上的的卢浦大桥.jpg" class="lazy" alt="HTML5 document structure" >
    </figure>

    效果图如下：

黄浦江上的的卢浦大桥

更多HTML5的文档结构 - 不报错才可怕相关文章请关注PHP中文网！