公開日: 2017年04月18日

これさえ見ればOK！今から始める人のためのHTMLの書き方とは？

HTMLの構造はわかるけれど、実際にはどうやって書けばいいのかわからない人も多いかと思います。HTMLを学ぶ上で、実際に書くことはとても大事です。そこで、HTMLをどのように書けばいいのか、０から詳しく解説していきます。

HTMLのサンプルもありますので、一緒に書いてみませんか？HTMLは、思っているよりも、簡単に記述できますよ。

HTMLの基本構造
タグ
要素とは
属性と値
実際にHTMLを書いてみよう
<!DOCTYPE html>タグ
```<head>```要素
```<body>```要素
ブラウザでの表示
まとめ

HTMLの基本構造

まず、HTMLの基本構造を紹介していきます。HTMLで使われる単語は、英語がベースになっています。各単語の英語での意味を理解するようにすると、より理解が早くなるかと思います！

タグは、「<」と「>」で囲まれた半角英数からなります。HTMLは、このタグを使って記述していきます。タグは、基本的に開始タグ<>と終了タグ</>のセットで使います。終了タグは、終了を表す「/（スラッシュ）」を付けます。タグは全角文字を使うと正しく表示されないので、注意してください。大文字と小文字どちらで記述しても構いませんが、最近は小文字で入力するのが主流となっています。

タグには、下記のような種類があります。

<h1> 見出し　</h1>

見出しタグ。半角英字のhは、「header」を表します。hの後の数字で、見出しの順序と文字の大きさを指定します。

<title> タイトル　</title>

タイトルタグ。タイトルを指定します。

<ul> 箇条書き</ul>

箇条書きを指定するタグ。ulは、unordered list（順不同のリスト）という意味で、このタグの中で

タグを使ってリストを作ります。

要素とは

HTMLは、入れ子構造で作られています。この入れ子構造もまた、タグで指定していきます。タグで指定する入れ子構造のことを、「要素(element)」と呼びます。

例えば、html要素という箱の中に、head要素とbody要素という箱が入っています。そして、head要素の中には、文章のタイトルを指定するtitle要素が入ります。body要素の中には文章の見出しを指定するh要素や、文章の段落を指定するp要素、箇条書きがある場合はul要素が入ります。

このように、要素を指定していき、HTML構造を作っていくことになります。

属性と値

先ほど、タグで色を指定することができると紹介しました。タグで色を指定するには、属性(attribute)の機能を使うことになります。属性は、タグの効果を指定したり、具体的な指示を付け加えるために使われます。

属性は、下記のように指定します。

<font color="red"> サンプル </font>

colorという色の属性を、属性値で指定します。ここでは、属性値が、redに指定されています。属性値が、英数字やハイフン(-)、ピリオド(.)、アンダースコア(_)、コロン(:)以外の文字の場合は、" (ダブルクォーテーション）か ' (シングルクォーテーション）で囲むようにします。属性と属性値は、イコールで繋ぎます。

属性を使えば、より豊かにHTMLを表現することができるようになります。

実際にHTMLを書いてみよう

それでは、今回紹介したタグを使って、実際にHTMLを書いてみましょう。HTMLは、メモ帳を使っても記述できますが、HTMLの記述に便利なエディタがたくさんあります。私はAtomを使っていますが、使いやすいエディタを探してみてください。

それでは、下記がHTMLのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> タイトル </title>
</head>

<body>
<h1>見出し１</h1>
<p>文章１</p>

<h2>見出し２</h2>
<p>文章２</p>

</body>
</html>

<!DOCTYPE html>タグ

このタグは、HTMLが、どのバージョンを使って書かれているかを宣言しています。HTMLを書くにあたって、必ず一番上に指定します。ここでは、HTML5のバージョンを使っていることを意味しています。

また、 <html lang="ja">のタグで、要素内で使われる言語は日本語であることを指定しています。

`<head>`要素

head要素内には、htmlファイルのヘッダー情報を入れていきます。ヘッダー情報では、ファイルのタイトルや、メタ情報を記入します。

<meta charset=“UTF-8”>　ここでは、数字の「０」と「１」だけを扱えるパソコンが文字を読み込むために使う、「文字コード」を設定しました。UTF-8とは、現在主流になっている多言語を読み込める文字コードです。

<title>　タイトルを記入します。タイトルは、ブラウザ上のタブに表示されます

`<body>`要素

body要素は、ブラウザで実際に見える部分です。ここに、見出しや文章、画像を指定するタグを入れていきます。

<h1><h2> 見出しを指定しています。<h1>より<h2>の方が文字が小さく表示されます。

<p> パラグラフ(paragraph)を意味し、文章の段落を指定します。

ブラウザでの表示

記入したHTMLを実際にブラウザで表示させてみましょう！上記のコードをエディタに記入したら、ファイルを保存します。保存する際に、拡張子を「○○.html」にしてください。今回は、「index.html」としてデスクトップに保存させます。

デスクトップに保存されたHTMLファイルを、お使いのブラウザ(google chromeやfirefox）などにドラッグ&ドロップをすれば、HTMLが表示されます。また、デスクトップに保存されたHTMLを右クリックをし、「ファイルを開く」→「ブラウザ(google chromeやfirefoxなど）」を選択することで、ファイルを開くこともできます。