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名前空間を指定する（任意） |
対応ブラウザ
対応ブラウザは以下の通りです。
| 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文書の基本の書き方になります。
|
1 2 3 4 5 |
<!DOCTYPE html> <html lang="ja"> <head></head> <body></body> </html> |
<!DOCTYPE>
<!DOCTYPE>は文書型の定義を宣言するために記述します。<!DOCTYPE html>は、これから文書型の定義を行うことを宣言したうえで、使用する文書タイプがhtmlであることを示します。
ここで初めて「この文書がHTML文書である」ことを示します。lang属性では”ja”=日本語を指定し、日本語で記述されたHTML文書であると示すのです。
haedタグで囲われた部分はヘッダ部と呼ばれ、文書全体に適用する指定などを記述します。実際に記述される内容としては、CSSのファイルパスや使用するフォントの指定などです。
実際にWebページに表示される部分が記述される場所です。これがhtml文書の本体部分になります。
html要素は省略可能！html要素を省略して良い場面とは
実はhtml要素は必須の要素ではないため、省略することができます。省略した場合は要素が存在しないというわけでなく、ブラウザ側が勝手に要素を付け加えてくれるのです。
ただし省略する場合にはhtmlタグの前後にコメントが存在していないという規則があります。
・通常の書き方（省略なし）
|
1 2 3 4 |
<!DOCTYPE html> <html lang="ja"> ... </html> |
・省略した書き方
|
1 2 3 |
<!DOCTYPE html> <head>...</haed> <body>...</body> |
・省略不可（html開始タグの直後にコメントがある場合）
|
1 2 3 4 5 |
<!DOCTYPE html> <html lang="ja"> <!-- コメント --> ... </html> |
・省略不可（html終了タグの直後にコメントがある場合）
|
1 2 3 4 5 |
<!DOCTYPE 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辞典
