トモジHTMLのタグって何があるの？
タグの種類と意味を知りたい！
本記事は、
上記のような方に向けて記事を書いています。
こんにちは、トモジです。
私はプログラミング未経験から独学で勉強して、
簡易的な動的サイト・ゲーム・サービスが作れる状態になりました。
本記事は、これから勉強を始めるあなたに
HTMLのタグに関して要点をわかりやすく説明しております。
1.HTMLの基本タグ一覧に関して
HTMLのタグ一覧に入る前にタグ記載のルールに関して説明していきます。
HTMLのタグ記載ルール
HTMLの記述に関して最低限必要なルールを説明します。
HTMLの基本はタグではさむ
HTMLのタグは開始タグと終了タグをはさみこみ、
終了タグにはタグ内に[/]を入れます。
入れ子のタグはインデントを入れる
インデントとは、入れ子になったタグの頭にスペースを入れる事を言い視覚的にHTMLの構図を把握できます。
インデントを入れなくても問題なくファイル文書は開きますが、コードが膨大になった時に
把握しにくくなるのでインデントは入れるように心がけましょう。
HTMLタグの基礎と意味
HTML記述には以下のデータが基本要素になりので内容を見ていきましょう。
<!DOCTYPE html>に関して[1行目]
<!DOCTYPE html>は、今から記述するファイル文書がHTMLである事を宣言し
HTML5からDOCTYPEの指定は必須になっております。
<!DOCTYPE html>は、
DOCTYPE宣言や文書宣言と言う
<html>〜</html>に関して[2〜16行目]
htmlタグは、
大きく分けて２つの要素に分かれており
ファイル文書に関する全体的な情報(メタデータ)と画面表示に関する内容(ボディ要素)があります。
<html lang=”ja”>(2行目)
HTMLファイル文書の言語設定を指定する箇所で
ブラウザが自動判断するので問題ありませんが、誤判断を防ぐために基本は記述しましょう。
日本語：ja
英語：en
ドイツ語：de
<head>〜</head>に関して[3〜10行目]
htmlタグ内のメタデータは、headダグ内に記載します。
- <meta charset=”UTF-8″>(4行目)
ファイル文書の文字エンコーディング指定(基本的にUTF-8) - <meta name=”viewport content=”width=device-width, initial-scale=1.0″>(5行目)
タブレットやスマートフォンなどに対応する設定
[width=device-width]
表示領域の幅を指定(横スクロールさせない設定)
[initial-scale=1.0]
表示された時に予期せぬレイアウトの崩れが発生しない設定(初期ズーム倍率) - <meta name=”description”>(6行目)
検索結果画面に表示するサイトの説明分
- <meta name=”keywords”>(7行目)
webページの情報がどのようなキーワードと関連したものなのかを検索エンジンに伝える役割 - <link rel=”stylesheet” type=”text/css” href=””>(8行目)
別のファイルのリンク先
[rel]
linkタグを使って読み込む外部リソースとの関係を示した属性
[type]
外部リソースの種類を示す
[href]
リンク先 - <title>タグ一覧</title>(9行目)
titleタグは文書にタイトルをつけるタグ
<body>〜</body>に関して[11〜15行目]
bodyタグは、ブラウザ画面に表示するために必要なタグを記述するエリアになり
JavaScriptファイルのリンク先はbody内の末尾に記述する事をおすすめします。
※headタグ内に記述しても問題ない
2.body内に記述するタグに関して
タグの種類は非常に多いので、
今回は使用頻度が高いタグを記載します。
別の記事で詳しくタグに関して説明します。
※タグをクリックすると詳細ページに飛ぶ
- <h>〜</h>
見出しを表すタグ
※h1〜h6まである - <p>〜</p>
段落を表すダグ - <strong>〜</strong>
文章の一部を太文字にして強調するタグ - <small>〜</small>
注釈や著作権表示のような
小さいフォントで表示するためのタグ - <br>
改行を表すタグ - <hr>
段落と段落の区切り線を入れるタグ - <li>〜</li>
リストの1行文を表示するタグ - <ul>〜</ul>
liタグを囲む事でリスト表示できるタグ - <a>〜</a>
リンク先にジャンプさせるタグ - <img src=”画像のリンク先”>
画像を表示するためのタグ - <form>〜</form>
webサイトの入力画面内容を
サーバに送信するために必要なタグ - <input>
webサイトの入力枠を作成するタグ - <button>〜</button>
ボタンを表示するタグ
まとめ
今回はHTMLの基本タグ一覧に関しての説明をしました。
タグ記載ルール
- HTMLの基本はタグではさむ
- 入れ子になっているタグはインデントを入れる
基礎タグの意味
<!DOCTYPE html>HTMLファイルの宣言<html lang=”ja”>HTMLファイルの言語設定<meta charset=”UTF-8″>文字エンコーディング指定[width=device-width]表示領域の幅を指定[initial-scale=1.0]初期ズーム倍率<meta name=”description”>表示するサイトの説明分<meta name=”keywords”>キーワード[rel]<title>タブにタイトルをつける
body内の使用タグの一部
<h>タグ見出し<p>タグ段落<strong>タグ太文字にして強調<small>タグ注釈や著作権表示に使用<br>タグ改行<hr>タグ区切り線<li>タグリスト<ul>タグliタグを囲む事でリスト表示できる<a>タグリンク<img>タグ画像を表示<form>タグ入力画面内容をサーバに送信するために必要<input>タグ入力枠を作成<button>タグボタン表示
