HTML中的语义结构 – 字幕(HTML5前)

前端之家收集整理的这篇文章主要介绍了HTML中的语义结构 – 字幕(HTML5前)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是 HTML的新手,希望使语义上正确的HTML,但是我发现很难使用似乎只有标题,列表和段落.

特别是,我找不到一个对字幕有意义的地方.我正在写一个博客网站,让我们以此为例:

一个博客标题
世界上最好的博客

post_title1
post_title2
post_title3

语义上的“博客标题”是h1.对我来说post_titleX是h2是有意义的,但它不适合用于副标题 – “世界上最好的博客”被分类在与他们相同的级别.

解决方法

该规范自 the working draft以来发生了变化,这是五年前首次发布的最新版本.正如@Andre Figueiredo在评论中指出的那样,the published HTML5 specification对这个具体的用例非常清楚(强调加入):

h1h6 elements must not be used to markup subheadings,subtitles,alternative titles and taglines unless intended to be the heading for a new section or subsection.

简而言之,在标题元素中使用适当分类的p元素:

<header>
    <h1>A BLOG TITLE</h1>
    <p class="tagline">the best blog in the world</p>
</header>

在HTML5中,有一个明显的解决方案:

<header>
    <h1>A BLOG TITLE</h1>
    <h2>the best blog in the world</h2>
</header>

当使用HTML4时,我个人倾向于用p class =“tagline”替换h2,或者类似的东西.

编辑:为了激发在HTML5中使用h2,想想Strangelove博士的头衔:

<h1>Dr. Strangelove</h1>
<?>Or: How I Learned to Stop Worrying and Love the Bomb</?>

这里有一个p元素吗?不是 – 这不是一个段落,它是一个标题. h2是否按原样工作?不,我们可能会混淆文本本身的字幕.那么我们该怎么办?我们使用h2并使用头元素将其与h1进行分组,从而摆脱了文本中字幕的歧义.

猜你在找的HTML相关文章