# html5 新タグ要素と廃止タグ要素

html とは HyperText Markup Language の略で 1990 年代誕生し、2008 年に 5 回目の大幅改定が発表されました(html5)。html5 は html 要素だけでなく、マルチメディア、グラフィック、WebSocket API 通信など XHTML、DOMHTML、ECMAScript API も追加しました。2008 以降に開発されたブラウザすべては html5 対応するようになったため、WebSocket や localStorage などの機能は迷うことなく現在使用できます。

# Web 系新しいタグ要素

一部ブラウザ対応していないタグ要素除いて、主要な全ブラウザがサポートするタグ要素

タグ要素 説明
<article> 記事など内容が単体で完結するセクション
<aside> 余談・補足情報セクション
<footer> 文書・セクションのフッタ
<header> 文書・セクションのヘッダ
<mark> マーク・ハイライトテキスト
<nav> ナビゲーションセクション
<progress> タスクの進捗状況を表示
<ruby> ルビ注釈
<section> 文書内のセクション
<time> 日付・時刻

# input タイププロパティ

IE と Firefox がほとんど対応していないが、chrome と safari なら便利に使える input タイププロパティ
ほとんど英語のままで、わかりやすいです。

タイプ 説明
tel 電話番号
search 検索用
url URL
email メールアドレス
datetime 日付と時刻
date 日付
month
week
time 時刻
datetime-local ローカル日付・時刻
number 数値
range 指定範囲の数値
color #EECC00 のような色表記
placeholder 値の説明やヒント

# クライアントストレージ localStorage & sessionStorage

html5 では App Cache、Web Storage、Indexed Database API、File API などの機能追加されました。
使用する前にブラウザの対応状況と使えるかどうかの検証行ったほうがいいでしょう。なぜなら、ブラウザが対応していても容量がいっぱいだったり使えないこともあります。 例えば、 Safari のプライバシーモードでは localStorage 容量が 0 に制限され、実質 localStorage 使えません。

localStorage と sessionStorage の違いは

localStorage と sessionStorage の書き込み・取得・削除の使い方は一緒で、localStorage に保存されたデータの保存期限がありません。保存されたデータは値削除やブラウザクリアしない限り永遠に保持します。sessionStorage はセッション終了時にデータ消去されます。

localStorage sessionStorage と Cookie の比較

  • localStorage は Cookie 容量 (4 KB) より大容量 (5 MB)
  • localStorage は読み込み速度は Cookie より遅い
/*
 * localStorage
 */
// 値セット・書き込み
localStorage.setItem("myColor", "#eee");
// 値取得
var myColor = localStorage.getItem("myColor");
// 値削除
localStorage.removeItem("myColor");

/*
 * sessionStorage
 */
// 値セット・書き込み
sessionStorage.setItem("myColor", "#eee");
// 値取得
var myColor = sessionStorage.getItem("myColor");
// 値削除
sessionStorage.removeItem("myColor");

注意

  • ブラウザによって localStorage sessionStorage の制限容量が違う
  • クッキーと同じようにページのプロトコルに限定
  • localStorage はライフサイクル beforeMount 以降しか使えない

# ブラウザ 容量制限

モバイル

ブラウザ Chrome Android Browser Firefox iOS Safari
バージョン 40 4.3 34 6-8
容量 10MB 2MB 10MB 5MB

デスクトップ

ブラウザ Chrome Opera Firefox Safari IE
バージョン 40 27 34 6-8 9-11
容量 10MB 10MB 10MB 5MB 10MB

# 位置を取得する機能 geolocation

Geolocation API、マイク・カメラ、アドレス帳・カレンダー、端末の向きなどの情報を API 使って取得操作したりできます。機能は豊富にありますが、chrome はほぼサポートしているが、他のブラウザはほとんどサポートしていません。
セキュリティ上のこともあって、これらの機能はHTTPS のみ利用できます。

geolocation 使ってユーザーの現在位置と位置の変化を取得ができます。

navigator.geolocation.getCurrentPosition(function(pos) {
  console.log(pos.coords.latitude);
  console.log(pos.coords.longitude);
});

html5 の Geolocation API 利用して開発してもいいですが、IP Geolocation API (opens new window)というツール利用したほうが楽かもしれません。

https://api.ipgeolocationapi.com/geolocate/191.213.103.0

{
  "continent": "South America",
  "address_format": "{{recipient}}\n{{street}}\n{{postalcode}} {{city}} {{region_short}}\n{{country}}",
  "alpha2": "BR",
  "alpha3": "BRA",
  "country_code": "55",
  "international_prefix": "0014",
  "ioc": "BRA",
  "gec": "BR",
  "name": "Brazil",
  "national_destination_code_lengths": [2],
  "national_number_lengths": [10, 11],
  "national_prefix": "014",
  "number": "076",
  "region": "Americas",
  "subregion": "South America",
  "world_region": "AMER",
  "un_locode": "BR",
  "nationality": "Brazilian",
  "postal_code": true,
  "unofficial_names": [
    "Brazil",
    "Brasilien",
    "Brésil",
    "Brasil",
    "ブラジル",
    "Brazilië"
  ],
  "languages_official": ["pt"],
  "languages_spoken": ["pt"],
  "geo": {
    "latitude": -14.235004,
    "latitude_dec": "-10.81045150756836",
    "longitude": -51.92528,
    "longitude_dec": "-52.97311782836914",
    "max_latitude": 5.2717863,
    "max_longitude": -29.3434,
    "min_latitude": -34.0891,
    "min_longitude": -73.982817,
    "bounds": {
      "northeast": { "lat": 5.2717863, "lng": -29.3434 },
      "southwest": { "lat": -34.0891, "lng": -73.982817 }
    }
  },
  "currency_code": "BRL",
  "start_of_week": "monday"
}

# グラフィックを描く Canvas API

<canvas> 要素使って動的にグラフィックスを描画

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);

# 廃止したタグとその置き換え

html5 では廃止されたタグ要素とそれを置き換えるためのタグ要素と CSS など

タグ要素 説明 置き換え
<acronym> 略語や頭字語 <abbr>
<applet> Java アプレットを埋め込むためのタグ <embed>``<object>
<basefont> 基準フォント CSS font
<big> フォントを強調表示 CSS font-size
<center> 要素の左右中央揃え CSS margin text-align
<dir> ディレクトリ型リスト表示 <ul>
<font> フォント指定 CSS font
<frame> フレームの定義 <iframe>
<frameset> フレーム(frame 要素)の構成 <iframe>
<isindex> キーワード検索入力欄の埋め込み <form>
<noframes> フレーム未対応ユーザー向けにテキスト表示 <iframe>
<s> テキストに取消線 <del>
<strike> テキストに取消線 <del>
<tt> テキストを等幅フォント CSS font-family: monospace
<u> テキストに下線 CSS text-decoration:underline
2021-01-29
  • css

関連記事

背景画像フルースクリーン 100%表示 iphone 対応
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる
google color palette
CSS background と conic-gradient で bookmark のブックマーク作る
css フルースクリンの背景画像と透けるログイン画面
HTML 特殊文字エンティティ参照
margin 上下効かない原因
placeholder text-align プレースホルダーの左寄せ・右寄せ
safari でボタンタップしたら影が残る怪奇現象
sass-loader エラー
css 学習 タイピング風アニメーションを css だけでやってみる