0

これをHTML5ifyする最良の方法は何ですか?

follow: Go or come after (a person or thing proceeding ahead); move or travel behind.

"She went back into the house, and Ben followed her."

これ?

<article>
<dfn>follow</dfn>: Go or come after (a person or thing proceeding ahead); move or travel behind.
<q>"She went back into the house, and Ben followed her."</q>
</article>
4

2 に答える 2

1

あなたの定義が百科事典の記事(例、ウィキ)のようにもっと広範でない限り、私はそれを<article>タグ以来の記事とは呼びません:

Represents a section of a page that consists of a composition that forms an     
independent part of a document, page, or site. This could be a forum post, 
a magazine or newspaper article, a Web log entry, a user-submitted comment, 
or any other independent item of content.

本やホワイトペーパーの付録にあるかもしれない一連の短い定義については、データ定義リストを使用することをお勧めします:<dl><dt><dd>用語と定義をそれぞれマークアップします。

参照: http: //html5doctor.com

HTML5タグの最適な使用方法については多くの議論があり、興味深い読み物になります。

これをどのようにスタイリングするか

用語集の簡単な定義リストを作成している場合は、次のように始めることができます。

<dl>
   <dt><dfn>follow</dfn>:</dt>
    <dd>
        <p>Go or come after (a person or thing proceeding ahead); move or travel
            behind.</p>
        <q>She went back into the house, and Ben followed her.</q>
    </dd>
</dl>

次のようにスタイリングを適用します。

dl {
    border: 1px solid #989898;
    border-radius: 10px;
    padding: 1.00em;
}
dt {
    margin-left: 1.00em;
}
dfn {
    font-weight: bold;
    font-size: 1.25em;
}
dd {
    margin-left: 2.00em;
    margin-bottom: 3.00em;
}
dd p {
    margin: 0 0 0.50em 0;
}
dd q {
    display: block;
    margin: 0 0 0.50em 0;
    font-style: italic;
}

これは、レイアウト内のさまざまな要素に対してどれだけの柔軟性と制御ができるかを示したものにすぎません。

フィドルリファレンス: http: //jsfiddle.net/audetwebdesign/H6593/

于 2013-03-26T11:02:34.557 に答える
0

HTML5要素は必要ありません。古き良き、、のdl場合dtですdd

例えば

<dl>
    <dt>Thing one</dt>
    <dd>
        <p>This defines thing one.</p>
    </dd>

    <dt>Thing two</dt>
    <dd>
        <p>This defines thing two.</p>
    </dd>
</dl>

dlは定義リスト、dtは定義用語、ddは定義の説明です。

于 2013-03-26T11:00:03.610 に答える