HTML

HTMLの基礎知識〜書き方とタグの使い方

HTMLはウェブデザインの基本・骨組みとなる要素です。

HTMLの書き方の基本（文法・タグの使い方）を整理してまとめました。

HTMLとは

HTML(HyperText Markup Language)は、webページを構成する言語の一つで、検索エンジンがウェブページの構造を把握して解析したり、ブラウザがウェブページ内の各要素の意味を理解して閲覧しやすいように表示しているウェブデザインの基本・骨組みとなる要素です。

HTMLをブラウザに表示（HTMLサイト作成）方法

HTMLサイトは、最低限以下の要素を指定するとブラウザに表示されます。


<!DOCTYPE html>
<html>
<head>
<title>サイトのタイトル</title>

ファイル・スクリプトの読み込みや、様々なメタ情報を記述
（サイトには記載されない）

<meta charset="UTF-8">
</head>
<body>
<h1>見出し１</h1>
<p>サイトコンテンツ</p>

サイトで実際に表示される内容

</body>
</html>

  • DOCTYPE宣言：HTMLサイトの文頭に書く記述で、文書がHTMLであること、次にはじまるHTML文書（HTMLソース）がどのバージョンを利用して、どのDTD（文書型定義）に従って記述されているかをブラウザに伝えるためのもの
  • <html>〜</html>：HTMLであることを宣言するタグ
  • <head>〜</head>：ページの基本情報を入れるタグ（ブラウザには表示されない）
  • <title>〜</title>：ページのタイトルを指定するタグ
  • <meta charset="UTF-8">：文字コードを指定するタグ（日本語でサイトを作る場合はこのコードを使います）
  • <body>〜</body>：ブラウザに表示される内容を入れるタグ

HTMLの書き方（基本文法）

HTMLの基本文法は、表示させたい文章や写真などのコンテンツを『タグ』で挟む（終了タグ名の前には/(スラッシュ）をつける）だけです。


<タグ名>コンテンツ</タグ名>

HTML『タグ』には、たくさんの種類があり、「どのタグにはさまれるか」によってタグの中身の役割が変わり、タグではさまれたコンテンツとタグを含めた塊を「要素」と呼びます。

HTMLでは、タグの中にタグを記載していく「入れ子構造」になっていますが、タグの種類によってい構造ルールが異なります。

また、HTML開始タグの中に情報（属性）を書くこともできます。

よく使うHTMLタグの書き方〜bodyタグ内

  • <p>~</p>：段落を作るタグ
  • <br>：改行を作るタグ
    改行したい場所に記載（終了タグなし）
  • <h○>~</h○>：h1〜h6まで見出しを作るタグ
    h1が1番大きい見出しになり数字が大きくなるほど小さい見出しとして階層を守って使う
  • <img src="画像ファイル名" alt="代替テキスト" />：画像（JPG・PNG・GIFのみ）を貼るタグ
    他のHTMLタグと少し書き方の法則が異なる
  • <a href="リンク先のURL">~</a>：リンクを作るタグ
  • <li>~</li>：リスト項目を作るタグ
  • <ul>~</ul>：リスト項目の前後を囲んでリストのかたまりを作るタグ
  • <ol>~</ol>：リスト項目の前後を囲んでリストに番号をつけるタグ
  • <!- -〇〇...- ->：ウェブページには表示させたくないメモ書きができるタグ

divとspan〜デザインのためのまとまりを作る

divタグとspanタグはコードのまとまりを作ります。

divタグとspanタグ自体に意味はないので、Classで名前をつけて特定のまとまりのデザインを指定するために使います。

  • <div class=”好きな名前”>~</div>：ブロック要素（まとまりの前後に改行が入る）
    CSSで（width）と高さ（height）の指定ができる
  • <span class=”好きな名前”>~</span>：インライン要素（まとまりの前後に改行が入らない）
    CSSで（width）と高さ（height）は指定しても反映されない

divタグの中にspanタグを入れることはよくありますが、spanタグの中にdivタグを入れることは基本的にありません。

  • <div >~</div>：なんでも入れられる（div、p、h1～h6、ul、dl、ol、li、span、img、strong、em…など）
  • <span>~</span>：span、a、imgなど

spanタグは主に文字のまとまりを作る時に使い、divタグはいろんなタグを含む大きなまとまりを作る時に使うとイメージしておくといいと思います。

divタグとspanタグの使う回数に制限はありませんが、できるだけ少なくまとめられるとコードがキレイでスマートです。

classとid〜デザインのための範囲指定

classとidは、HTML開始タグ内に書く属性のひとつで、特定箇所のデザインを指定できます。

id名とclass名（””の中）は自由に設定できますが、先頭に数字は使えないのでアルファベットから始まる名称にしましょう。

  • <タグ名 class=”好きな名前”>〜<タグ名>
  • <タグ名 id=”好きな名前”>〜<タグ名>

CSSの基本の書き方はこちら

-HTML