記事タグを使った意味的な HTML のマスター

はじめに

セマンティックHTMLは、ウェブ開発において重要な概念であり、検索エンジンや補助技術がウェブサイト上のコンテンツをより良く理解するのを助けます。セマンティックHTMLを作成するために使用できる要素の1つが、<article>タグです。この実験では、<article>タグの使い方と、アクセシブルなウェブページの作成にどのように役立つかを学びます。

注: index.html でコーディングを練習し、Visual Studio CodeでHTMLを書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート8080でウェブサービスを実行します。その後、Web 8080 タブを更新してウェブページをプレビューできます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70702{{"HTML の記事セクション"}} html/head_elems -.-> lab-70702{{"HTML の記事セクション"}} html/text_head -.-> lab-70702{{"HTML の記事セクション"}} html/lists_desc -.-> lab-70702{{"HTML の記事セクション"}} html/doc_flow -.-> lab-70702{{"HTML の記事セクション"}} html/inter_elems -.-> lab-70702{{"HTML の記事セクション"}} end

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>

`<article>` タグを追加する

<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コードを検証して、エラーがなく、すべての必要な基準を満たしていることを確認することを忘れないでください。

HTML の記事セクション

はじめに

Skills Graph

HTML5構造を追加する

<article> タグを追加する

記事コンテンツを追加する

タグを追加する

まとめ

`<article>` タグを追加する