0

次の HTML 構文では、metadiv は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>
4

3 に答える 3

3

それ以外の

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

以下の方が良いでしょう

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

のHTML5 仕様に<footer>は次のように書かれています。

フッター要素は、最も近い祖先のセクション化コンテンツまたはセクション化ルート要素のフッターを表します。通常、フッターには、誰がそれを書いたか、関連文書へのリンク、著作権データなど、そのセクションに関する情報が含まれています。

そしてまた

フッターは必ずしもセクションの最後に表示する必要はありません...

の場合<aside>、HTML5 仕様には次のように記載されています。

aside 要素は、aside 要素の周囲のコンテンツに接線方向に関連し、そのコンテンツとは別のものと見なすことができるコンテンツで構成されるページのセクションを表します。

これはやや解釈が難しいですが、サムネイルは記事のコンテンツと接線的に関連しているというよりも、記事のコンテンツの不可欠な部分を形成していると言えます。

実際、逆にデータがない場合、<img>要素の周りにラッパーが必要だとはまったく思いません。使用するだけです：

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

スタイリング目的でラッパーが必要な場合は、<div>

于 2012-07-14T11:53:55.900 に答える
0

コードの間に記載されているメタタグ<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;
}
于 2012-07-14T10:01:59.207 に答える
0

私があなたの場所にいたとしたら、上記のコードを次のように書いていたでしょう。

<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>
于 2012-07-14T10:03:31.887 に答える