セマンティックHTMLの概念を探る
このステップでは、セマンティックHTMLについて学び、なぜウェブ開発において重要かを理解します。セマンティックHTMLは、コンテンツの意味を明確に表すタグを使用し、ウェブページをよりアクセシブルで、読みやすく、SEOにやさしくします。
<div>
や<span>
のような伝統的なHTMLタグは、それが含むコンテンツに関する情報を一切提供しません。対照的に、セマンティックHTMLタグはコンテンツの目的と構造を表します。
セマンティックHTMLの概念を示すために、簡単なHTMLファイルを作成しましょう。WebIDEを開き、~/project
ディレクトリにsemantic-example.html
という新しいファイルを作成します。
touch ~/project/semantic-example.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Semantic HTML Example</title>
</head>
<body>
<div>Website Header</div>
<div>Navigation Menu</div>
<div>Main Content</div>
<div>Sidebar</div>
<div>Footer</div>
</body>
</html>
次に、この例をセマンティックHTMLタグを使って変換しましょう:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Semantic HTML Example</title>
</head>
<body>
<header>Website Header</header>
<nav>Navigation Menu</nav>
<main>Main Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>
</body>
</html>
主要なセマンティックHTMLタグには以下があります:
<header>
:序文コンテンツを表す
<nav>
:ナビゲーションリンクを定義する
<main>
:文書の主要コンテンツを指定する
<article>
:独立した、完全なコンテンツの1つを表す
<section>
:文書内のセクションを定義する
<aside>
:主要コンテンツとは間接的に関連するコンテンツを含む
<footer>
:文書のフッターを表す
セマンティックHTMLの利点:
- スクリーンリーダーに対するアクセシビリティの向上
- より良いSEO最適化
- より意味のある読みやすいコード
- スタイリングと保守が容易
HTMLファイルをブラウザでプレビューすると、視覚的な変更はありませんが、根底にある構造はより記述的で意味のあるものになります。
注:WebIDEでHTMLファイルをプレビューする方法に関する詳細はこちらをご覧ください。