はじめに
セマンティック HTML は、ウェブ開発において重要な概念であり、検索エンジンや補助技術がウェブサイト上のコンテンツをより良く理解するのを助けます。セマンティック HTML を作成するために使用できる要素の 1 つが、<article>タグです。この実験では、<article>タグの使い方と、アクセシブルなウェブページの作成にどのように役立つかを学びます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。
HTML5 の構造を追加する
好きなテキストエディタで index.html ファイルを作成し、保存します。
index.html ファイルに基本的な HTML5 構造を追加します。これには、<!DOCTYPE html> 宣言、<html> 要素、<head> 要素、および <body> 要素が含まれます。
<!doctype html>
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>
タグを追加する
<body> 要素の中に、<article> タグを追加します。このタグは、ウェブページの主要なコンテンツを含みます。<article> タグには開始タグと終了タグがあります。
<article>
<!-- Add main content here -->
</article>
記事のコンテンツを追加する
<article> タグの中に、ウェブページの主要なコンテンツを表すコンテンツを追加します。これは、記事、ブログ記事、または製品説明など、何でもかまいません。
<article>
<h1>My Awesome Article</h1>
<p>
これは私のウェブページの主要なコンテンツです。これは本当に素晴らしい記事で、誰もが読むべきです。
</p>
<p>理由は以下の通りです：</p>
<ul>
<li>文章が上手に書かれています</li>
<li>情報が豊富です</li>
<li>面白いです</li>
</ul>
</article>
フッタータグを追加する
<article> タグの中に、コンテンツに関する追加情報を提供するために <footer> タグを追加します。
<article>
<h1>My Awesome Article</h1>
<p>
これは私のウェブページの主要なコンテンツです。これは本当に素晴らしい記事で、誰もが読むべきです。
</p>
<p>理由は以下の通りです：</p>
<ul>
<li>文章が上手に書かれています</li>
<li>情報が豊富です</li>
<li>面白いです</li>
</ul>
<footer>
<p>2022 年 9 月 15 日に <a href="#">John Doe</a> によって公開</p>
</footer>
</article>
index.html ファイルを保存し、ウェブブラウザで開いて、連絡先情報付きの最終的なウェブページを表示します。
まとめ
<article> タグを使用することは、意味的な HTML を作成し、ウェブサイトをよりアクセスしやすくする簡単な方法です。<article> タグを使用することで、ウェブページの主要なコンテンツに関する追加情報を提供でき、これが検索エンジンや補助技術にとってウェブサイトをより良く理解するのに役立ちます。常に HTML コードを検証して、エラーがなく、すべての必要な基準を満たしていることを確認することを忘れないでください。
