はしがき
自分が適当にウェブページを実装するとき、「適当に <div> タグで分けても問題ないじゃん」と、考えながら、プログラミングすることもありました。
「適当」とや「便利」という理由もありましたが、「なぜ」という意味もありました。
「なぜ」というのは、わざわざ <header> とか <nav> とか使う理由です。
セマンティック(Semantics)
プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。
ということ、javascript や css にも説明できるように書いていますが、今回は HTML だけを紹介する予定です。
セマンティックタグ(Semantic Tag)とは？
一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。
「意味」や「意味論」の意味を持っている言葉です。「論」がわかりにくかったので、こちらも探しました。
- 物事の筋道を述べること。また、その述べたもの。意見。「—の立て方がおかしい」「—が分かれる」「人生—」
- 意見をたたかわすこと。議論。論議。「—の外(ほか)だ」「水掛け—」
- インドの仏教学者が著した教義の綱要書。論書。また、教義の注釈などをした文献。論蔵。
- 漢文の文体の一。自分の意見を述べる文。
なるほど！セマンティックは「意味」や「意味のことを述べたこと・もの」になると考えられます。
そうなると、セマンティックタグは「この tag の意味」や「このタグの意味を表示」ということで考えました！
<div> のように中身を予想・類推が難しいですが、<header> や <nav> のようなセマンティックタグは「このタグの意味」を分かりやすくなります！
いつ行われる？
インターネット、パソコンの発展に従って、膨大なウェブサイトが生まれました。
この多すぎるウェブサイト中で、もっと# はしがき
自分が適当にウェブページを実装するとき、「適当に <div> タグで分けても問題ないじゃん」と、考えながら、プログラミングすることもありました。
「適当」とや「便利」という理由もありましたが、「なぜ」という意味もありました。
「なぜ」というのは、わざわざ <header> とか <nav> とか使う理由です。
セマンティック(Semantics)
プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。
ということ、javascript や css にも説明できるように書いていますが、今回は HTML だけを紹介する予定です。
セマンティックタグ(Semantic Tag)とは？
一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。
「意味」や「意味論」の意味を持っている言葉です。「論」がわかりにくかったので、こちらも探しました。
- 物事の筋道を述べること。また、その述べたもの。意見。「—の立て方がおかしい」「—が分かれる」「人生—」
- 意見をたたかわすこと。議論。論議。「—の外(ほか)だ」「水掛け—」
- インドの仏教学者が著した教義の綱要書。論書。また、教義の注釈などをした文献。論蔵。
- 漢文の文体の一。自分の意見を述べる文。
なるほど！セマンティックは「意味」や「意味のことを述べたこと・もの」になると考えられます。
そうなると、セマンティックタグは「この tag の意味」や「このタグの意味を表示」ということで考えました！
<div> のように中身を予想・類推が難しいですが、<header> や <nav> のようなセマンティックタグは「このタグの意味」を分かりやすくなります！
技術的な方法
コンテンツをセマンティック HTML を使用してタグ付けすることです。ウェブサイトを探索するとき、クローラーはインデックスに登録させたいコンテンツのみを探してくれるでしょう。
また、タグに意味を与えて、検索エンジンがこのサイトの仕組みを把握しやすくなります。
いつ行われる？
インターネット、パソコンの発展に従って、膨大なウェブサイトが生まれました。
この多すぎるウェブサイト中で、もっと目立つために(検索エンジンからインデックスに登録される)セマンティックタグを使います。
セマンティックタグの種類は？
セマンティックタグを述べること前に、このタグを使うための基本的な規則があります。
まず、コンテンツの機能に従って、適合なタグを使うべきです。
例えば、<header>にはロゴ、検索フォームなど、<footer>には著者に関する情報、関連文書へのリンク、著作権情報など適当なところに使うことです。
また、「およそ 100 ある利用可能なセマンティック要素」なので、全部説明は難しいので、よく使える部分を説明します。
<article>
ウェブページ、アプリケーションやサイト中で自己完結して、個別に配信や再利用できる構成物を表します。
おもに、記事、ブログ掲載、ユーザーのコメントなどがあります。
<aside>
ウェブページの内容と間接的な関係を持っている部分です。
おもに、サイドバーやコールアウトボックスなどがあります。
<footer>
直近の区分コンテンツまたは区分化ルート要素のフッターを表します。
おもに、著者にかんする情報、関連ページへのリンク、著作権情報などがあります。
<form>
ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。
javascript と連携して、fetch で backend api を取得するとき、よく使われます。
<header>
소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。
おもに、タイトル、ロゴ、検索フォーム、著者名などが含まれます。
<main>
ウェブページの <body> の主要なコンテンツを表します。
主要なコンテンツというのは、ウェブページのトピック、またアプリケーションの中心機能とつながっているコンテンツで構成されます。
<nav>
現在のウェブページの中、または、ほかのページへのリンクを表す領域を表します。
おもに、メニュー、項目、インデクスがあります。
<section>
自立したセクションを表します。
そのセクションを表現するより意味的に具体的な要素がない場合に使用します。
このような説明は MDN web docs にも述べられているので、確認できます。
まとめ
簡単に使うときは、適当に div とか使いましたが、仕事もしながら、SEO を考えべく事態になったので、知っている知識をメモしました。
参考したウェブページ