Go to Qiita Advent Calendar 2024 Top
LoginSignup
17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@maccotsan(マコトサン)

HTML5Tips

Posted at

CSS以外にもいろいろ。link要素/rel属性の使いみち。

Faviconの指定

ファイル名がfavicon.icoでない時などに。

<link rel="icon" href="/favicon.png" type="image/png" size="64x64">

言語ページを明示

他の言語ページが存在する場合、linkタグのalternateを指定します。

<link rel="alternate" href="/en/index.html" hreflang="en" title="English">

モバイルサイトへ飛ばす

<link rel="alternate" media="handheld" href="http://www.example.com/mobile/">

フィードの明示

最近なぜかRSS配信してるのにこれが無いサイトが多い気がします。

RSS
<link rel="alternate"  type="application/rss+xml"  href="http://sitedomain/rss" >
ATOM
<link rel="alternate"  type="application/atom+xml"  href="http://sitedomain/rss" >

ユーザがスタイルを切り替え可能にする

以下のようにすると一部ブラウザ(IE,FF,Opera)のメニューからスタイルを切り替えられるようになります。

<meta http-equiv="default-style" content="default">
<link rel="stylesheet" href="main.css" type="text/css" title="default">
<link rel="stylesheet" href="dark-theme.css" type="text/css" title="dark">

オリジナルページの明示

表示しているページと同じ内容なのにURLが異なるページ（オリジナル）がある場合に指定します。（主にSEO対策）

<link rel="canonical" href="http://www.example.com/">

コンテンツが過去のアーカイブであることを示す

<a href='/archive' rel='archive'>Archive</a>

コンテンツの著者であることを示す

<a href='twitter.com/user' rel='author'>@user</a>

外部サイトへのリンクであることを示す

<a href='http://html5.jp/' rel='eternal'>参考にしたサイト</a>

保証しないサイトへのリンクであることを示す

<a href='http://unknownsite/' rel='nofollow'>Unknown Site</a>

連載の初回であることを示す

<link rel='first' href='mag1.html' title='連載第１回'>

次回の連載を示す

<link rel='next' href='mag2.html' title='連載第２回'>

前回の連載を示す

<link rel='prev' href='mag1.html' title='連載第１回'>

連載の最終回であることを示す

<link rel='last' href='mag5.html' title='連載最終回'>

親要素にあたるコンテンツのヘルプであることを示す

<a rel='help' href='help.html'>ヘルプ</a>

目次ページであることを示す

<link rel='index' href='index.html' title='目次'>

著作権を示す

<footer>
  <p><small>このライブラリは<a rel='license' href='http://opensource.org/licenses/MIT'>MITライセンス</a>です。</small></p>
</footer>

リンク先にリファラを通知しない

<a rel='noreferrer' href='http://example.com/'>Example</a>

トラックバックを受け付ける

<link rel='pingback' href='http://example.com/pingback_url'>

リンク先のリソースを事前にロードする

<link rel='prefetch' href='http://example.com/'>

検索ページのURLを指定する

<link rel='search' href='/search' title='検索'>

ブラウザのサイドバーに表示させるページを指定する

<link rel='sidebar' href='/sidebar.html' title='目次'>

このドキュメントに適用されているタグのページを表す

<a rel='tag' href='http://example.com/tag/html5'>HTML5</a>

このドキュメントの上の階層のページを示す

<link rel='up' href='http://example.com/category/top' title='親ページ'>

画面解像度ごとの画像ファイル指定

Chrome 34ではその、いわゆるレスポンシブイメージへの対応としてimg要素に新機能を実装することを明らかにしました。。 img要素のsrcsetで、画面解像度ごとに表示すべき画像ファイルを複数指定できるようになります。
via Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に － Publickey

<img alt="A rad wolf." src="pic1x.jpg" 
srcset="pic1x.jpg 1x, pic2x.jpg 2x, pic4x.jpg 4x">

blockquoteの正しい使い方

cite属性を付ける

引用するサイトURLがある場合はcite属性に指定します。
（q要素も同様）

出典元を書く場合のcite要素はblockquoteの外に置く

HTML5
<blockquote cite="http://qiita.com/items/...">
  <p>引用文</p>
</blockquote>
<p>出典：<cite>Qiita</cite></p>

ol(順序リスト)のstart属性とreversed属性

  • start="開始番号"で開始番号を指定できる
  • reversed を付けると降順に番号が降られる

文章表現におけるstrong/em/mark/i/b/u

strongは重要性、emはニュアンスの強調、markはハイライトを表し、
iはイタリックで表現されるようなテキスト、bは太字で表現されるようなテキストを表します。
bはセマンティクス上の決まった用途を持たないので、使うのは最後の手段。
なお、それぞれネストすることもできて、ネストが深いほどセマンティクス上の強調の度合いも強いことになります。

SEOを考慮して囲むなら、strong。装飾したいだけならb。 emは、SEO的に有効とか有効じゃないとか、いろいろ言われていてけっこう微妙です。
via その使い方合っていますか？間違えやすいタグ15選（HTML5対応） | 株式会社LIG

コンソール出力貼付けはsamp/kbd

コンソールの出力を貼付けるときはcodeじゃなくてsampを使います。
また、入力部分にはkdbを使います。

HTML5
<pre><samp>
  [user@localhost ~] $ <kdb>ls</kdb>
  .ssh libs
</samp></pre>

削除／訂正に日時を入れる

delとinsはdatetime属性は変更日時を入れておくことができます。

HTML5
<ins datetime="2014-03-10T10:23:06">
<del datetime="2014-03-10T10:23:06">

img要素のalt属性が表すもの

[HTML5] img要素の正しいalt - Qiita

テーブルを正しく使う

  • tbodyを使わなくても良いのは下位互換のため。本来は必須。
<table>
  <caption>商品一覧</caption>
  <thead>
    <tr>
      <th>種類</th>
      <th>名前</th>
      <th>価格</th>
    </tr>
  </thead>
  <tbody>
     <tr>
      <td rowspan='2'>果物</td>
      <td>りんご</td>
      <td>120</td>
    </tr>
    <tr>
      <td></td>
      <td>みかん</td>
      <td>90</td>
    </tr>
    <tr>
      <td rowspan='1'>野菜</td>
      <td>レタス</td>
      <td>90</td>
    </tr>

  </tbody>
  <tfooter>
      <tr>
      <td colspan='2'>小計</td>
      <td></td>
      <td>120</td>
    </tr>
  </tfooter>
</table>
商品一覧
種類 ID 名前 価格
果物 1 りんご 120
2 みかん 90
野菜 3 レタス 90
小計 120

インラインSVGとMathML

SVG

<svg width="270" height="180" style="border: 1px solid #ddd; background: #fff">
  <circle cx="135" cy="90" r="54" style="fill: #b22"></circle>
</svg>

MathML

<math>
 <mrow>
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
   <mrow>
    <mrow>
     <mo>-</mo>
     <mi>b</mi>
    </mrow>
    <mo>&PlusMinus;</mo>
    <msqrt>
     <mrow>
      <msup>
       <mi>b</mi>
       <mn>2</mn>
      </msup>
      <mo>-</mo>
      <mrow>
       <mn>4</mn>
       <mo>&InvisibleTimes;</mo>
       <mi>a</mi>
       <mo>&InvisibleTimes;</mo>
       <mi>c</mi>
      </mrow>
     </mrow>
    </msqrt>
   </mrow>
   <mrow>
    <mn>2</mn>
    <mo>&InvisibleTimes;</mo>
    <mi>a</mi>
   </mrow>
  </mfrac>
 </mrow>
</math>
17
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?