【HTML5まずはここから!】<html>タグとは?初心者向けにhtmlタグを徹底解説

HTMLで一番最初に書くタグをご存じですか?正解は<html>タグです。HTMLに慣れた方もHTMLに触れ始めた方も、テキストにあったからなんとなく使用している方も多いのではないでしょうか?

HTMLで必須の<html>タグとは?

今回は、html要素の

・基本的な使い方
・html要素は省略可能か
・html要素を使用したサンプルページ例

について説明します。

html要素とは

html要素の読み方

htmlタグ:(読み方)エイチティーエムエルタグ

html要素の説明

html要素はその名通り、htmlの文書であることを宣言するためのタグです。HTML文書の基点であり、全ての要素の親要素となります(トップレベル要素)。

そのため他のすべての要素は、このhtml要素の子要素としなければなりません。子要素とは<html></html>で囲まれた要素のことを言います。

html要素で利用できる属性

html要素では以下の属性を使うことができます。

属性 説明
  accesskey属性  キーボードのショートカットの生成し、簡易なアクセスを可能にする
class属性   要素に任意の名称を与える(同じclass名を複数の要素に与えられる)
 dir属性  テキストの書字方向を示す
・ltr:「left to right」左から右
・rtl:「rght to left」右から左
・auto:自動的に書字方向を決定する
 hidden属性  要素に関連性がないことを示す
id属性  要素に任意の名称を与える(同じidは使用できない:一意性)
 lang属性  要素の言語を定義する
style属性   要素にCSSスタイル宣言を適用する
manifest属性   ドキュメントのキャッシュマニフェストのURLを指定する
version属性   HTML文書の文書型定義のバージョンを指定する
xmlns属性  XML名前空間を指定する(任意)
注意
manifest属性とversion属性は現在非推奨とされているため、使用には注意が必要です。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  完全対応
nternet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

html要素の基本的な使い方

html要素の使い方

まずはhtml要素の基本的な使い方と、記述位置について解説していきます。以下の書き方が、HTML文書の基本の書き方になります。

<!DOCTYPE>

<!DOCTYPE>は文書型の定義を宣言するために記述します。<!DOCTYPE html>は、これから文書型の定義を行うことを宣言したうえで、使用する文書タイプがhtmlであることを示します。

<html lang=”ja”>
ここで初めて「この文書がHTML文書である」ことを示します。lang属性では”ja”=日本語を指定し、日本語で記述されたHTML文書であると示すのです。
<head></head>
haedタグで囲われた部分はヘッダ部と呼ばれ、文書全体に適用する指定などを記述します。実際に記述される内容としては、CSSのファイルパスや使用するフォントの指定などです。
<body></body>
実際にWebページに表示される部分が記述される場所です。これがhtml文書の本体部分になります。

html要素は省略可能!html要素を省略して良い場面とは

実はhtml要素は必須の要素ではないため、省略することができます。省略した場合は要素が存在しないというわけでなく、ブラウザ側が勝手に要素を付け加えてくれるのです。

ただし省略する場合にはhtmlタグの前後にコメントが存在していないという規則があります。


・通常の書き方(省略なし)


・省略した書き方


・省略不可(html開始タグの直後にコメントがある場合)


・省略不可(html終了タグの直後にコメントがある場合)

html要素を使用したWebページの作成例

では実際にhtml要素を使用したWebページを作成していきましょう。今回はhtmlタグでだけではなく、headやmeta、bodyなど、Webページの作成に最低限必要なタグを記述しました。良く分からないという方はコピー&ペーストで動作を実験して少しずつ慣れていきましょう。

See the Pen
html サンプルページ
by rabbittyu (@rabbittyu)
on CodePen.

サンプルページを作成するにあたり、簡単なCSSを適用しました。CSSに関してはコメントを参考にして、実際にコードを書いて動作を確認してみてください。

HTML内では<mata>、<title>、<div>、<h1>、<p>などのタグが新たに登場しました。

<mata> → 文字のエンコードを指定します。ここではUTF-8を指定してあります。

<title> → タブ表示にした際に、記事のタイトルとして表示される文字です。

<div> → CSS適用時に便利な、要素のかたまりを指定することができます。

<h1>~<h3> → 見出しを示すタグです。h1~h6まで順に使用していきます。

<p> → テキストを書くためのタグです。

まとめ

今回はhtml要素について解説しました。意味はないけど必要なタグという認識を改めることができたでしょうか?またhtml要素は前後にコメントがなければ省略可能というのも、新しい発見だったはず!

今後は高頻度で使用するタグについて、「なんとなく」ではなく少し興味を示して、意味を確認してみてくださいね。

参考文献:
MDN Web Docs <html>:HTML文書/ルート要素
<head> – ヘッダ – とほほのHTMLリファレンス
[HTML5]閉じタグ省略可能になってた
<!DOCTYPE>の解説| クルノドライブのHTML辞典