この翻訳は不完全です。英語から この記事を翻訳 してください。

プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか?」、「その HTML 要素には、どのような目的や役割があるのか?」 (「どのように見えるのか?」ではなく)。

JavaScript でのセマンティクス

JavaScript において、文字列の引数を取り、その文字列を textContent とする <li> 要素を返す関数を想像してみてください。 build('Peach') または createLiWithContent('Peach') という関数名の場合、何をするのかを理解するためにコードを見る必要があるのはどちらでしょうか?

CSS でのセマンティクス

CSS において、さまざまな種類の果物を表すために li 要素でリストをスタイル付けすることを想像してみてください。 div > ul > li または .fruits__item で選択された DOM の一部が何であるか分かるのはどちらでしょうか?

HTML でのセマンティクス

たとえば、 <h1> 要素はセマンティック要素で、「ページの最上位の見出し」の役割 (または意味) をまとったテキストを提供します。

<h1>これは最上位の見出しです</h1>

既定では、見出しのように見えるように大きなフォントサイズが与えられます (あなたが望むものに見えるようにスタイルを設定することもできます) が、もっと重要なのはセマンティックな意義が複数の方法で使用されることです。たとえば、検索エンジンは、その内容をページの検索ランキング (SEO 参照) に影響する重要なキーワードと見なし、読み上げソフトは、視覚障碍のあるユーザーがページを移動するのを助けるための道標として使用できます。

一方、どの要素も最上位の見出しのように見せることができます。次ののことを想像してみてください。

<span style="font-size: 32px; margin: 21px 0;">これは最上位の見出しですか?</span>

これは最上位の見出しのように表示されますが、セマンティックな意義はありませんので、上記のように特別なメリットはありません。したがって、 HTML 要素を適材適所に使用することをお勧めします。

HTML は既定の表示スタイルに基づくのではなく、入力されるデータを表現するためにコーディングされるべきです。プレゼンテーション (どのように見えるか) は、完全に CSS の責任です。

Some of the benefits from writing semantic markup are as follows:

  • Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
  • Screen readers can use it as a signpost to help visually impaired users navigate a page
  • Finding blocks of meaningful code is significantly easier than searching though endless divs with or without semantic or namespaced classes
  • Suggests to the developer the type of data that will be populated
  • Semantic naming mirrors proper custom element/component naming

When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?" For example, is it a list of data?; ordered, unordered?; is it an article with sections and an aside of related information?; does it list out definitions?; is it a figure or image that needs a caption?; should it have a header and a footer in addition to the global site-wide header and footer?; etc.

セマンティック要素

これらは、およそ100ある利用可能なセマンティック要素一部です。

より詳しく知る

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Wind1808
最終更新者: mfuji09,