More than 3 years have passed since last update.

HTMLの文法について

HTML

Posted at 2021-08-24

HTMLとは

HyperText Markup Languageの略。
ウェブサイトに表示される情報を記載する言語です。
〇〇.htmlという名前のファイルに記述します。

要素

HTMLにおける要素は、HTMLを構成するために必要な成分です。
いくつもの要素が積み重なって、HTMLは構成されます。

test.html

<body>
  <h1>
    お疲れ様です
  </h1>
</body>

この< >...</ >一つひとつをHTMLの要素と呼び、それぞれ役割をもっています。

head要素

ウェブサイトの情報や、装飾用のCSSファイルの情報を記載する部分です。
ここに記述した情報は画面上に表示されません。

body要素

画面上に表示したい情報を記載する部分です。
ブラウザ上に表示されている情報は、body要素の中に記述されたものです。

DOCTYPE (読み方：ドックタイプ)

DOCTYPEは「ドキュメントタイプ」の略で、この文章がHTML文章であることを宣言する要素です。終了タグはありません。
実際に記述する場合は、のようにします。この要素を記述しないと、レイアウトが崩れ、正しく表示がされない場合があります。

html要素

HTML文章の始まりと終わりを示す要素です。こちらもHTMLを書く際に必要です。

test.html

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

head要素について

meta要素 (読み方：メタ要素)

HTML文章に関する情報を指定する時に使用します。終了タグはありません。charset=はmeta要素の属性です。

属性

属性は、要素に情報を付け加える役割を持ちます。属性のあとには属性値が続きます。

属性値

どのような属性なのかを示す値を属性値と呼びます。

test.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    ↑meta要素。charsetが属性で、UTF-8が属性値。
~省略~

charset属性 (読み方：キャラセット属性)

メタ要素にて、どのような文字コードを用いるか示すことができる属性です。「キャラセット」と読むことが多いです。今回は、属性値をUTF-8としました。

※UTF-8とは、世界的にも最もポピュラーな文字コードで、Unicode用の符号化方式の1つです。ASCIIで定義している文字を、Unicodeでそのまま使用することを目的として制定しています。

title要素

ウェブサイトのタイトルを指定する要素です。
title要素内にタイトルを記述してもウェブサイトの画面上には表示されません。
Googleでの検索結果や、ブラウザのタブに表示するタイトルとして使用されます。

test.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ウェブサイトのタイトル</title>
  </head>
  <body>
~省略~

body要素について

h1 〜 h6要素

hはHeadingの略で、hから始まるh1/h2/h3/h4/h5/h6の要素は文章の見出しを作るための要素です。
見出し要素は、<h1>から<h6>まで存在します。
h1〜h6のタグに囲まれたテキストは見出しとして強調され、<h1>から順に文字の太さと大きさが小さくなります。

p要素

pはParagraphの略で、文章の段落を表す要素です。
<p>...</p>で囲むとひとかたまりの段落として認識されます。
Webページ内では、見出しを除くテキストのほとんどが、このp要素を使って作られます。

br要素

brはLine Breakの略で、テキストを改行するための要素です。br要素をテキストの中で用いることで、改行ができます。br要素は終了タグが不要です。

b要素

bはBoldの略で、文字でを太くする要素です。
<b>...</b>で囲まれている部分だけ太字になります。

a要素

aはAnchorの略で<a>...</a>で囲ったテキストをリンクにすることができます。
a要素をクリックすると特定のページに移動します。aタグのhref属性に、移動させたいページのURLを指定します。

href属性 (読み方：エイチレフ属性)

hrefはHyper Referenceの略で、href属性でリンクの移動先を指定します。
属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できます。

test.html

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ウェブサイトのタイトル</title>
  </head>
  <body>
    <h1>
      これは見出しです
    </h1>
    <p>
      1つ目の段落です
    </p>
    <p>
      2つ目の段落です
    </p>
    <p>
      3つ目の段落です。<b>この部分は太字になります。</b>
    </p>
　　　　　　　　　　<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up