Semantic HTML

最新推荐文章于 2024-09-25 09:53:04 发布

qq_52315213

最新推荐文章于 2024-09-25 09:53:04 发布

阅读量123

点赞数

文章标签：前端 javascript 开发语言

原文链接：https://www.codecademy.com/courses/learn-html/lessons/semantic-html/exercises/review

版权

Semantic HTML是指在HTML中使用语义化的标签,让页面的内容结构更明确,便于浏览器、搜索引擎解析。

具体来说,Semantic HTML的主要特点包括:

使用语义化的标签如header、nav、main、article、aside、footer等来表示不同的内容区块。
使用正确的标题标签h1到h6来表示不同级别的标题。
使用列表标签ul/ol/dl来表示列表数据。
使用表格标签table来表示表格数据。
使用表单标签form、input、select、button来构建表单。
使用语义化的文本格式化标签如em、strong等。
提供页面 overall 文档结构描述,如 article、section 等。
用figure、figcaption来表示内容关联的图像。
用mark、time、meter、progress等表示特定语义的文本。

总之,Semantic HTML让页面具有良好的语义结构化,有利于提高可访问性、提高代码质量、提高SEO(Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately)。它使HTML代码更具可读性,也更符合Web标准。

1. Header

A <header> is a container usually for either navigational links or introductory content containing <h1> to <h6> headings.

<header>
  <h1>
     Everything you need to know about pizza!
  </h1>
</header>

之前我们是这样定义的：

<div id="header">
  <h1>
    Everything you need to know about pizza!
  </h1>
</div>

ps：<div> 元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。

By using a <header> tag, our code becomes easier to read. It is much easier to identify what is inside of the <h1>‘s parent tags.

2.nav

A <nav> is used to define a block of navigation links such as menus and tables of contents. It is important to note that <nav> can be used inside of the <header> element but can also be used on its own.

nav tag可以在header tag里，也可以在header tag外

<header> 
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>      
    </ul>
  </nav>
</header>

By using <nav> as a way to label our navigation links, it will be easier for not only us, but also for web browsers and screen readers to read the code.

比较：

<!DOCTYPE html>
<html>
  <body>
    <div id="header">
      <h1>Navigational Links</h1>
      <div id="nav">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </body>
</html>

改进后：

<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Navigational Links</h1>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#posts">Posts</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      <nav>
    </header>
  </body>
</html>

3.Main and Footer

比较：

<div id="main">
      <p>This is where the main content will go once the page is built out!</p>
    </div>
    
<div id="footer">
      <p>Contact me at +1 234 567 8910 </p>
    </div>

<main>
      <p>This is where the main content will go once the page is built out!</p>
    </main>
    
<footer>
      <p>Contact me at +1 234 567 8910 </p>
    </footer>

4.Article and Section

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或输出到word文档中。

比较：

<div id="section">
        <h2>Facts About Dogs</h2>
        <p>
        Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.
        </p>
      </div>

<section>
        <article>
        <h2>Facts About Dogs</h2>
        <p>
        Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.
        </p>
        </article>
      </section>

5.Aside

The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.

Some common uses of the <aside> element are for:

Bibliographies
Endnotes
Comments
Pull quotes
Editorial sidebars
Additional information

表示强调。

<article>
  <p>The first World Series was played between Pittsburgh and Boston in 1903 and was a nine-game series.</p>
</article>
<aside>
  <p>
   Babe Ruth once stated, “Heroes get remembered, but legends never die.” 
  </p>
</aside>

6.Figure and Figcaption

<figure>
        <img src="https://content.codecademy.com/courses/SemanticHTML/dogimage.jpeg">
        <figcaption>You are the best</figcaption>
</figure>

we created a <figure> element so that we can encapsulate our <img> tag. In <figure> we used the <img> tag to insert an image onto the webpage. We used the src attribute within the <img> tag so that we can link the source of the image.

<figcaption>用来说明照片的内容。

7. Audio and Attributes

<audio controls>
         <source src="https://content.codecademy.com/courses/SemanticHTML/dogBarking.mp3" type="audio/mp3">
</audio>

Attributes allow us to do many different things to our audio file. There are many attributes for <audio> but today we’re going to be focusing on controls and src.

controls: automatically displays the audio controls into the browser such as play and mute.
src: specifies the URL of the audio file.

we could add both autoplay functionality and audio controls:

<audio autoplay controls>

8.Video and Embed

The <video> element makes it clear that a developer is attempting to display a video to the user.

Some attributes that can alter a video playback include:

controls: When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option.
autoplay: The attribute which results in a video automatically playing as soon as the page is loaded.
loop: This attribute results in the video continuously playing on repeat.

Another tag that can be used to incorporate media content into a page is the <embed> tag, which can embed any media content including videos, audio files, and gifs from an external source. This means that websites that have an embed button have some form of media content that can be added to other websites.

<video src="https://content.codecademy.com/courses/SemanticHTML/dog-video.mp4" controls>
        video is unable to load
        <embed src="https://content.codecademy.com/courses/SemanticHTML/dog-on-beach.gif"/>
</video>

10.review

Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags.
Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO.
<header>, <nav> , <main> and <footer> create the basic structure of the webpage.
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
<article> holds content that makes sense on its own such as articles, blogs, comments, etc.
<aside> contains information that is related to the main content, but not required in order to understand the dominant information.
<figure> encapsulates all types of media.
<figcaption> is used to describe the media in <figure>.
<video>, <embed>, and <audio> elements are used for media files.