catch-img

HTMLの基本的な構造と要素を解説。タグの使い方もマスターしよう

HTMLを学習するにあたっては、基本的な構造と要素から理解した方が習得も早く、深く理解できるようになります。社内でHPを運用している方、これから関わるかもしれない方にも参考になると思います。基礎構造となる3つのポイントと、タグの使い方について解説しますので、ぜひマスターしてみてください。

目次[非表示]

  1. 1.HTMLの基本構造について知ろう
    1. 1.1.マークアップしていく土台作り
      1. 1.1.1.マークアップとは
  2. 2.HTMLの基本構造となる3要素
    1. 2.1.全ての要素となるHTMLタグ
    2. 2.2.文書自体の情報となるheadタグ
      1. 2.2.1.文字コード(エンコード)の指定
    3. 2.3.文章の内容を記述するbodyタグ
      1. 2.3.1.bodyで使われるタグ
  3. 3.その他の主な基本構造となる要素
    1. 3.1.バージョン情報を宣言するDoctype宣言
    2. 3.2.情報を表すmetaタグ
    3. 3.3.表題を表すtitleタグ
  4. 4.階層構造についても理解しよう
    1. 4.1.親要素と子要素とは
    2. 4.2.先祖要素と子孫要素とは
    3. 4.3.兄弟要素
      1. 4.3.1.先行要素と後行要素
  5. 5.構造を理解してHTMLをマークアップしていこう

HTMLの基本構造について知ろう

Webサイトを構築していく上では、HTMLは必須と言えるプログラミング言語です。まずは、HTMLの基礎構造について具体的に知る前に、基礎構造とはどのようなものなのか、役割や仕組みについて理解しましょう。

マークアップしていく土台作り

HTMLでは、サイト内の文書にマークアップしていく作業を行います。基礎構造とは、まずはこのマークアップを行うための土台作りと考えれば良いでしょう。

HTMLのマークアップを家の建築に例えるなら、基礎構造とは、材木は何に使われるのか、空間は寝室なのか浴室なのかといったように、役割と定義付けをしていくためのものです。

例えば、HTML5を使うためには、以下の要素を必ず使う必要があります。

  • HTML5文書の宣言
  • htmlタグ
  • headタグ
  • bodyタグ
  • 文字コードを指定するmetaタグ

上記の要素がHTMLの基本構造と呼ばれるものです。それぞれに書く場所も決まっています。本記事では、これら要素について詳しく見ていくことになります。

マークアップとは

マークアップがどういうものかについても、軽くおさらいをしておきましょう。

マークアップとは、Webサイトを作成するにあたり、文書に「見出し」や「タイトル」などの意味付けをしていく作業のことです。そのためHTMLは、「マークアップ言語」と呼ばれます。

マークアップは、Webサイトを見やすくするという役割を持ちますが、SEO対策にも効果を発揮します。適切にマークアップすることで見やすい記事になると共に、検索サイトで上位表示することも可能になるのです。

■関連記事

  HTMLとCSSをマスターしよう。作成の基礎や学習方法を紹介 | Java・フロントエンド研修のジョブサポート HTMLとCSSは、Webサイトを作成するために開発されたプログラミング言語です。それぞれの書き方や関係性を知ることが、Webサイト作成の学習における第一歩といえるでしょう。作り方の基礎や大まかな流れ、おすすめの学習方法を紹介します Java・フロントエンド研修のジョブサポート

短期Java講座(入門5日・基礎10日)ー株式会社ジョブサポート

HTMLの基本構造となる3要素

HTMLの基本要素のうち、とくに基本構造において重要な役割を持つ3要素について解説します。書く場所も決まっているので、覚えておきましょう。

全ての要素となるHTMLタグ

ページがHTMLであることを宣言するために使われるタグです。このタグの中に、HTMLのコードを記述していくことになります。

<HTML></HTML>

この中に、HTMLに必要な全ての要素を記述していくことになるため、HTMLファイル内に記述する宣言以外の全てのタグの親要素となります。

Doctype宣言の下に、必ず記述することになるタグです。

文書自体の情報となるheadタグ

文書のヘッダ情報を表すために用いられるタグです。ヘッダ情報とは、そのWebページがどんな意味を持つのか、どんな言語が使われているのかなど、文書自体が持っている情報のことです。

<head></head>

ヘッダ情報がなくても、デザインを整えてWebページらしい見た目にすることはできますが、コンピューターやWebブラウザに正しく読み取ってもらうために、挿入した方が良いとされています。

例えばヘッダ情報に<H2>と記述すれば、それは大見出しと呼ばれる項目にあたるということになります。ヘッダ情報の中には、メタタグとリンクタグを主に使うことになります。

文字コード(エンコード)の指定

文字コードは、文字を機械が処理するために文字の種類に番号をつけたものです。「Shift_JIS」「UTF-8」「EUC-JP」などといったものが使われます

 HTML上でどの文字を使っているのかを明らかにするために指定する必要があります。仮に文字コードを誤って利用した場合、文字化けが起こってしまう可能性があるので注意が必要です。

<meta charset="UTF-8">

これは「UTF-8」を指定しています。特に理由がない場合は、「UTF-8」を使用するようにしましょう。

文章の内容を記述するbodyタグ

bodyタグとは、文書の内容を記述するために用いられます。bodyタグ内に記述した見出しや文章、画像などが実際のWebサイト上に表示されます。

<html> 
 <head></head>
 <body></body>
</html>

というように、headタグの下に記述します。bodyタグ内では、文字の色や画像の大きさの設定、リンクの色などの設定も可能です。

bodyで使われるタグ

bodyタグは性質上、さまざまなタグが使われます。その中で代表的なものを以下に記載しました。

  • <header>~</header>:ヘッダーを表示するためのタグで、サイトロゴやメニューを表示します。
  • <footer>~</footer>:サイトの最下部に位置するタグです。
  • <h1>~</h1>:「h+番号」で見出しを指定します。
  • <p>~</p>…文書内に段落を作るためのタグです。
  • <div>~</div>:区分(Division)タグです。囲んだ文章をグループ化するためのタグです。
  • <br>…改行(Break)タグです。※閉じタグは不要です。
  • <img>…画像を挿入するためのタグです。※閉じタグは不要です。

■関連記事

  初級エンジニアにおすすめのHTMLエディタ6選。搭載機能や使い方 | Java・フロントエンド研修のジョブサポート コーディングを行うにはIDE(総合開発環境)もしくはエディタを使うのが一般的です。HTMLのコーディングを行う上で初心者エンジニアでも使いやすいエディタの紹介と、エディタの選び方について解説していきます。 Java・フロントエンド研修のジョブサポート

通年開講プロエンジニア育成コース(Java1~3ヶ月)ー株式会社ジョブサポート

その他の主な基本構造となる要素

上記の基本的な要素以外の、基本構造において重要な要素について紹介します。HTMLを扱う上で覚えておきましょう。

バージョン情報を宣言するDoctype宣言

Webサイトを作るコードでは、まずそのコードがどんな文書なのかを明確にする必要があります。『Doctype宣言』とは、そのコードがどんな文書なのかを宣言する要素です。

この文書がHTMLであること、HTMLのバージョンを明記することを目的としています。HTML5のバージョンでは、以下の記述を最初に設置しましょう。

<! DOCTYPE html>

上記が、Doctype宣言の記述となります。

情報を表すmetaタグ

文書の中身は、キーワードやページの概要、見出しなど、さまざまな情報を含んでいます。この情報を表すために使われるのが『metaタグ』です。

metaタグは、以下のように記述します。

<meta 属性="属性値">

metaタグは、以下のような情報を持たせることも可能です。

<meta name="author" content="文書を作成した著作者の名前">

<meta name="description" content="文書の要説">

content属性などはSEO対策としても重要になります。meta要素をうまく設定することで、検索エンジンやブラウザにWebページを認識させることが可能です。

表題を表すtitleタグ

文書のタイトルをつけるのが『titleタグ』です。ブラウザで表示した場合、タイトルバーのところに表示されます。検索エンジンでは、検索結果やブックマークにも表示されるようになる重要なタグです。

titleタグは以下のように記述します。

<title>タイトル名</title>

titleタグはheadタグの中でしか使用できず、またHTML文書の中で一つきりしか入れてはいけないという決まりがあります。

<h1>のタグもタイトルと呼ばれることがありますが、基本的に別です。<h1>の文章と同じである必要はありません。

■関連記事

  HTMLはWebアプリの開発に必要?アプリ開発の工程や必要な知識 | Java・フロントエンド研修のジョブサポート Webサイトを作るための基礎プログラミング言語である「HTML(Hypertext Markup Language)」は、Webアプリ開発にも使われます。どのように用いるのかを開発工程と共に見ていきましょう。開発の基礎も解説します。 Java・フロントエンド研修のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

階層構造についても理解しよう

HTML文書に記載されているタグは、ある要素が別の要素を含み、それがまた別の要素を含む、という入れ子構造になっています。この関係は、親子関係に例えて表現されます。

階層構造における代表的な要素の関係性について、覚えておきましょう。

親要素と子要素とは

以下の要素について見ていきましょう。

<p>ここは<strong>テストに出るポイントなので</strong>よく覚えておきましょう</p>

この文では、<p>の中に<strong>という要素が入っています。この場合、直接<strong>タグを囲んでいる<p>を親要素、そして囲まれている<strong>を子要素と呼びます。

親要素と子要素は、この「直接」囲むという関係性の場合に呼ばれます。基本的に子要素が、親要素の中からはみ出すことはありません。

先祖要素と子孫要素とは

続いては以下の記述について見ていきましょう。

<div>
 <p>なぜ、傘を持っているのですか?</p>
 <p>天気予報で<strong>今日が雨</strong>だと言っていたからです</p>
</div>

<div>は<p>の親要素です。反対に、<p>は<div>の子要素です。また、<p>は<strong>にとって親要素であり、反対に<strong>は<p>の子要素となります。

そして、<div>にとって、<strong>は子要素の子要素です。このように、直結した下位の要素を「子孫要素」、逆に上位の要素を「先祖要素」と呼びます。

<div>は<strong>の「先祖要素」、<strong>は<div>の「子孫要素」です。

兄弟要素

「兄弟要素」とは、同じ親要素を持つ並列関係にある要素のことです。以下の記述に注目してください。

<div>
 <h2>おすすめのカフェテリアは?</h2>
 <p>裏通りにあるカフェテリアのコーヒーがとてもおいしいです</p>
</div>

<div>要素にとって、<h2>と<p>はそれぞれ子要素になります。そして、<h2>と<p>は、同じ親要素を持つ兄弟要素と呼ぶことができます。

加えて、<h2>は<p>より前に表示されているため、<h2>は<p>の兄、<p>は<h2>の弟と呼びます。

先行要素と後行要素

親要素や先祖要素のように囲う側の要素、また兄にあたる要素を「先行要素」、逆に子要素や子孫要素と弟要素のことを「後行要素」と呼びます。

■関連記事

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


構造を理解してHTMLをマークアップしていこう

HTMLを記述する上で、基本構造を理解することは重要です。必要となる要素は必ず記述しなければWebサイトの表示に不具合が生じる可能性もあります。必要要素は必ず記述するようにしましょう。

また、親要素や子要素などの入れ子構造についても、子要素は親要素をはみ出して記述することは基本的にできません。

基本構造を理解することで、何をどこに記述すれば良いのかがわかるようになり、綺麗で見やすいWebページを作成することができるようになります。

​​​​​​​

法人研修の実績2500名以上!若手、新人エンジニア採用後

Java研修はジョブサポートお任せ下さい


ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)を行っています。助成金を活用すれば費用負担を軽減して研修受講ができるのため若手、新人エンジニア採用計画と合わせてご検討下さい。

新人・若手エンジニアの基礎知識、ビジネススキルを強化

プロエンジニア育成コース(Java研修1~3ヶ月)


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。