HTML5 テキストの論理構造(1)
【HTML5課題01】
ドキュメントタイプ宣言を記述し、エンコードタイプを「UTF-8」で記述しなさい。
<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <head> <title></title> </head> <body> </body> </html>
【HTML5課題02】
- 「em 要素」は、一般的な "イタリック" 要素ではありません
- ムードや音声を表すようなテキストを、その段落の他の部分から際立たせようとすることがありますが、その場合は、i 要素のほうが適切です
<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <head> <title></title> </head> <body> <article> <section> <h1>重要なフレーズを強調</h1> <p>好きなカフェの条件は、<em>ソファーがあって</em>、コーヒーが美味しいことです。</p> </section> </article> </body> </html>
em 要素は、そのコンテンツの強調を表します。
コンテンツの特定の部分が持つ強調のレベルは、祖先の em 要素の数で表されます。
強調を配置すると、文の意味が変わります。ゆえに、この要素は、コンテンツで不可欠な部分を形成します。このように強調を使う場合、その正確な使い方は、言語に依存します。
em 要素は、重要性を伝えようとすることもできません。この場合は、strong 要素のほうが適切です。引用:em 要素 - テキストレベルの意味づけ - HTML要素 - HTML5 タグリファレンス - HTML5.JP
【HTML5課題03】
「注意事項」の部分を、相対的に重要性な高いレベルとして記述しなさい。
<!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <head> <title></title> </head> <body> <article> <section> <h1>注意、Attentionを表示</h1> <p><strong>注意事項</strong><br> 誤って飲み込む恐れがありますので、<strong><em>お子様の手の届かないところで</em>保管してください。</strong></p> </section> </article> </body> </html>
【HTML5課題04】
「ロールケーキ」の部分を、他との違いを表して記述しなさい。
<body> <h1>重要性ではなく違いを表示</h1> <p>最近コンビにで売っているケーキ類が美味しい。特に<b>ロールケーキ</b>が美味しい。</p> </body>