セマンティックHTML5要素の説明

セマンティックHTML要素は、人間と機械が読み取り可能な方法でその意味を明確に説明する要素です。

以下のような要素そして、彼らは正確要素の目的とその内側にあるコンテンツの種類を記述するため、すべてのセマンティックと考えられています。

セマンティック要素とは何ですか?

HTMLは元々、初期のインターネット上のドキュメントを記述するためのマークアップ言語として作成されました。インターネットが成長し、より多くの人々に採用されるにつれて、そのニーズは変化しました。

インターネットはもともと科学文書を共有することを目的としていましたが、今では人々は他のものも共有したいと思っていました。すぐに、人々はWebの見栄えを良くしたいと考え始めました。

Webは当初、設計用に構築されていなかったため、プログラマーはさまざまなハックを使用して、さまざまな方法で物事をレイアウトしました。を使用するのではなく

テーブルを使用して情報を記述するために、プログラマーはそれらを使用してページ上の他の要素を配置します。

視覚的に設計されたレイアウトの使用が進むにつれて、プログラマーはのような一般的な「非セマンティック」タグを使用し始めました。彼らはしばしばこれらの要素にそれらの目的を説明するためのclassまたはid属性を与えます。たとえば、これの代わりに、しばしばと書かれていました

HTML5はまだ比較的新しいため、この非セマンティック要素の使用は、今日のWebサイトでは依然として非常に一般的です。

新しいセマンティック要素のリスト

HTML5で追加されたセマンティック要素は次のとおりです。

などの要素、及び多かれ少なかれのように振る舞うの要素。他の要素をページセクションにグループ化します。ただし、タグに任意のタイプの情報を含めることができる場合、セマンティック領域にどのような種類の情報が含まれるかを簡単に識別できます。

w3schoolsによるセマンティック要素のレイアウトの例

w3schoolsによるページのレイアウトのセマンティック要素

なぜセマンティック要素を使用するのですか?

セマンティック要素の利点を確認するために、ここに2つのHTMLコードがあります。この最初のコードブロックは、セマンティック要素を使用します。

この2番目のコードブロックは非セマンティック要素を使用しますが、

まず、読みやすくなっています。これはおそらく、セマンティック要素を使用してコードの最初のブロックを見るときに最初に気付くでしょう。これは小さな例ですが、プログラマーとして、数百行または数千行のコードを読むことができます。そのコードを読んで理解しやすいほど、仕事が簡単になります。

アクセシビリティ向上しています。セマンティック要素を理解しやすいと思うのはあなただけではありません。検索エンジンと支援技術(視覚障害のあるユーザー向けのスクリーンリーダーなど)も、Webサイトのコンテキストとコンテンツをよりよく理解できるため、ユーザーのエクスペリエンスが向上します。

全体として、セマンティック要素は、より一貫性のあるコードにもつながります。非セマンティックな要素を使用してヘッダを作成する場合、異なるプログラマはこれを書くかもしれない、または単純。ヘッダー要素を作成する方法はたくさんありますが、それらはすべてプログラマーの個人的な好みに依存します。標準のセマンティック要素を作成することで、誰にとっても簡単になります。

2014年10月以降、HTML4はいくつかの新しい「セマンティック」要素とともにHTML5にアップグレードされました。今日まで、大きな変化を示さないように見える非常に多くの異なる要素がなぜあるのかについて、私たちの何人かはまだ混乱しているかもしれません。

そして

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is . While this is still used in HTML5, HTML5 provided us with and in a way to replace .

The and elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

  1. An article is intended to be independently distributable or reusable.
  2. A section is a thematic grouping of content.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

and

The element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

Company A

  • Home
  • About
  • Contact us

The element should be used where you want a main heading with one or more subheadings.

Heading 1

Subheading 1

Subheading 2

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is

Original text


to

and including .

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Before HTML5, our menus were created with

    ’s and
  • ’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

    • Home
    • About
    • Contact us

    If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

    ©Company A

    The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

    ©Company A Date

    The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

    Tuesday, 31 October 2017

    Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

    and

    is for wrapping your image content around it, and is to caption your image.

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Learn more about the new HTML5 elements:

    • w3schoolsは、多くのニュース要素とそれらを使用する方法/場所についての簡単で明確な説明を提供します。
    • MDNは、すべてのHTML要素の優れたリファレンスも提供し、それぞれについて詳しく説明します。