【HTML】HTMLについて

HTML

Last updated at 2025-03-19Posted at 2025-03-19

記事概要

HTMLについて、まとめる。

HTMLとは

正式名称は、Hyper Text Markup Language
ウェブサイトに表示される情報を記載する言語
拡張子は、.html
CSSとセットで使用することが多い

HTMLの構成

要素

<>と</>に囲まれた範囲のこと
複数の要素を積み重ねることで、HTMLが構成されている

<h1>見出し1をココに記載します</h1>
<------------要素------------->

<h1>見出し1をココに記載します</h1>
    <-----要素の中身------>

属性

要素に情報を付け加える役割がある

属性値

どのような属性なのかを示す値

<meta charset="UTF-8">

charset → 属性
"UTF-8" → 属性値

コメントアウト

コメントアウトする場合は、で囲む

<!-- コメントアウト -->

<!-- コメントアウトは
複数行に適用される -->

HTMLの構造

HTMLは、head要素とbody要素で構成されている

<!DOCTYPE HTML>
<html>
    <head>
        <!-- こちらにhead要素の情報を記載する -->
    </head>
    <body>
        <!-- こちらにbody要素の情報を記載する -->
    </body>
</html>

DOCTYPE

「ドキュメントタイプ」の略
この文章がHTML文章であることを宣言する要素
終了タグはなく、<!DOCTYPE HTML>と記述する
この要素を記述しないと、レイアウトが崩れ、正しく表示がされないことがある

html要素

HTML文章の始まりと終わりを示す要素

head要素

ウェブサイトの情報や、装飾用のCSSファイルの情報を記載する
ブラウザ画面には表示されない

body要素

ブラウザ画面に表示したい情報を記載する

HTMLの記載方法

ファイルの記述

下記のように記載する

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
	  <header></header>
	  <main></main>
	  <footer></footer>
  </body>
</html>

属性

class属性

個別に名前を指定することができる
- 複数の要素に同じclassを付与できる
属性値をclass名という
class名をCSSのセレクタとして指定し、装飾する

<p class="message">
  1つ目の段落です。
</p>

id属性

特定のHTML要素のみに対して、名前を指定することができる
- 複数の要素に同じidを付与できない
属性値をid名という
id名をCSSのセレクタとして指定し、装飾する

<p id="fourth-message">
  4つ目の段落です。
</p>

class属性の記述

クラス名をスペースで区切ることによって、複数のクラス名を保持することができる

<!-- 下記div要素は、クラス「box」「blue」を保持している -->
<div class="box blue">
  <p>ボックスA</p>
</div>

<!-- 下記div要素は、クラス「box」「blue」とid「left」を保持している -->
<div class="box blue" id="left">
  <p>ボックスA</p>
</div>

HTMLの特徴

入れ子構造

入れ子構造にすることが可能である

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <div>
      <h1>見出しA</h1>
      <h1>見出しB</h1>
    </div>
  </body>
</html>

サンプルコードのhtml/index_nest.htmlを参照

親要素

ある要素の１つの上位の階層にある要素

小要素

親要素から見てその下位階層にある要素

孫要素

親要素から見てその2つ下位階層にある要素

左上に重力のある積み木

積み木の集合体のようなモノ
左上に重力がある
左上順に要素が収まる

ブロックレベル要素

1つのブロックレベル要素が、HTMLにおける積み木として存在

特徴は下記。

横幅いっぱいで表示される四角い箱である
箱の中にテキストなどが表示される
中身に関係なく横幅いっぱいになる
高さは中身によって変わる
縦並びで表示される

インライン要素

テキストの一部として扱われる要素であり、ブロック要素の中で使用され、文字の装飾などに使用される