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


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

「HTMLを勉強しはじめたけれど、何のために書いているのかわからない…」

「WordPressで編集するときに使うHTMLタグの意味を知りたい!」

という方のために、この記事ではHTMLの必要性や役割を、初歩からくわしく解説します。

WordPressなどのWebサービスを使うとき役立つタグも画像で解説していますので、ぜひご覧になってください。

目次
  1. HTMLとは
  2. なぜHTMLを使うのか
  3. HTMLだけでWebページを作れる?
  4. HTML5ってなに?
  5. <初歩の初歩>HTMLタグを解説!
  6. タグの書き方
  7. pタグ:段落
  8. hタグ:見出し
  9. imgタグ: 画像
  10. aタグ:リンク
  11. リストのタグ(olタグ/ulタグ)
  12. 汎用的なタグ(divタグ/spanタグ)
  13. まとめ

HTMLとは

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

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

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

なぜHTMLを使うのか

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

[HTMLを使う理由]

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

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

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

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

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

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

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

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

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

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

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

言語名 言語の種類 役割
HTML マークアップ言語 Webページの構造を記述する
CSS スタイルシート言語 HTMLで書かれた文書の見た目を整える
例)文書全体のレイアウトを揃える、文字に色をつける
JavaScript プログラミング言語 ユーザーの操作に応じてHTMLやCSSを変化させ、動きのあるWebページを作る
例)ポップアップウインドウで注意を引く、画像を次々と表示する

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タグ"を例に解説します。

image

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

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

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

image

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

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

pタグ:段落

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

[pタグの書き方]

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

[ブラウザでの表示]

image

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>

[ブラウザでの表示]

image

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

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

imgタグ: 画像

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

[imgタグの書き方]

<img src="cat.jpg">

[ブラウザでの表示]

image

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

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

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

aタグ:リンク

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

[aタグの書き方]

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

[ブラウザでの表示]

image

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

リンク先 href属性値
他のWebサイト URL(http://〜ではじまるもの)
同じWebサイト内 htmlファイル名(xxxx.html)

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>

[ブラウザでの表示]

image

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

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

汎用的なタグ(divタグ/spanタグ)

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

タグ名 役割
div コンテンツを分割するためのタグ。
他のコンテンツどうしをまとめたり、CSSで高さや幅、マージンを付けて画面をレイアウトしたりする。
span 行内の一部分に指定するためのタグ。
CSSで書式(文字の大きさや太さ、背景色など)を指定するために使う。

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

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

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

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

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

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

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

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

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

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

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


関連記事

鳥飼千愛
この記事を書いた人
鳥飼千愛
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp