html5,html5语义化标签
您的位置: 主页 > web前端文章 > html5 >

html5语义化标签【访问量:192】

让我们再看看这些图表  html4 vs html5

html5_sectioning_high_level.jpg

.....然后是特定的结构:

html5_sectioning_specific_post.jpg

什么是语义标签?“语义HTML”是指所有的HTML标记都应该表达你的内容的基本含义 - 而不是其外观。我们已经编写了语义HTML(例如,使用<strong> 而不是<b>),但是有一整套元素旨在为网页的整体布局增加更多的意义。他们被称为“切片元素”,但可以帮助浏览器,辅助设备和搜索引擎确定页面的结构轮廓实际上是什么样子,他们看起来像这样:

html-sectioning-elements-00c3fd.png

使用这些<div>替代元素是现代Web开发的一个重要方面,因为它使搜索引擎,屏幕阅读器和其他机器更容易识别您网站的不同部分。它还可以帮助您作为开发人员保持您的网站的组织,这反过来又使维护更加容易。

semantic-html-ffab7c.png

<article>元素代表在网页中一个独立的文章。它应该只包含可以从页面中弹出并分布在完全不同的上下文中的内容。例如,这样的应用程序应该能够<article>从您的网站获取元素,并将其显示在自己的应用程序中,并使其对读者非常有用。

html-article-element-82490e.png

在我们的例子中,我们可以使用<article>将页面的主要内容标记为独立单元,如下所示:

<article>
    <h1>Semantic HTML</h1>
    <p>By Troy McClure. Published January 3rd</p>
    <p>This is an example web page explaining HTML5 semantic markup.</p>
    <!-- ... -->
    <p>This fake article was written by somebody at InternetingIsHard.com, which
        is a pretty decent place to learn how to become a web developer.</p>
</article>

请注意,我们是如何将版权声明留在元素之外的, <article>因为它是整个网站的页脚 - 并非专门针对我们的文章。正如我们很快就会发现的那样, <article>它们实际上就是HTML文档中的迷你网页。他们有自己的页眉,页脚和文档大纲,与您网站的其他部分完全隔离。

使用多个文章元素 对于专注于单个主题的博客文章,报纸文章或网页等内容,页面上通常只有一个<article>元素。但是,<article>每页有多个元素是完全合法的 。一个很好的例子是显示一堆博客文章的页面。它们中的每一个都可以封装在一个单独的<article>标签集中(您不需要将其添加到我们的 article.html页面中):

<article>
    <h1>First Post</h1>
    <p>Some content</p>
</article>
<article>
    <h1>Second Post</h1>
    <p>Some more content</p>
    <h2>Subsection</h2>
    <p>Some details</p>
</article>
<article>
    <h1>Last Post</h1>
    <p>Final bit of content</p>
</article>

<section>元素有点像一个 <article>,除了它不需要在文档的上下文之外有意义。也就是说,像Flipboard这样的应用程序不会试图抽出所有<section>页面并将其作为独立内容呈现出来。

html-section-element-92a4d1.png

将其<section>看作是定义文档大纲中各节的明确方式。我们为什么要这样做,而不是让标题水平为我们做?很多时候,你需要一个容器来包装一个部分来进行布局,并且<section>在泛型上使用更多的描述性元素 是有意义的 <div>。

<section>     <!-- Add this -->
    <h2>The Document Outline</h2>
    <p>HTML5 includes several “sectioning content” elements that
        affect the document outline.</p>

    <h3>Headers</h3>
    <p>The <code>&lt;header&gt;</code> element is one such sectioning
        element.</p>

    <h3>Footers</h3>
    <p>And so is the <code>&lt;footer&gt;</code> element.</p>
</section>    <!-- And this -->

<section>     <!-- This too! -->
    <h2>Inline Semantic HTML</h2>
    <p>The <code>&lt;time&gt;</code> element is semantic, but it’s not
        sectioning content.</p>
</section>    <!-- Don't forget this -->

<nav>元素可让您标记您网站的各种导航部分。这适用于主站点导航,链接到侧栏中的相关页面,内容表以及几乎任何链接组。例如,我们应该将我们的网站导航菜单粘贴到一个<nav>元素中:

<h1>Interneting Is Easy!</h1>
<nav>                                    <!-- Add this -->
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>About</a></li>
        <li><a href='#'>Blog</a></li>
        <li><a href='#'>Sign Up</a></li>
    </ul>
</nav>

这是搜索引擎的一个很棒的语义信息。它可以帮助他们快速识别整个网站的结构,使其更容易发现其他网页。正如我们在Asides中看到的,<nav>如果您有不同的相关链接集,可以在单个页面上包含多个元素。

html-nav-element-d1e716.png

<header>元件是语义标记的新的片,不与头相混淆英格斯(在 <h1>- <h6>元素)。它表示部分,文章或整个网页的介绍性内容。“介绍性内容”可以是贵公司徽标,导航助手或作者信息中的任何内容。

html-header-element-7b4e01.png

<header>
    <h1>Interneting Is Easy!</h1>
    <nav>
        <ul>
            <li><a href='#'>Home</a></li>
            <li><a href='#'>About</a></li>
            <li><a href='#'>Blog</a></li>
            <li><a href='#'>Sign Up</a></li>
        </ul>
    </nav>
</header>

标头仅与最近的切片元件典型地是相关联的<body>, <section>或<article>元件。这意味着您可以使用多个<header>元素将简介内容添加到文档的不同部分。例如,我们的标题,作者和出版日期<article>是另一个人的很好的候选人<header>:

<article>
    <header>
        <h1>Semantic HTML</h1>
        <p>By Troy McClure. Published January 3rd</p>
    </header>

    <p>This is an example web page explaining HTML5 semantic markup.</p>
    <!-- ... -->
</article>

没有这些<header>,搜索引擎和屏幕阅读器就不会知道第一次 <p>与文章的主要内容是分开的。就像<section>它一样 ,它也可以作为一个方便的CSS钩子,因为博客文章的标题和作者信息通常与文章的其余部分不同。再次,可以把它<header>看作是一个<div>容器的更多语义替代。

页脚基本上与页眉相同,只是它们通常在文章/网站的末尾与开头相对。常见的使用案例包括版权声明,页脚导航和博客帖子末尾的作者bios等内容。

html-footer-element-0c927a.png

页脚的行为与<header>它们与最近的分段元素相关。因此,我们可以将其用于我们网页的版权声明和作者信息 <article>。将以下两个页脚元素添加到我们的 article.html页面:

<article>
    <header>
        <h1>Semantic HTML</h1>
        <p>By Troy McClure. Published January 3rd</p>
    </header>

    <p>This is an example web page explaining HTML5 semantic markup.</p>
    <!-- ... -->

    <footer>         <!-- Add this -->
        <p>This fake article was written by somebody at InternetingIsHard.com,
            which is a pretty decent place to learn how to become a web developer. This
            footer is only for the containing <code>&lt;article&gt;</code> element.</p>
    </footer>        <!-- And this -->

</article>

<footer>           <!-- This, too -->
    <p>&copy; 2017 InternetingIsHard.com</p>
</footer>          <!-- Don't forget to close it! -->

页眉和页脚是向文章添加额外信息的方式,但有时我们希望从文章中删除信息。例如,赞助博客帖子可能包含关于赞助公司的广告; 但是,我们可能不希望将其作为文章文本的一部分。

html-aside-element-ce120b.png

让我们在我们的article.html文件中添加一个假广告,就在文章的标题下方:

<article>
    <header>
        <h1>Semantic HTML</h1>
        <p>By Troy McClure. Published January 3rd</p>
    </header>
    <!-- Look! A fake advertisement! -->
    <aside class='advert'>
        <img src='some-advert-image.png'/>
    </aside>

    <p>This is an example web page explaining HTML5 semantic markup.</p>
</article>

即使图像位于<article>元素内部,机器阅读器也知道它只与文章内容相切。除了广告之外,<aside>还适用于突出定义,统计或报价。如果它看起来不同于文章的其余部分,那么很可能就是放在一边。 当使用外部的<article>,一个<aside>与页作为一个整体(很像相关联的 <header>和<footer>)。这使它成为标记站点范围边栏的不错选择。</article>在第二个之前,在结束标记 下方添加以下内容<footer>:

<aside class='sidebar'>
    <h2>Sidebar</h2>
    <p>Some sidebar content</p>
    <nav>
        <h3>HTML &amp; CSS Tutorial</h3>
        <ul>
            <li><a href='#'>Introduction</a></li>
            <li><a href='#'>Basic Web Pages</a></li>
            <li><a href='#'>etc...</a></li>
        </ul>
    </nav>
    <nav>
        <h3>JavaScript Tutorial</h3>
        <ul>
            <li><a href='#'>Introduction</a></li>
            <li><a href='#'>Hello, JavaScript</a></li>
            <li><a href='#'>etc...</a></li>
        </ul>
    </nav>
</aside>

注意这class两个片段中的属性。如果我们担心CSS这一章,我们可以 <aside>用完全相同的方式来设计我们的 元素,就像  <div>我们在本教程中所做的一切。这给我们带来了......

对于人类来说,日期和时间有很多种形式。根据当前日期,您可以参考2017年1月3日的“1/3/2017”,“1月3日”,甚至“昨天”。解析这种模棱两可的自然语言对于机器来说很困难且容易出错,这就是<time>出现这种情况的原因。 该<time>元素表示一天中的某个时间或日历日期。通过提供机器可读的日期,浏览器可以自动将其链接到用户的日历,并帮助搜索引擎明确标识具体日期。一个简单的Google搜索会显示您在<time>页面中包含元素的效果:

time-element-in-google-search-results-5bba38.png

<article>
    <header>
        <h1>Semantic HTML</h1>
        <p>By Troy McClure. Published <time datetime='2017-1-3'>January
            3rd</time></p>
    </header>
    <!-- ... -->
</article>

机器可读日期在datetime属性中定义。记住日期格式的简单方法是从最大的时间段到最小的时间段:年,月,日。请注意,即使年份未包含在人类可读文本中,这也会告诉搜索引擎我们的文章已于2017年发布。

datetime-format-d0c825.png

<address>元素就像<time> 它不处理文档的整体结构,而是用一些元数据修饰父元素<article>或 <body>元素。它为相关文章或网页的作者定义联系信息。 <address>应该不会被用于任意的物理地址。

<footer>
    <p>This fake article was written by somebody at InternetingIsHard.com, which
        is a pretty decent place to learn how to become a web developer. This footer
        is only for the containing <code>&lt;article&gt;</code> element.</p>
    <address>
        Please contact <a href='mailto:troymcclure@example.com'>Troy
        McClure</a> for questions about this article.
    </address>
</footer>

最后但并非最不重要的是 <figure>和  <figcaption>要素。前者代表一个自包含的“图”,如图,插图甚至是代码片段。后者是可选的,它将一个标题与其父 <figure>元素相关联。 这两者的常见用例是为 <img/>文章中的元素添加可见的描述 ,如下所示:

<section>
    <h2>The Document Outline</h2>
    <p>HTML5 includes several “sectioning content” elements that
        affect the document outline.</p>

    <figure>
        <img src='semantic-elements.png'
             alt='Diagram showing <article>, <section>, and <nav> elements'/>
        <figcaption>New HTML5 semantic elements</figcaption>
    </figure>
    <!-- ... -->
</section>

该alt 属性与<figcaption>元素密切相关 。alt应该用作图片的文本替换,而是与图片或其基于文本的对等物一起显示<figcaption>的支持说明。 <figcaption>以上述方式使用时,您可以放心地忽略图片的alt属性而不会伤害您的搜索引擎优化。根据您使用的图像类型,可能会更方便(更少冗余),使可见<figcaption>的描述它们而不是无形的 alt属性。

最后,关于旧版浏览器的简要说明。本章中的语义HTML元素是在HTML5中引入的。所有现代浏览器都可以在不做任何额外工作的情况下识别它们,但在全球CSS样式表中经常会看到如下内容:

section, article, aside, footer, header, nav {
display: block;
}

这使得新的语义元素在传统浏览器中表现得像<div> 元素(这是块框,而不是内联框)。

2018-04-04
上一篇:没有了
匿名评论

最新推荐