【超初心者向け】HTMLを初歩から解説！

HTMLとは

HTML（Hyper Text Markup Language）は、Webページの文書構造を書くための言語です。

文書の"骨格"と考えればわかりやすいでしょう。

これからHTMLの概要について、ひとつずつ解説していきますね。

なぜHTMLを使うのか

はじめに、なぜWebページをHTMLで書く必要があるか説明します。

[HTMLを使う理由]

• Webページの構造が明確になり、Webブラウザや検索エンジンが解釈しやすくなる
• 文書を相互にリンクでつなげて使える

HTMLのように文書を記述するための言語は、マークアップ言語と呼ばれます。マークアップ言語の目的は文字や画像にタグを使って印を付け、文書の骨組みをはっきりさせることです。

人間が文書を読めば構造を理解できますが、コンピューターは文書構造を解釈できません。そこでコンピューターにも理解できる言葉を使って指示を出す必要があります。

このとき、コンピュータと人間の共通言語として登場するのがマークアップ言語です。

またHTMLの特徴としてリンクで文書をつなげる機能があり、関連した情報を見るのに役立ちます。

もともとHTMLは研究者が論文と資料とをリンクでひもづけ、どのコンピューターからでも閲覧を可能にするために考案されました。

HTMLでは文書のほかに、画像やPDFファイル、メールアドレスなどもリンクできます。

HTMLだけでWebページを作れる？

HTMLだけでもWebページは作れますが、読みにくいページになってしまいます。見た目や使いごこちを整えるためには、さらにCSSやJavaScriptが必要です。

文書をマークアップすればコンピューターにとっては理解しやすくなりますが、それだけでは人間が読みやすいWebページにはなりません。

以下にHTMLとCSS、JavaScriptの役割を一覧にしました。

HTMLという骨組みがなければ、CSSやJavaScriptは使えません。マークアップはCSSやJavaScriptの利用も考慮しておこないます。

HTML5ってなに？

HTML5の"5"はHTMLのバージョンをあらわす数字で、HTML5が最新バージョンです。バージョンによって使えるタグや、タグの書式に少しずつ違いがあります。

[現在使われているHTMLのバージョン]

• HTML5
• XHTML1.0

XMTML1.0からHTML5へのバージョンアップで変わった点は、文書構造の解釈を深めるためのタグや、動画や音声に対応するタグが増えたことです。

現在Webサイトの9割以上※がHTML5でマークアップされており、どのWebブラウザでも表示できます。

新しくWebサイトを作るときには、HTML5でマークアップするのが最良の選択肢です。

※W3Techsによる2020年11月現在のデータになります。

<初歩の初歩>HTMLタグを解説！

それでは、HTMLでよく使うタグについて解説します！

タグの書き方

さまざまなタグについて説明する前に、まずはタグの書き方を見ていきましょう。

文章の段落を指定する"pタグ"を例に解説します。

タグは<>のなかに書いていきます。意味づけしたい内容を開始タグと終了タグではさみマークアップするのが決まりです。終了タグには/（スラッシュ）をつけます。

属性とはタグに追加する情報です。ここではpタグにclassという属性をつけ、CSSで書式などを指定できるようにします。

属性値は属性で指定する値を指し、"（ダブルクォーテーション）で囲みます。上記の例ではCSSで書式を整えるため、固有の名前"sample"を指定しました。

imgタグなど一部のタグには、終了タグが必要ありません。src属性の属性値には、画像のファイル名を指定します。

このように属性値は、属性の種類によって指定する内容に違いがあるのです。

pタグ：段落

文章を段落単位で指定するためのタグがpタグです。

[pタグの書き方]

<p>pタグは段落を指定するタグです。</p>

[ブラウザでの表示]

pタグでマークアップすると、次の段落との間に1行あけて表示されます。

段落の途中で改行したいときはpタグでマークアップされた内容のなかで、brタグ（改行タグ）を使います。

参考記事：HTMLの <p>タグと <br>タグで改行する方法を詳しく解説

hタグ：見出し

hタグは章ごとの見出しをあらわし、レベルによってh1〜h6まで6段階に分かれます。

[hタグの書き方]

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

[ブラウザでの表示]

h1タグはそのページのテーマを指定するためのタグで、1ページにつき一度しか使えません。

h2〜h6タグは何度でも使えますが、まずはh1タグからはじめて次にh2…というように、上から階層になるよう使うのがルールです。

imgタグ： 画像

画像を表示するときに使うのがimgタグです。

[imgタグの書き方]

<img src="cat.jpg">

[ブラウザでの表示]

単独で使えるため、終了タグは必要ありません。

imgタグを使うときにはsrc属性をつけ、属性値には画像のファイル名を指定します。

参考記事：【初心者向け】HTMLで画像を配置する様々な方法

aタグ：リンク

他のWebページへ移動するリンク（ハイパーリンク）を作るとき、aタグを使います。

[aタグの書き方]

<a href="http://google.com">Google</a>へのリンク

[ブラウザでの表示]

aタグの利用にはhref属性が必須で、リンク先を属性値に指定します。リンク先の指定パターンは以下のとおりです。

imgタグをaタグではさむと、画像にリンクをつけることもできます。

参考記事：【初心者向け】HTMLで画像にリンクを付ける方法

リストのタグ（olタグ/ulタグ）

リスト（箇条書き）をマークアップするタグが、olタグとulタグです。

[ol/ulタグの書き方]

<ol>
    <li>ファイルをダウンロードする</li>
    <li>解凍してフォルダを開く</li>
    <li>install.exeを実行する</li>
</ol>

<ul>
    <li>Google</li>
    <li>Amazon</li>
    <li>Microsoft</li>
</ul>

[ブラウザでの表示]

順序付きリスト（数字つき）にはolタグ、順序なしリスト（箇条書き）にはulタグを使います。

箇条書きにしたい部分を、さらにliタグでマークアップします。

汎用的なタグ（divタグ/spanタグ）

タグのなかにはdivタグやspanタグのように、文書構造に関係しないタグもあります。用途はコンテンツを入れるための入れ物（コンテナ）です。

どちらのタグもclass属性を追加するとCSSを使えるようになり、Webページの見た目を調整するために活躍します。

まとめ

HTMLの概要と、初歩的なタグについて解説してきました。

仕事でホームページを作成する機会がなくても、趣味でWordPressやカラーミーショップといったWebサービスを使うときにHTMLが役立ちます。

Webサーバーがなくても、テキストエディターとWebブラウザがあればHTMLを書く練習はできます。テキストエディターには有料の製品もありますが、基本的には無料のエディターで十分です。

演習に役立つ初心者向けの記事をご紹介しますので、参考になさってください。

参考記事1：HTML5とは？初心者向けに特徴や書き方もあわせて解説！

参考記事2：初心者向け！HTMLの特徴とすぐ使えるコード7選

HTMLに慣れてWebサイトの構築に興味がわいたら、CodeCampでWebデザインを学んでみませんか？

CSSやJavaScriptなどのフロントエンド技術と合わせ、マンツーマンでしっかり習得できます。

無料体験レッスンをおこなっておりますので、お気軽にご相談ください。