# 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 5年前

css

同じタグを持つ記事をピックアップしました。

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

# Web 系新しいタグ要素

# input タイププロパティ

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

# ブラウザ容量制限

# 位置を取得する機能 geolocation

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

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

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

CSS background と conic-gradient で bookmark のブックマーク作る

フルスクリーン背景画像の 100%表示と iPhone 対応方法

google color palette

CSS リセットのカスタマイズ

css フルースクリンの背景画像と透けるログイン画面

HTML 特殊文字エンティティ参照

margin 上下効かない原因

sass-loader エラー

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

safari でボタンタップしたら影が残る怪奇現象

シェアボタン SNS ソーシャルリンクの作り方

css 学習タイピング風アニメーションを css だけでやってみる

Tailwindcss でローディングコンポーネント作成

placeholder text-align プレースホルダーの左寄せ・右寄せ

モダンなWebデザインのベストプラクティス

Nuxt Fontawesome アイコン使う

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

# Web 系新しいタグ要素

# input タイププロパティ

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

# ブラウザ 容量制限

# 位置を取得する機能 geolocation

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

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

関連記事

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

CSS background と conic-gradient で bookmark のブックマーク作る

フルスクリーン背景画像の 100%表示と iPhone 対応方法

google color palette

CSS リセットのカスタマイズ

css フルースクリンの背景画像と透けるログイン画面

HTML 特殊文字エンティティ参照

margin 上下効かない原因

sass-loader エラー

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

safari でボタンタップしたら影が残る怪奇現象

シェアボタン SNS ソーシャルリンクの作り方

css 学習 タイピング風アニメーションを css だけでやってみる

Tailwindcss でローディングコンポーネント作成

placeholder text-align プレースホルダーの左寄せ・右寄せ

モダンなWebデザインのベストプラクティス

Nuxt Fontawesome アイコン使う

# ブラウザ容量制限

css 学習タイピング風アニメーションを css だけでやってみる