Zenn
📕

【忘備録】HTML参考書を読んで復習になった・勉強になったコンテンツ

2023/03/02に公開
HTML
SEO
tech

small要素

著作権表記や免責事項のような、一般的に小さな文字で表示する副次的な表記の事をサイドコメントという。
サイドコメントにはsmall要素を使用する。

使用例

<p><small>2023 884 copyright</small></p>

time要素

記事の公開日やイベント開催日などの日付や時刻にはtime要素を使用する。

使用例

<p>営業時間 : <time>19:00</time>~<time>21:00</time></p>

※ 年、月、日を「-」で区切ったり、時、分、秒を「:」で区切る場合は、time要素をそのまま使えるが、~~年~月~日と記載したい場合は、datetime属性を指定する必要がある。

<p><time datetime="2022-01-23">2022年1月23日</time>のおすすめは、「スペシャルブレンドコーヒー」です。</p>

URLの指定 絶対パスと相対パスの使い分け

絶対パス

  • Webサイト内に外部サイトのリンクを貼る場合。関連会社へのリンクやSNSやYoutubeへのリンク。

相対パス

  • Webサイト内に同一サイト内ページへのリンクを貼る場合。

画像の拡張子 webpについて

  • JPEGやPNGよりも圧縮に優れており、透過やアニメーションも可能な画像形式

用途

  • 写真
  • イラスト

imgタグに指定するべき属性について

width,height

imgタグに画像のサイズを指定する事で、画像を読み込む際のガタつき(レイアウトシフト)を防ぐことができる。また、ウィンドウ幅に応じて画像サイズが変更される設定は、CSSで行う。

高解像度ディスプレイの対応

Retinaディスプレイ等の高解像度ディスプレイに対応する場合は、あらかじめ画像を表示したいサイズの2倍で用意しておき、width属性、height属性に用意した画像の半分のサイズを指定する。
ただ、これでは通常ディスプレイで閲覧しているユーザーが必要以上に大きいデータをダウンロードする事になるため、srcset属性を用いて、画像の出しわけを行う。

<img src="img01" srcset="img01 1x, img01@2x 2x" 
width="500" height="350" alt="">

通常ディスプレイで閲覧しているユーザーには、src属性で指定したimg01が表示され、高画質ディスプレイで閲覧しているユーザーには、srcset属性で指定したimg01@2xが表示される。

画像の描画処理と読み込みタイミングの指定

下記を用いることで、画像表示のパフォーマンスが向上する。

  • decoding="async"
    • 画像表示の処理が完了するのを待たずに、他のコンテンツの処理を行う。
  • loading="lazy"
    • 画像の読み込みタイミングを指定する。
      • ページ下部にある画像に指定しておくと良い。

使い分け方

  • ファーストビューにおける画像の量が多い & ページ全体がファーストビューに収まるサイト
<img src="sample" width="300" height="300" decoding="async" alt="">
  • LP等の縦に長くてスクロールで表示される画像が多いサイト
<img src="sample" width="300" height="300" loading="lazy" alt="">

メインビジュアル画像には、decoding="async"を指定し、FVで見えない下層の画像は、loading="lazy"を指定すると良い。

表・テーブルタグについて

見出しの対象範囲を設定する

th要素にscope属性を使って見出しと定義することで表の構造をより分かりやすく示すことができる。

<table>
  <tr>
    <th scope="見出しの対象範囲">テキストテキスト</th>
    <th scope="見出しの対象範囲">テキストテキスト</th>
    <th scope="見出しの対象範囲">テキストテキスト</th>
    <th scope="見出しの対象範囲">テキストテキスト</th>
  </tr>
  <tr>
    <th scope="見出しの対象範囲">テキストテキスト</th>
    <td>テキストテキストテキストテキスト</td>
    <td>テキストテキストテキストテキスト</td>
    <td>テキストテキストテキストテキスト</td>
  </tr>
  <tr>
    <th scope="見出しの対象範囲">テキストテキスト</th>
    <td>テキストテキストテキストテキスト</td>
    <td>テキストテキストテキストテキスト</td>
    <td>テキストテキストテキストテキスト</td>
  </tr>
</table>

見出し・内容を分ける　 theadタグ、tbodyタグ

<table>
  <thead>
    <tr>
      <th scope="見出しの対象範囲">テキストテキスト</th>
      <th scope="見出しの対象範囲">テキストテキスト</th>
      <th scope="見出しの対象範囲">テキストテキスト</th>
      <th scope="見出しの対象範囲">テキストテキスト</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="見出しの対象範囲">テキストテキスト</th>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
    </tr>
    <tr>
      <th scope="見出しの対象範囲">テキストテキスト</th>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
      <td>テキストテキストテキストテキスト</td>
    </tr>
  </tbody>
</table>

セクションニングに関する要素

  • section要素
    • 一般的にsectionを表す
  • article要素
    • ブログやニュース記事のように内容が完結した独立可能なsection
  • aside要素
    • メインコンテンツから切り離せる補足的なセクションを表す
  • nav要素
    • 主要なナビゲーションであることを表す

article要素

article要素は、マークアップした範囲を切り離しても独立したコンテンツとして成り立つ場合に使うことができる。

aside要素

メインコンテンツから切り離すことが可能。かつ補助的なsectionの場合は、aside要素が使える。
具体的には、補足情報や余談、広告などに利用される。

section要素かarticle要素かの切り分け

マークアップしたいコンテンツが話題を構成する一部なら、section要素を使う。
コンテンツがブログやSNSのタイムラインに投稿した場合に、1つのコンテンツとして成り立つ独立した内容であればarticle要素を使う。

連絡先情報 address要素

連絡先の情報はaddress要素を使って表します。
　サイトや記事の連絡先情報として有効な住所が含まれる場合にのみ使用することができる。

<address>
  <p>Dummy Cafe</p>
  <p>〒100-****<br>
  東京都架空区架空町1-1-0
  </p>
</address>

より良いページにする為にやるべきこと meta要素など

ページの紹介文を設定する description属性

検索結果一覧ページで紹介される際の表示内容を指定する。

<meta name="description" content="ページの紹介文">

SNSの情報共有を設定する

SNSのタイムラインにWebサイトのURLを貼り付けると、そのページのタイトルやサムネイル画像が表示される。
OGPという仕組みを使って、SNSでシェアされた際に表示するサムネイル画像やページの紹介文を設定している。

  • og:url
    • ページのURL
  • og:title
    • ページのタイトル
  • og:description
    • ページの紹介文
  • og:image
    • ページのサムネイル画像のURL

ファビコンを設定する

webサイトのタイトルの横に表示されるアイコン画像をファビコンという。
ファビコンは、一般的に「favicon.ico」という拡張子。
webサイトのルートディレクトリにアップロードするだけで表示される。

URLの正規化

webサイトURLを正規化しないと、複数のURLからアクセスできてしまう。
複数のURLからアクセスできてしまうと検索エンジンの評価が分散してしまう可能性がある。
link要素にrel属性を使って、canonicalを使って正規のURLを指定することで
複数のURLからのアクセスができなくなり、ページとしての評価も上がる。

<link rel="canonical" href="正規のURL">

制作したHTMLの構文をチェックする

ツール
Nu HTML Checker

https://validator.w3.org/nu/

Discussion