HTML

【HTML5】HTMLの基本構造をわかりやすく解説!

ライター みさ

こんにちは。ライター「みさ」です。

今回は、【HTML】HTMLの基本構造について解説していきます。

※ HTML=[Hyper text Markup Language]

HTMLについて解説していきますが、少しCSSも含めて解説していきます

それでは、さっそく始めていきます。

HTMLの基本構造

まずは、HTMLの基本構造を解説します。

HTMLの基本構造は、以下の図に示した構図になっています。

HTMLの基本構造 【全体構造図】

HTMLの開始タグと終了タグで挟まれた部分タグ要素と呼びます。

HTMLのタグ要素

HTMLのタグ要素

それでは、従順に解説していきます。

文書型宣言文:【HTML5】[2020年1月現在]

HTMLの基本構造ですが、最初(文頭)には、文書型宣言文という決まりきったコードを記述しておきます。

文書型宣言=「HTMLがどのような決まりに基づいて書かれているか」を示すコードです。

つまり、文書型宣言=「今から、HTML●というルールに基づいてHTMLコードを書いていきますよ」という宣言をします。

そして、[2020年1月現在]におけるHTMLの最新版は【HTML5】なので、今から【HTML5】というルールに基づいてHTMLコードを書いていきますよという宣言をします。

文書型宣言文【HTML5】
<!DOCTYPE html>

以上で、文書型宣言文は完了です。

次に、lang属性を記述します。

lang属性の有無【HTMLの開始タグと終了タグ】

そもそもですが、HTMLは < > で囲まれたタグを使用して記述することになっています。

そして、「HTMLは、ココからココまでの範囲に書いています(書きます)よ」ということを、私たちがパソコンに指示を出さなければなりません。

つまり、ココからココまで=HTMLの開始タグ~HTMLの終了タグを記述する必要があるということです。

しかし、その書き方には2種類あります。それが、lang属性が有りのバージョンlang属性が無しのバージョンです。※どちらか一方のみ書きます。

lang属性 有り【HTMLの開始タグと終了タグ】

lang属性=ブラウザや検索エンジンに言語を知らせるコードです。

lang属性 有り


「今からHTMLを日本語(ja)対応で書きますよ」とパソコンに指示を出します。

<html lang=”ja”> ※HTML開始タグ
</html>      ※HTML終了タグ

lang属性 無し【HTMLの開始タグと終了タグ】

lang属性は無し=ブラウザや検索エンジンに言語を知らせないということです。

lang属性 無し

  • HTMLの開始タグ <html>
  • HTMLの終了タグ </html>

以上、 lang属性の有無【HTMLの開始タグと終了タグ】は完了です。

次に、 headタグを書いていきます。

headタグ

headタグは、Webページの全体の情報【head部分】タイトル特徴を記述します。

※headタグ:記述した内容が、ブラウザで表示されない部分もあります。

headタグ

<head> head開始タグ
</head>  head終了タグ

※headタグは、htmlタグの中に書くこと。

そして、headタグには、大きく分けて2種類あります。

headタグ ※2種類どちらも必須!

headタグには、metaタグタイトルタグの2種類があります。

※metaタグもタイトルタグも、必ず書きます。

  • metaタグ:Webページで使われている「文字コード」や「ページ情報」などを指定する文書を記述することができる。※これにより、文字化けなどを防止することができる。
  • タイトルタグ:Webページの「タイトル」を記述することができる。「

「文字コード」とは⁈

文字コード=文字の種類に番号を割り当てたもの,文字をコンピューターで処理したり通信したりするときに使われているもの


→ 文字コードの文字列データがコンピューターの処理や通信(送受信)されている。

日本語HTML文書の文字コードは、Microsoftで標準化した Shift_JIS である。

Shift_JIS (SJISコード)にしておけば、まずは間違いなさそうです

そして、metaタグとタイトルタグをそれぞれどのように書くのか⁈

metaタグ

metaタグは、<head>~</head>の中に書きます。

metaタグは、<head>のすぐ下に書いておきます。

metaタグ:文字コード

<mata charset=”Shift_JIS“>

※ 使用する文字コード:Shift_JIS (SJISコード)

metaタグ 文字コード

metaタグ:キーワード

<meta name=”keywords” content=”キーワード“>

※ キーワード:関連する言葉半角英数字カンマで区切って並べる。あまり多くならないようにすること。

※例:) 今回のキーワード nomad,pc,programming

metaタグ キーワード

metaタグ:ディスクリプション

<meta name=”description” content=”ディスクリプション“>

※ ディスクリプション:文書(コンテンツ)の説明であり、そのまま検索エンジンに掛けられるので、丁寧に明確に書くことが望ましい。また、Googleでは80文字以内とされている。

※例:) 今回のディスクリプション  プログラミング学習でノマド生活を手に入れる

metaタグ ディスクリプション

以上、ココまではロボットに情報収集される書き方(通常はコレでOK)です。

ところで、逆に、ロボットに情報収集してほしくない場合は、どのような記述をしれば良いのか⁈

ロボットに情報収集してほしくないときの記述

ロボットに情報収集してほしくない=検索エンジンを拒否する(インデックス化を拒否する)

<meta name=”ROBOTS” content=”NOINDEX, NOFOLLOW”>

以上、ココまでがmetaタグについて解説しました。

続いて、タイトルタグを解説していきます。

タイトルタグ

タイトルタグは、<head>~</head>の中に書きます。

タイトルタグは、<meta >のすぐ下に書いておきます。

タイトルタグ

<title>タイトル</title>

※タイトルタグ:Webページのタイトルを記述するタグ

※例:) 今回のタイトル 「プログラミングの鬼」

タイトルタグ

以上、タイトルタグが完了しました。

「HTML内にCSSを書きます」という宣言をするタグ 
<style type=”text/css”> </style>

<style type=”text/css”> </style> は、<head>~</head>の中に書きます。

<style type=”text/css”> </style>は、タイトルタグ<title></title> のすぐ下に書いておきます。

「HTML内にCSSを書きます」という宣言をするタグ

  <style type=”text/css”>

body{

}

</style>

例を挙げて、実装してみます。
※ ≪例≫ 背景色が、yellow(黄色)

≪例≫ 背景色が、yellow(黄色)

以上、headタグについてはココまで。

それでは次に、 bodyタグを書いていきます。

bodyタグ

bodyタグ(body部分)は、コンテンツの本体部分です。

※bodyタグ:主に、見出しタグ<h1><h2><h3><h4><h5>,段落タグ<p></p>,書式タグ,リストタグ,divタグなど。

bodyタグ

  • <body> body開始タグ
  • </body> body終了タグ

※bodyタグは、htmlタグの中に書きます。もっと言えば、bodyタグは、headタグのすぐ下に書いておきます。

bodyタグ

そして、bodyタグには、いくつかの種類があり、それらを<body>と</body>の間に記述していきます

body(ページ)の背景を変える[背景色,背景画像]

body(ページ)の背景を変えるとは言え、背景色 bgcolor または 背景画像 background の2つの方法があります。

「HTML内にCSSを書きます」という宣言をするタグ 
<style type=”text/css”> </style> を使います

背景色 : bgcolor 属性

background-color:;

色の記述方法は、半角アルファベット小文字 または HTMLカラーコードです。

HTML color codes

<style type=”text/css”>

body{

background-color:;

}

</style>

≪例≫ 背景色が、yellow(黄色)
背景画像 : background 属性

background:ファイル名;

<style type=”text/css”>

body{

background:ファイル名(.jpgなど);

}

</style>

画像の指定方法[絶対参照,相対参照]
ファイル名(.jpgなど)

  • 絶対参照:画像が保存されている場所を直接指定する。
  • 相対参照:画像が保存されている場所をHTMLファイルを基準に場所を指定する。

絶対参照

サーバー上のURL/フォルダー名/ファイル名

絶対参照の例

相対参照

相対参照は、大きく分けて4パターンです。

相対参照:4パターン

≪例≫

※ 画像ファイル「book.jpg」
※ 画像ファイルのフォルダ名「imgフォルダー」

※ HTMLファイル
※ HTMLファイルのフォルダ名「htmlフォルダー」

※親フォルダー

パターン①

./ book.jpg   画像ファイル「book.jpg」が、HTMLファイルと同じ場所に保存されている場合

パターン②

./ img/ book.jpg   画像ファイル「book.jpg」が、HTMLファイルと同じ場所にある imgフォルダ-に保存されている場合

パターン③

../ book.jpg 画像ファイルbook.jpgは親フォルダーの中に保存されている」と「HTMLファイルは、htmlフォルダ-の中に保存されているが、その上の階層の親フォルダ-に保存されていること」の親フォルダーが同じ場合

パターン④

../img/ book.jpg  画像ファイルbook.jpgとHTMLファイルが、どちらも別のフォルダーに保存されている場合

相対参照 4パターン 例

文字(フォント font)の種類,文字(フォント font)サイズを指定する

文字(フォント font)の種類やサイズなどを指定していきます。

「HTML内にCSSを書きます」という宣言をするタグ 
<style type=”text/css”> </style> を使います

文字(フォント)の種類,文字(フォント)サイズ

font-size: ;font-family: ;は、必須です。

  • font-style: ; フォントの「書体」
  • font-variant: ; フォントを「スモールキャップにする」
  • font-weight: ; フォントの「太さ」
  • font-size: ; フォントの「サイズ」
  • font-size-adjust: ; フォントの「サイズを調整する」
  • font-stretch: ; フォントを「縦長や横長にする」
  • font-height: ; フォントの「高さ」
  • font-family: ; フォントの「種類」

<style type=”text/css”>

body{

font-style: ;
font-variant: ;
font-weight: ;
font-size: ;
font-height: ;
font-family: ;

}

</style>

≪例≫ 

large 大きい (※sizeは「px」表示でもOK)  font-size: large;
serif 明朝系                 font-family:serif;

文字(フォント font)の種類やサイズなどを指定  例

見出しタグ <h1><h2><h3><h4><h5>

見出しタグ

  • 見出し1【最も大きな見出し】<h1></h1>
  • 見出し2【中見出し(大)】  <h2></h2>
  • 見出し3【中見出し(中)】  <h3></h3>
  • 見出し4【中見出し(小)】  <h4></h4>
  • 見出し5【最も小さな見出し】<h5></h5>

※注意:) 見出し5【最も小さな見出し】<h5></h5>と、ここでは決めていますが、見出し6や見出し7などもっと小さな見出しも設定できないことはないはずですが、よく使用する見出しは、せいぜい見出し5までです。

見出しタグ  例:) h2タグとh3タグ

段落タグ <p></p>

段落タグ(pタグ)

  • <p>  p開始タグ
  • </p> p終了タグ

pタグは、Webページの本文を記述するときに使用します。

<p>~</p>で囲まれた部分は、1つの段落(範囲)としてみなされます。

pタグ

補足:) pタグの「空白」部分をつくる

pタグの「空白」部分をつくる

書式タグ【下線,斜体,太字】※補足:) 強調タグ

下線タグ 

  • <u>  下線開始タグ
  • </u> 下線終了タグ
下線タグ <u></u>

斜体タグ

  • <i>  斜体開始タグ
  • </i> 斜体終了タグ
斜体タグ <i></i>

太字タグ ※ただ単に、文字を太くするだけ。

  • <b>  太字開始タグ
  • </b> 太字終了タグ
太字タグ <b></b>

補足:) 強調タグ【strongタグ,emタグ】

強調タグ【strongタグ,emタグ】は、重要な言葉(キーワード)を指定するときに使います。

  • 強調タグ <strong></stromg> :太字になる。
  • 強調タグ <em></em> :斜体になる。
強調タグ

取り消し線タグ <s></s>

取り消し線タグ

  • <s>  取り消し線開始タグ
  • </s> 取り消し線終了タグ

取り消し線タグは、文字そのものに取り消し線を引きたいときに使用します。

取り消し線タグ <s></s>

空間(空白)タグ <pre></pre>

空間(空白)タグ

  • <pre>  空間開始タグ
  • </pre> 空間終了タグ
空間(空白)タグ

リストタグ <li></li>【順不同ulタグ,従順の番号付きolタグ】

リストタグ<li></li>を使って、リスト=箇条書きをします。

リスタグ<li></li>を使って記述するときの方法は、大きく分けると2種類【順不同ulタグ,従順の番号付きolタグ】です。

  • 順不同ul タグ】 <ul></ul>
  • 従順の番号付きol タグ】 <ol></ol>

それでは、上記2種類それぞれを実際に使ってみます。

【順不同ul タグ】 <ul></ul>

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

※ <li></li>の数は、いくつでもOKです。

【順不同ul タグ】 例:)
【順不同ul タグ】 <ul></ul>
※リストマーク spuare

※※リストマーク spuare 「■■■」四角の形

<ul style=”list-style-type: square”>
     <li>●●●</li>
     <li>▲▲▲▲▲▲</li> 
    <li>♦♦♦♦</li>
</ul>

【順不同ul タグ】 <ul></ul>
※リストマーク spuare

【従順の番号付きol タグ】 <ol></ol> ※1.2.3…

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

※ <li></li>の数は、いくつでもOKです。

【従順の番号付きol タグ】 例:)
【従順の番号付きol タグ】
※リストマーク upper-alpha

※リストマーク upper-alpha 「A.B.C.…」アルファベット

<ol style=”list-style-type: upper-alpha”>
     <li>●●●</li>
    <li>▲▲▲▲</li>  
  <li>■■■■■</li>
</ol>

【従順の番号付きol タグ】
※リストマーク upper-alpha

表タグ(テーブルタグ) <table></table>

改行タグ <br> ※終了タグは、無いです。

改行タグ <br>

段落pタグの表示途中で強制的に改行をしたい場合<br>を使います。※終了タグは、無いです。

brタグ  例:)

水平線タグ <hr> ※終了タグは、無いです。

水平線タグ <hr>

Webページにメリハリをつけるために(話題の区切りを表すために)水平線を挿入する場合があります。※終了タグは、無いです。

hrタグ

アンカータグ <a></a>

アンカータグ <a></a>

アンカータグ <a></a>は、リンクを貼る(リンクの飛び先を指定する)際に使用します。

アンカー=船の「錨(イカリ)」という意味です。

  • href 属性:リンクの飛び先を指定する属性。
  • id属性:同じページ内である特定部分に名前を付ける属性。

href 属性

≪例≫
リンクの飛び先を「https://www.google.co.jp/」にしてみます。

<a href=”https://www.google.co.jp“>Google検索</a>

href 属性  例

上記のようにプレビュー(実装)で表示されたほう[右画面]のGoogle検索をクリックして、リンクの飛び先がGoogleになっていればOKです。

id属性
同じページ内である特定部分に名前を付けて、同じページ内でリンクをさせたいときに使う。

≪例≫
「これはid属性である」という部分をindexというid属性として名付ける→href属性の#indexの部分[ここはID属性の説明文]をクリックすると、id属性の部分(index:これはid属性である)へ飛ぶことができる。


<a href=”#index”>ここはID属性の説明文</a>  
 <br><br><br><br><br>
 <br><br><br><br><br>
<p id=”index>これはid属性である</p>

id属性 例

上記のようにプレビュー(実装)で表示されたほう[右画面]の[ここはID属性の説明文]をクリックして、リンクの飛び先が[これはid属性である]になっていればOKです。

画像タグ <img>

画像タグ <img>

  • src属性画像の挿入
  • src属性alt属性画像の挿入その代替テキスト

※ alt属性【代替テキスト】:画像が表示されない場合でも、閲覧者に画像の内容を伝えることができる説明文。

≪例≫ ※画像のファイル名「book.jpg」の場合
<img src=”book.jpg“>

≪例≫ ※画像のファイル名「book.jpg」の場合
<img src=”book.jpg alt=”おすすめの本>

  • width属性(横幅)とheight属性(高さ):【画像のサイズ】

≪例≫
※画像のファイル名「book.jpg」の場合
※画像の[横幅を150px,高さを50px]
<img src=”book.jpg” width=”150px” height=”50px”>

≪例≫
※画像のファイル名「book.jpg」の場合
※画像の[横幅を150px,高さを50px]
<img src=”book.jpg” alt=”おすすめの本”
width=”150px” height=”50px”>

  • align属性【回り込み】
  • clear属性【回り込みを解除する】

align属性【回り込み】

  • align=”left” [画像が左側にある、右側にテキストが回り込む]
  • align=”right” [画像が右側にある、左側にテキストが回り込む]
align属性【回り込み】

≪例≫
※画像のファイル名「book.jpg」の場合
※画像の[横幅を150px,高さを50px]
align=”left” [画像が左側にある、右側にテキストが回り込む]
<img src=”book.jpg” alt=”おすすめの本”
width=”150px” height=”50px” align=”left”>

clear属性【回り込みを解除する】

【回り込みを解除する】
[回り込みを解除したい場所]に<br>タグにclear属性を指定して記述する。

≪例≫
※画像のファイル名「book.jpg」の場合
※画像の[横幅を150px,高さを50px]
※align=”left” [画像が左側にある、右側にテキストが回り込む]
[回り込みを解除したい場所]left
<img src=”book.jpg” alt=”おすすめの本”
width=”150px” height=”50px” align=”left“>
<br clear=”left“>

【回り込みを解除する】の種類

  • left : 「左側にある画像」に対して解除する。
  • right : 「右側にある画像」に対して解除する。
  • all : 「両側にある画像」に対して解除する。
  • none : 「回り込みを解除しない(初期値)」。
  • vspace属性【画像の上下の余白】
  • hspace属性【画像の左右の余白】

≪例≫
※画像のファイル名「book.jpg」の場合
vspace属性【画像の上下の余白】:10pxの場合
<img src=”book.jpg” vspace=”10px>

≪例≫
※画像のファイル名「book.jpg」の場合
※画像の[横幅を150px,高さを50px]
※align=”left” [画像が左側にある、右側にテキストが回り込む]
hspace属性【画像の左右の余白】:20pxの場合
<img src=”book.jpg” alt=”おすすめの本”
width=”150px” height=”50px” align=”left” hspace=”20px>

画像の形式

Webページで使用する画像の形式は、(基本的には)3種類です。

  • JPEG【拡張子 .jpg 】
  • PNG【拡張子 .png 】
  • GIF【拡張子 .gif 】

※注意点:) PNG形式は、わりと新しいようです。

divタグ <div></div>

divタグ <div></div>
ひとかたまりの範囲(グループとして、まとめる)として定義されています。

  • divには、特別な意味はありません。
  • divは、とても便利なタグです。
  • divは、他に適切な要素が無いときの最終手段として使用されます。
  • cssを適用するためのコンテナ要素divとして使用されることが多いです。
  • divよりも適切とされそうな要素:[HTML5.0において]<article>,<aside>,<nav>,<section>など。

≪例≫

divタグで囲んだ背景色を青色(blue)にします。

<div style=”background-color:blue;”> </div>

divタグの記述方法 例
文字(フォント)の色の記述方法

【HTML】文字(フォント)の色の記述方法

≪例≫

<font color=”#ffffff“>   </font>

※ #ffffff (白色)

【HTML】文字(フォント)の色の記述方法 例

以上、【HTML】HTMLの基本構造を解説しました。

それでは、さいごにまとめます。

まとめ

ライター「みさ」

【HTML】HTMLの基本構造

まとめ(再結論)

HTMLだけでも、把握しなければならないことはとても多いですが、1つ1つ実装していくしかないです。

今回の記事では、私ライター「みさ」が勉強したことをアウトプットしました。

そして、HTMLだけではなかなか装飾などができないので→CSSがやはり必須です。HTMLと同時にCSSを勉強できれば→最も理解が早まります。しかし、HTMLとCSSを同時に学ぶのは、なかなか大変です。

今回は、HTMLについて解説していきましたが、少しCSSも含めて解説しました

以上、今回はココまで。

さいごまでご覧いただき、ありがとうございました。

ABOUT ME
みさ
当サイト運営者・ライターをしています。