【HTML入門】イラスト付き解説とサンプルの練習で基本を身につける

htmlでよく使うタグを実際に書いてみよう!

それではhtmlは書いてみましょう。覚える一番の近道は実際に手を動かすこと。

htmlタグの中でも「とりあえずこれだけ知っておけばwebサイトをつくることができる」というタグを厳選しました。一つ一つマスターできるようになっているので頑張りましょう!

pタグで段落(≒文章)を追加する

読み ピータグ
用途 段落の追加、通常文章の追加
意味 paragraph(パラグラフ)

<p>〜</p>はwebページの文章を記入するときによく用いられるタグです。囲った部分は段落(ひとまとまりの文章)として扱われます。

pタグの例

わたしたち人間は、文章を見ることで「その文章のどこからどこまでがひとまとまりになっているか」を判断することができますが、webブラウザはそうはいきません。

<p>タグで囲うことによって、どこまでがひとまとまりの段落かをwebブラウザに伝えることができます。

brタグで改行する

読み ブレーク
用途 改行の指定
意味 break

brタグは文章を改行する時に利用します。文章は表示領域の幅を超えると自動で折り返しされますが、折り返される位置がバラバラなので文字の読みやすさに欠けることがあります。そんな時にこのbrタグで改行を行います。

pでも改行できるがコンピューターはそれぞれ別の段落として認識する

pタグは段落を入れるタグなので文章pタグで囲いなおすことでも改行は可能です。

ですが、3行に渡ってpタグで囲うことにより本来ひとまとまりであるべき文章が3つのまとまりに分割されてしまうのでこの書き方は適切ではありません。

改行を入れたい箇所にbrを入れbrに終了タグは書かない

そこで改行をしたい箇所に<br>と書きます。brタグは特殊なタグで終了タグがないことを覚えておきましょう。

brで使うことでpタグは1つで済み、文章を適切に改行することができます。

strongタグで文章を強調する

読み ストロング
用途 文章の一部を強調
意味 strong

strongタグは文章の一部を強調したい時に利用します。強調したい文字を<strong>〜〜</strong>で囲うことでその箇所が太字で表示されます。

h1〜h6で見出しを定義する

読み エイチ〜〜(ワンやツーなど)
用途 見出しを定義
意味 heading

h1〜h6タグはwebページ内の見出しを定義するタグです。そもそも「見出し」が何かわからない方は本の目次をイメージしてみてください。

見出しは本の目次にたとえる

本を書くときは情報を整理するために必ず章立てや目次の作成が必要ですよね。webページでもそれは同じです。コンテンツ(内容)を作っていく過程で章立てをし文章を整理します。

hxタグの使い分け

  • h1:ページ内で最も伝えたい内容
  • h2:h1で伝えたい内容を大きくグループ分けした時の見出し
  • h3:h2で伝えたい内容をさらにグループ分けした時の見出し
  • h4〜h6:略

本の目次同様、章が深くなればなるほど(h1〜h6と数字が増えるほど)情報が具体的になっていきます。

このようにhタグ(見出し)を用いてコンテンツをグループ化することで、検索エンジンに対して適切にwebページの情報を伝えることができます。hタグを適切に定義することは検索結果の上位に表示するためにとっても重要なことなのでしっかりと使い方を覚えましょう。

それでは実際に書いて練習してみましょう!

pタグ、brタグ、strongタグ、hタグを練習する

aタグでリンクを作成する

読み アンカー、エー
用途 リンクを作成
意味 anchor

aタグ<a>〜〜</a>で囲った要素を指定のURLへリンクさせるタグですが、他のタグとは記入内容が違います。

リンク要素にしたい箇所を囲うだけでなくリンク先のURLも記入する必要があります。URLはhref属性というものを使って記述します。

hrefについて説明するためにまずは属性について理解しましょう。

htmlの「属性」とは?

htmlの属性について

htmlのタグには属性というものを追記することで、そのタグに特定の情報を追加することができます。

例えば

  • href属性:リンク先のURL
  • target属性:リンク先のページをどう表示するか
  • src属性:読み込むファイルのURL
  • id属性:要素ごとの識別文字列
  • class属性:要素ごとの識別文字列

などがあります。(※詳しくは後述)

属性は開始タグの要素名のあとに半角スペースをいれて記入します。

aタグの記入例

aタグの記入例

aタグではその属性の中の1つであるhref属性というものを使用します。

「href」を「=」で繋いで「” “(ダブルクオート)」もしくは「’ ‘(シングルクオート)」で囲ってリンク先のURLを記入します。

またaタグにはリンク先のURLの指定の他に、target属性というものを利用して「リンク先を開く形式」を指定できます。

target=”_blank”と記入することで、現在開いているページはそのままでリンク先を別のタブで表示することができます。

aタグを練習する

「属性」という言葉に慣れよう

「属性」はこれからhtmlを勉強する中で頻出する単語だ。「●●=”〇〇”」という形式の記述がでてきたらそれは全て属性だから最低限それだけは理解しておこう!

imgタグで画像を表示する

読み イメージ
用途 画像の表示
意味 image

imgタグは画像を表示する際に使うタグです。brタグ同様、閉じタグのない特殊なタグです。jpgやpngといった画像ファイルを用意し、その画像を読み込むための記述をすることによって表示します。

imgタグの書き方

imgタグはaタグと同じように属性というものを使用します。

src属性に、画像が保管されているフォルダのパス(URL)を記述することによって画像ファイルを表示することができます。自身のサーバーに保管されている画像だけでなくURLさえわかっていれば他のサイトの画像も読み込むことが可能です。

パスについてはこちらの記事で詳しく解説しています。

関連記事

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説!

alt属性のテキストが表示される

alt属性について

alt属性はなんらかの原因で画像が表示されない時に代わりに表示されるテキストです。

検索エンジンは画像の内容を判断する際にこのalt属性のテキストを参考にするので必ず書くようにしましょう。

imgタグのまとめ

  • 閉じタグなし
  • src属性にファイルの場所(パス)を記述
  • alt属性に代替テキストを必ず書く

imgタグを練習する

ul、ol、liタグでリストを定義する

タグ ul ol li
読み ユーエル/アンオーダードリスト オーエル/オーダードリスト リスト
用途 順序なしのリストの定義  順序ありのリストの定義  リストの各要素の作成
意味 unordered list  ordered list  list

リスト(箇条書き)を作成するにはul、ol、liといったタグを使用します。単純な箇条書きの他にも、関連性のある項目を羅列させる時にもこのliタグを利用します。

実際の箇条書き以外での使用例はナビゲーションメニューや商品画像の羅列などがあります。

li全体をolまたはulで囲いリストを定義する

  1. イラストのようにまずリスト化させたい各要素をliタグで囲みます。
  2. その後li要素全体を入れ子にして全体をulタグもしくはolタグで囲みます。
  3. ul、olタグで囲った部分はひとまとまりのリストとして表示され、ulの各リストには「」が、olの各リストには数字の「連番」がデフォルトで付くようになっています。

これらのリストのマークはcssで色々な形に変更可能です。

ulとolの使い分け

  • ul:順番や数字的な関連性がないものはul(例:材料などを箇条書きで紹介する時)
  • ol:順番や数字的な関連性があるものはol(例:レシピの手順や○つのポイントを紹介する時)

ul / ol / liタグを練習する

tableタグ、trタグ、thタグ、tdタグで表を定義する

タグ table tr th td
読み テーブル ティアール/テーブルロウ ティエイチ/テーブルヘッダー  ティディー/テーブルデータ
用途 表の定義 表の行の定義  見出しセルの定義 表のデータセルの定義
意味 table  table row  table header  table data

tableタグの使い方

一行をtrで囲い全体をtableで囲う

表(テーブル)を組む時はそれぞれの見出しを「thタグ」、データを「tdタグ」で囲みます。横の一行で表示したいデータセルを「trタグ」で囲み、最後に全体を「tableタグ」で囲みます。

tableで囲った要素のセルひとつひとつの枠線(ボーダー)はデフォルトではつかないのでcssで枠線がつくように調整してあげる必要があります。今回の練習ではtableタグを書いたらあらかじめ枠線がつくように設定をしています。

table / tr / th / tdタグを練習する

id属性とclass属性で特定の要素に対して処理をする

htmlの入門時に必ずつまずくのがこのid属性class属性です。この属性はcssと一緒に使うことが前提の属性なため、htmlだけしか理解していない段階では、何のためにあるのか理解しにくい概念です。

ですがcssがわからなくてもまずはどんな時にこの属性を使うのか説明します。htmlを勉強するときはとりあえず手を動かしてみるというのが大切なのでこのまま読み進めましょう。

id属性・class属性を使わない場合

まずはid属性・class属性を使わない場合どうなるのか見てみます。

idとclassを使わない場合の表示結果

例えば複数書かれたpタグの文章の中で一文だけ文字の色をオレンジに変えたいとします。

cssでは「何の要素の、どの部分を、どんな風に」変更するかを指定します。

クラス名がない場合「なんの要素の」の部分を「p」とまでしか指定できません。

この指定の仕方では全てのp要素に対してスタイルが適用されてしまい、全ての文字色がオレンジになってしまいます。

id属性・class属性を使う場合

id名・class名を使うことでこの問題を回避することができます。

idとclass属性を使った場合

文字色をオレンジにしたいpタグにのみclass属性(今回はorangeというクラス名)を指定します。

htmlで指定したclass名とcssで使用するclass名を紐づけることで、同じpタグの中でも「orange」というクラス名のついたp要素だけに処理をすることが可能になるのです。

このようにid/class属性は「特定の要素に名前をつけてその要素にのみ処理をする」ために使用します。

id属性・class属性の付け方のルール

id属性とclass属性の役割がわかりましたが、それぞれの違いはなんなのでしょうか?

同じidはページ内に1つ、classは何個でもOK

id属性・class属性はそれぞれどんなhtmlタグにでもつけることができます。

  • 「<タグ名 id=”好きな半角英数字”></タグ名>」
  • 「<タグ名 class=”好きな半角英数字”></タグ名>」

というように記述します。

また、イラストにもある通り、同じid名は同じwebぺージに1つしか書いてはいけないのに対して、class名は同じclass名であっても同じwebぺージに複数書いてOKという点です。

idとclass属性の使い分けについてはcssを勉強する際に理解しましょう。

id属性・class属性のまとめ

  • id属性とclass属性はcssで特定の要素に対して処理をするために使う
  • id属性とclass属性は任意の半角英数字を指定する
  • 同じidは1つのページに1つまで(※id自体は複数のタグにあってもOK)
  • class属性は同じものを複数のタグに指定することができる

id / class属性を練習する

divタグとspanタグでレイアウトを整える

タグ div span
読み ディブ スパン
用途 大きなグループわけ 小さなグループわけ
意味 division span

divタグspanタグもhtmlを勉強する最初の段階で独学者の頭を悩ませるタグです。この2つのタグは両方ともレイアウトを調整する際に使うタグです。

ひとまずそれぞれの使用例をみてみましょう。

divタグの使用例

divの使い方の例

通常、htmlのまとまった要素を2列にして配置したいときは「右に配置するグループ」「左に配置するグループ」とグループ分けをする必要があります。

イラストでいえば「写真・説明文章」をまるっとdivタグで囲いそれぞれに「left-column」「right-column」というclass名を付与していますよね。

このようにひとまとまりの要素に対してcssを適用したい場合divタグを使用します。

※学習の混乱を避けるため具体的な2列の配置方法は割愛します。

spanタグの使用例

spanの使い方

spanタグは要素の中の一部のみにcssを適用したい時に利用するタグです。例えば1つのpタグの中の文字の一部のみをオレンジにしたい場合などにspanタグを利用します。

上のイラストではpタグに対してcssを適用してしまうと全ての文字色が変わってしまうので、変えたい部分をspanタグで囲い、そのspanに対してcssを適用することで文字色を変えたい部分のみの色を変えている例です。

divタグとspanタグの違い

divタグとspanタグの決定的な違いはインライン要素であるかブロック要素であるかです。

実はhtmlのタグは全てこの「インライン要素・ブロック要素」のどちらかの要素である特徴をもっています。インライン要素とブロック要素は奥が深いので難しく感じてしまいますが今の段階ではなんとなく理解してもらえればOKです!

まずは同じようにテキストを書いた場合のそれぞれのタグの表示結果の違いをまず確認しましょう。

<span>スパンで書いた時</span>
<span>スパンで書いた時</span>
<span>スパンで書いた時</span>
 スパンで書いた時スパンで書いた時スパンで書いた時

spanタグで囲った要素の後ろには別の要素が回り込むようになっています。このように要素の後ろに別の要素が回り込む要素のことをインライン要素といいます。

今回学習したタグでは

  • aタグ
  • imgタグ
  • spanタグ

がインライン要素です。何がインライン要素で何がブロック要素なのかはもちろん覚えなければいけませんが、使っているうちに自然に身についていくので特別勉強しなくてもOKです。

<div>スパンで書いた時</div>
<div>スパンで書いた時</div>
<div>スパンで書いた時</div>

 

スパンで書いた時
スパンで書いた時
スパンで書いた時

spanタグで書いた場合とは違い要素がそれぞれ一行(段落として)で表示されていますね。このように要素が1つの段落として扱われる要素のことをブロック要素と呼びます。

今回学習したタグでは

  • h1〜h6タグ
  • pタグ
  • divタグ

がブロック要素です。

徐々に話が複雑になってきたので、divタグとspanタグについてはまた別の記事で解説します。要点をまとめたので理解できたら早速練習してみましょう。

spanとdivをおさらい

  • divタグは要素をレイアウトを変更するなど、グループ化する時に使う
  • spanタグは要素の一部に対してcssを適用させたい時に使う
  • divタグはブロック要素、spanタグはインライン要素
  • インライン要素は別のインライン要素が後ろに回り込む
  • ブロック要素は要素が段落として扱われる

div / spanタグを練習する

覚えておきたい2つのテクニック

最後にhtmlを書いていく上でぜひ覚えておいて欲しいテクニックを2つ紹介します。

その1 – タブによるインデント

インデントとは「文章の頭の位置をずらす」ことを指します。テキストエディタでキーボードの「tabキー」を押すことでインデントすることができます。

インデントの使い方

htmlを書いていくと必ずたくさんの入れ子を使うので、開始タグと閉じタグの構造が複雑になります。

インデントをすることでどの開始タグと閉じタグが対応しているのかを見やすくすることができます。

htmlのインデントをさらにマスターしたい方はこちらで実践的な使い方を学習できます。

関連記事

【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

その2 – コメントアウト

コメントアウトとはhtmlの中にコメントを残す機能です。

<!– ここにコメントを書く –>」と書くことでブラウザには表示されないコメントを残すことができます。

コメントが役に立つ場面は主に2つです。

  1. 複数人で1つのwebページを作成する時に「なんのためにそのコードを書いたのか?」や「注意事項」といったものをコメントで残して共有することでスムーズに作業を進めることができます。
  2. 2つ目は入れ子の管理です

commentの使い方

先ほどのインデントとの合わせ技で、離れた場所にある閉じタグの横にコメントを入れることでさらにどの開始タグと対応しているのかをわかりやすくすることができます。

htmlのコメントをさらにマスターしたい方はこちらで実践的な使い方を学習できます。

関連記事

【HTMLのテクニック】コメントアウトを覚えてコードを見やすくしよう

htmlの基本のまとめ

ワンポイントアドバイス

この記事の内容を理解した段階でのhtmlの習熟度は10%といったところなんだ。自分で色々なwebサイトを作れるようになりたいと思ったら他にも勉強しなきゃいけないことがたくさんある。

html&css入門」では初心者がひとりでwebサイトをつくれるようになるために必要なスキルをどのサイトよりもわかりやすく解説しているからぜひチェックしてみてね!この記事が気に入ったらSNSでのシェアもお願いします!

基本のまとめ

  • htmlは要素を定義するためのコンピューターとの共通言語
  • 見た目はcssで調整する
  • 勉強するためにはテキストエディタとwebブラウザが必要
  • htmlを書くためには定型文を記述する必要がある
  • headタグ内に書いたものはサイトの情報を伝えるために使われ表示されない
  • bodyタグ内に書いたものはブラウザに表示される

記述/タグに関するまとめ

  • htmlは開始タグと終了タグで囲むことでその間を「何の要素」であるかを定義する
  • タグの中にタグを入れることを「入れ子」と呼ぶ
  • 開始タグの中に「属性」を書くことでその要素に情報を持たせることができる。(aタグやimgタグなど)
  • pタグは段落を追加するタグ。通常の文章にはこのタグが多々使用される
  • brタグで改行、strongタグで強調
  • h1〜h6タグは見出しをつけるために使う。本の目次と同じように考えてつける。
  • imgタグで画像を読み込んで表示。src属性でファイルのパス、alt属性で代替テキストを書く
  • aタグでリンクを設定。href属性にリンク先のURLを記述する
  • ulで番号なし箇条書き、olで番号あり箇条書きのリストを定義する
  • table/tr/th/tdタグでサイトの表(テーブル)を作成する
  • id/class属性を使うことで「特定の要素だけに対して」処理を行うことができる
  • 同じid属性は同じページに1つ、class属性は複数指定可能
  • divタグは大きなグループに対してcssを適用したいときに使う
  • spanタグはある要素の一部に対してcssを適用したいときに使う
  • タブキーで適切にインデントを行うことで視認性があがり入れ子のミスを減らすことができる
  • コメントアウトで記述の管理がしやすくなる

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【videoタグ】HTMLで動画を埋め込む方法を徹底まとめ

  • パンくずリストを構造化データでリッチスニペット対応する方法

  • 【完全初心者】HTMLとは何か?をイラストを使って解説

  • 【完全ガイド版】Sublime Textの使い方と設定方法 - MacとWindow...

  • <input>の使い方とtype属性の一覧をサンプル付きで紹介

  • HTMLの文字の強調・装飾|strong / em / b / i タグを理解しよう

  • 【完全入門ガイド】cssの書き方をイラストを使って解説

  • 【HTMLのテクニック】インデントを覚えてコードを綺麗に見せよう

記事をもっと見る +

目次を開く