HTMLってなに?
プログラミング初心者がはじめに学習するであろうHTMLのきほんについてまとめていきます。
HTMLはマークアップ言語
HTMLは「HyperText Markup Language」の意味で、
マークアップ言語のひとつ。
マークアップとは、コンテンツに「タグ」と呼ばれるマーク(しるし)をつけて、
何かしらの意味付けをします。
ブラウザはタグ付けされた内容を理解し、
それぞれのコンテンツを適切に利用できます。
ブラウザ
ChromeやIE、SafariなどWEBを閲覧するためのソフト
HTMLの構成要素
タグ(tag)
意味付けする内容と、その範囲を決めるマークです。
範囲のはじまりを表すタグを「 開始タグ 」、
おわりを表すタグを「 終了タグ 」と呼びます。
要素(Element)
タグで囲まれた範囲を「 要素 」と呼びます。
HTMLはさまざまな要素の組み合わせで構成されます。
また、改行を意味するbr要素など、タグのみで構成される中身のない要素を「 空要素 」と呼びます。
空要素の場合、以下のようにタグを単体で使用します。
html<br> <!-- 終了タグは不要 -->
属性(Attribute)
要素に対して、さらに細かな情報を設定するのが「 属性 」です。
属性は、開始タグの中に属性名と属性値をセットで記述します。
HTMLファイル
テキストエディタ(メモ帳でもOK)で記述し、拡張子を「.html」で保存すれば簡単にHTMLファイルを作成できます。
拡張子
ファイル名の最後に「.hoge」と記述する文字列。拡張子はそのファイルがどんな言語の種類か表す。
hoge
意味をもたない例示用の文字列。氏名の記述例でつかわれる「山田 太郎」のようなもの。
プログラミングの世界では他にも「foo」「bar」や「fuga」「piyo」などがある
HTMLファイルの基本構造
<!DOCTYPE html> ...DOCTYPE宣言
<html> ...html要素
<head> head要素 </head>
<body> body要素 </body>
</html>
DOCTYPE宣言
最初に「 DOCTYPE宣言 」といって、HTMLの種類を明示します。
上記の例では「HTML5」という言語規格を指定しています。
html要素
DOCTYPE宣言以外のすべてを包括する要素で、HTMLファイルにおける最上位の要素です。
後述するhead要素とbody要素から構成されます。
「 lang属性 」で使用する言語を明示します。
lang属性の例
html要素<html lang="ja">
上記の例では、日本語(ja)を設定しています
head要素
ブラウザには表示されない、HTMLファイルの設定や説明文を記述する要素です。
文書のタイトルや使用する文字コード、キーワードや説明文、読み込むCSSファイルの指定などを行います。
body要素
コンテンツを記述する要素です。実際にブラウザに表示する中身を記述します。
body要素の中身は、見出しを表すh1〜h6要素や、段落を表すp要素など、さまざまな要素を入れ子状に組み合わせ構成します。
補足
さいごまでお読みいただき、ありがとうございます!
この記事はプログラミング初学者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。
また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー!
明日は、「各要素の具体的な使い方」についてまとめる予定です。
これからもどうぞよろしくお願いします