メインコンテンツまでスキップ

html tag 備忘録

seo を強くする​

HTML5の要素タグを使うとSEOが劇的に強くなる

  • 要素タグとは
<header>
  <footer>
    <main>
      <article>
        <section>
          <aside></aside>
        </section>
      </article>
    </main>
  </footer>
</header>

などのレイアウトを構成するタグのこと HTML5要素タグを使うと内部SEOが強くなる理由は、Googleなどの検索エンジンがサイトの構造を理解しやすくなるため

  • main ページ内のメインのコンテンツとなるセクションへ使用 1ページ内に1つのみ使用 article, aside, footer, header, nav要素の中には入れてはいけない

  • article そのページから切り取っても単独で成り立つセクション ページ内のメインのコンテンツとなるセクションへ使用 トップページの新着情報の箇所に使う

  • section その名の通りページ内の文章などの区切りのセクションを囲むタグ レイアウト目的では使用しない。 レイアウト目的なら html<div> を使用。

form 関連​

<input> タグに関してはださいため css display: none;にしてbefore afterで追記するのが定石

aria属性​

ariaについて詳しい

  • ariaの知るための知識
  1. ロールについて知る
  2. HTMLの暗黙のロールを知る（WAI-ARIAについて知らないとといけない）
  3. ロールを知った上でロールに対して使用できるプロパティ/ステートを使う
  4. markuplintを使う
  • ロールがあり、そしてプロパティとステートがある

aria属性は「プロパティ」もしくは「ステート」と呼ばれるものを設定する属性だ。たとえばaria-labelはプロパティで、aria-selectedはステートだ。雑に分けると、静的な情報がプロパティで、動的な情報がステートになる。 そしてここからが重要で、そのプロパティとステートは、ロールに対してのプロパティとステートということだ。

aria属性は要素によって設定できる・できないが決まっている

  • ロールとは 暗黙のロール role属性 抽象ロール

  • WAI-ARIAとは

WAI-ARIAは、HTML5よりも歴史が古く、もともとHTML4の時代から存在していた。その名の通りアクセシブルなリッチインターネットアプリケーション（つまり今でいうWebアプリ）を作るための仕様だったので、その当時のHTMLにない語彙が規定された。そしてHTML5になったときにはWAI-ARIAの一部がHTMLに輸入されて、要素や属性が大量に増えたという経緯がある。 そして、HTMLの各要素には暗黙的にロールが規定されることなった。button要素ならbuttonロール、a要素ならlinkロールといった具合に、すべての要素に何かしらのWAI-ARIAで規定されたロールが対応する。これを暗黙のロールという。

tabindex​

TABキーを押したときにtabindexで指定した数値の小さなもの順にフォーカスが移動する ※tabindexに -1を指定するとそのオブジェクトにフォーカスが移動しなくなる。

video iframe タグ​

iframeはmuteにしていないと自動再生はされない

動画を埋め込む時に <video> タグと <iframe> タグがありますがYouTube動画の場合は <iframe> タグじゃないと上手くいかない。

また、スマホでは自動再生しない。

モバイルの注意事項 自動再生とスクリプト再生 「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。」

この制限があるため autoplay、playVideo()、loadVideoById() などの関数、およびパラメーターはすべてのモバイル環境では動作しない。

スマホで自動再生させる

figure​

参考URL

figure要素は写真、挿絵、図表、コードなどのまとまりを表す。 figure要素によるまとまりは、単体で独立したものでなければなりません。 つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、切り出した内容自体で意味が通るようにする必要があります。 また、figcaption要素によってキャプションを付与できます。

に最終更新