Question

在以下HTML语法中，meta div应该在header内吗？它只包含日期和作者姓名，应显示在标题下。也正确使用aside或使用figure代替aside吗？

<article class="article">
    <header>Heading</header>
    <div class="meta"> date and author info. </div> 
    <div class="wrap">
        <aside class="thumbnail"> <!-- left -->
            <img src="abc.jpg" />
        </aside>        
        <div class="content"> <!-- right -->
            ...
        </div>  
    </div>
</article>

Answer 1

而不是

<div class="meta"> date and author info. </div>

以下会更好

<footer> date and author info. </footer>

HTML5 spec for <footer>说：

页脚元素代表其最近祖先的页脚分割内容或分割根元素。通常是一个页脚包含有关其部分的信息，例如谁写了它，链接到相关文件，版权数据等。

以及

页脚不一定要出现在某个部分的末尾......

对于<aside>，HTML5 spec说：

aside元素表示由页面组成的部分与旁边内容相切的内容元素，可以被认为与该内容分开。

解释起来有点棘手，但我想说缩略图是文章内容的一个组成部分，而不是与之相切。

事实上，在没有相反数据的情况下，我认为根本不需要在<img>元素周围使用包装器。只需使用：

<img src="abc.jpg" class="thumbnail" alt="A B C" />

如果您需要用于样式设置的包装器，请使用<div>

Answer 2

<head></head>代码......

之间提到的元标记

<meta charset="utf-8">

正确的html5代码中的正确程序是......

<body><div class="container">
  <header>Header</header>
  <div class="sidebar1">
    <aside>
      <p>Paragraph</p>
      <p>Paragraph</p>
    </aside>
  <!-- end .sidebar1 --></div>
  <article class="content">
    <h1>Instructions</h1>
    <section>
     <p>Paragraph</p>
      <p>Paragraph</p>
      <p>Paragraph</p>
    </section>
  <!-- end .content --></article>

  <footer>Footer</footer>
  <!-- end .container --></div></body>

从这里得到帮助......

而旁边是一个新的html5标签，用于页面的左侧或右侧列...

Css旁观：

aside {
    float: left;
    width: 180px;
    padding: 10px 0;
}

Answer 3

如果我去过你的地方，我会写下面的代码如下：

<header>Heading</header>
<section class="article">

    <div class="meta"> date and author info. </div> 
    <article class="wrap">
        <div class="thumbnail"> <!-- left -->
            <img src="abc.jpg" />
        </div>        
        <aside class="content"> <!-- right -->
            ...
        </aside>  
    </article>
</section>

HTML5除了正确使用

3 个答案: