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>