2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLの超きほん 〜HTMLってなに?〜

Last updated at Posted at 2022-03-12

HTMLってなに?

プログラミング初心者がはじめに学習するであろうHTMLのきほんについてまとめていきます。

HTMLはマークアップ言語

HTMLは「HyperText Markup Language」の意味で、
マークアップ言語のひとつ。

マークアップとは、コンテンツに「タグ」と呼ばれるマーク(しるし)をつけて、
何かしらの意味付けをします。

ブラウザはタグ付けされた内容を理解し、
それぞれのコンテンツを適切に利用できます。

ブラウザ
ChromeやIE、SafariなどWEBを閲覧するためのソフト

HTMLの構成要素

タグ(tag)

意味付けする内容と、その範囲を決めるマークです。

範囲のはじまりを表すタグを「 開始タグ 」、
おわりを表すタグを「 終了タグ 」と呼びます。

要素(Element)

タグで囲まれた範囲を「 要素 」と呼びます。
HTMLはさまざまな要素の組み合わせで構成されます。

0312-01.png

また、改行を意味するbr要素など、タグのみで構成される中身のない要素を「 空要素 」と呼びます。

空要素の場合、以下のようにタグを単体で使用します。

html
<br> <!-- 終了タグは不要 -->

属性(Attribute)

要素に対して、さらに細かな情報を設定するのが「 属性 」です。

属性は、開始タグの中に属性名と属性値をセットで記述します。

0312-02.png

HTMLファイル

テキストエディタ(メモ帳でもOK)で記述し、拡張子を「.html」で保存すれば簡単にHTMLファイルを作成できます。

拡張子
ファイル名の最後に「.hoge」と記述する文字列。拡張子はそのファイルがどんな言語の種類か表す。

hoge
意味をもたない例示用の文字列。氏名の記述例でつかわれる「山田 太郎」のようなもの。
プログラミングの世界では他にも「foo」「bar」や「fuga」「piyo」などがある

HTMLファイルの基本構造

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などでご連絡くださいー!

明日は、「各要素の具体的な使い方」についてまとめる予定です。
これからもどうぞよろしくお願いします:rabbit:

2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?