• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作無料講座 / HTML初心者 / 5.HTMLで使う主要なタグを知ろう

5.HTMLで使う主要なタグを知ろう

池田祐太郎 | 2013年10月5日 公開

HTML5のタグの数は煩悩と同じ108個。全部覚えるのは大変です。もちろんHTMLタグを全部覚える必要はなく、主要なタグを抑えておけばまずはOK!
そこでここでは主要なタグをご紹介します。

目次

  • 1 body内に使えるタグ
    • 1.1 見出しを書くときはh1〜h6タグ
  • 2 ここに見出しを書く
    • 2.1 ここに見出しを書く
    • 2.2 本文を書くには<p>
  • 3 日本語でウィンドウズといい、マイクロソフト社が提供する市場シェアは90%にものぼるOSです。 発売開始時期 windowsが発売を開始したのは… バージョン 今までのバージョンは… Mac
    • 3.1 発売開始時期
    • 3.2 バージョン
    • 3.3 改行するときは<br>
    • 3.4 画像を表示させる<img>
    • 3.5 リストを表示する<ul>, <li>
      • 3.5.1 ul
      • 3.5.2 ol
    • 3.6 要素を囲うのに使う、<div>
    • 3.7 divの代わりに行内で使う場合の<span>
    • 3.8 タグではないけど、良くHTMLで使うコメントアウト

body内に使えるタグ

見出しを書くときはh1〜h6タグ

見出しに使うタグ。こんな感じで使います。

ここに見出しを書く

ここに見出しを書く

ここに見出しを書く

h1から6まであり、数字が小さい方が重要度が高くなります。大体そのページで一番伝えたい見出しをh1に使うことが多く、その下にh2, h3…と続きます。
ページ内で複数使ったりと、見出しはひとつとは限りません。
ちなみにこのページだとタイトルにh1を使い、各見出しがそれぞれh2,h3,h4…と設定されています。

h1_01_100513_010315_PM

本文を書くには<p>

本文(パラグラフ:paragraph)を書くときに使うタグ。かなり使用頻度は高いです。
例えば、先ほどの見出しタグと併用して使うことが多くなります。

一例:

パソコンの種類

日本語でウィンドウズといい、マイクロソフト社が提供する市場シェアは90%にものぼるOSです。

発売開始時期

windowsが発売を開始したのは…

バージョン

今までのバージョンは…

Mac

マッキントッシュの略でアップル者が販売しているコンピュータの名称です。

発売開始時期

macが発売を開始したのは…

バージョン

今までのバージョンは…

見出しの中に本文をpタグを使って構成されているのがわかるかと思います。

改行するときは<br>

改行するタグです。brakeの先頭2文字と考えると覚えやすいです。
よく<p>の中で使用するケースが多いです。間違われやすいのですが、<br>で要素と要素の間の余白を作ると閲覧する環境により余白の高さが違うので、意図せぬ崩れや見た目の違いを生むため、お勧めしません。

例:

明日は明日の風が吹く。明日は明日の
風が吹く。

実際の表示例:

明日は明日の風が吹く。明日は明日の
風が吹く。

画像を表示させる<img>

画像を表示させたいときにつかうタグです。これはタグ単体では使わず、必ずセットでsrcというのがついてきます。
今までは<h1>とか<p>とかタグ単体で動いていたHTMLタグでしたが、<img>タグは単体では意味を成しません。ここで新たに出てくるのは「属性」です。

5_01

この図で説明すると、

タグというのはimg
そこに属性であるsrc(ソースと読みます)があり、属性srcの値はapple.jpgという画像ファイル
属性はタグによって有効にならないケースもあります。例えばh1タグにsrc属性は使えません。
値のapple.jpgのスペルが違っていても、ダブルクオーテーションがなかったりしてもダメ。
よく「終わりのダブルクオーテーションを付け忘れた」とか「srcのスペルを間違えた」とかいうケースがあるので、意図した表示になっていないときはもう一度きちんと打てているか確認しましょう。

リストを表示する<ul>, <li>

次はリストを表示させるためのタグ、<ul>と<li>です。このタグは2つでセットです。
リスト、というと想像しずらいですが要は箇条書きにする一覧を表示したいときに使うという感覚です。
サイトのヘッダーにあるメニュー(グローバルメニュー)にもよく使われます。

例:

  • いちご
  • スイカ
  • メロン
  • 梨

ul(ユーエル)ってなによと思う方、正しいです。英語でUnordered Listの略で、日本語で言うと「未定義リスト」と言います。定義されてないリスト、定まってないリストです。
<ul>に非常によく似た、<ol>というのがあるのですが、これは英語で「Orderd List」、つまり「定義されたリスト」です。

以下のように使います。

2012年 検索数ランキング

  1. YouTube
  2. Facebook
  3. Amazon
  4. 楽天

ulとolの違い、わかりますか?

ulは定義されていなくて、olは定義されている。この「定義」の意味ですが、順番になっているかどうかというのがキーになっています。
ulの方はただ果物が羅列されているだけですが、olの方はランキング数が上から順番になっています。

試しにこれをHTMLで書いてみると、こんな風になります。

ul

  • いちご
  • スイカ
  • メロン
  • 梨

ol

  1. YouTube
  2. Facebook
  3. Amazon
  4. 楽天

ulは中丸、olの方は連番になっていますね。これは「olが定義されたリストなので、連番として表示する」という仕様です。
連番のリストはol、そうじゃない他のリストはliとおぼえておきましょう。

要素を囲うのに使う、<div>

次はdivタグです。英語のdivisionの略で、読み方はディブっていうことが多いですね。
こいつはタグや文章や画像など、まとまったものを囲うときに使います。

画像例:
div_01

ピンク色がメインエリアのdivで、各タイトルや文章などを囲っている大きなdiv。青い方がサイドバー全体を囲っているdiv
もちろんそれぞれのdivの中はいろんなタグが入っているので、かなり省略して書きますが以下の様なHTML構成になります。


ここでなんか変だな、とおもった方は鋭い。今まででてきたタグと、このdivタグ、大きな違いがあるんですが気づきましたか?

ちょっと考えてみてください。

・

・

・

わかりましたか?
答えは、「今までのタグにはちゃんと意味があったのに、divタグには特定の意味が与えられていない」ということなんです。
例えばh1は見出し、pは文章、imgは画像、ul&liはリスト…などなど、明確な意味がありました。imgタグで見出しは作れません。pタグで画像は出ません。

これらに対し、divは意味を持っていないタグなんです。なので、divの中にh1やimgがはいっても、文章がはいってもOK。
レイアウトやブロック要素として仕切りたい場合に使うことが多いです。ブロック要素に関してはまた別の機会に。

divの代わりに行内で使う場合の<span>

今度はspanタグです。スパンと呼びます。これはdivと同じように要素を囲うときに使うケースが多いです。例えば以下。

span_01

こういったように、文章内で特定の部分だけ変化させたいときなどに使います。変化させるのはCSSなことが多いので、今は使うケースがイメージできないかもですが、そのうち多様するようになります。
上記の画像はHTMLにするとこんなかんじ。

「我々に明日は来るのだろうか?」ルシウスが尋ねた。彼がこんな畏まって聞くことは決まって答えを求めていないことを私は知っている。

このspanになった部分に後々CSSを適用させていくわけです。
行内ならspan、いろいろな要素をいれるならdivと今は大雑把に覚えておきましょう。

タグではないけど、良くHTMLで使うコメントアウト

タグではありませんが、良く使うもので覚えておいて損はないのでご紹介。
コメントアウトと言って、忘れないようにメモを残したり、後々見返した時に「これは書いておいた方がいいんじゃないの」「他の人が見るときにこれは知っておいた方がいい情報だ」というテキスト情報をメモ的に残しておけます。実際には表示されません。

例:


ここはコメントアウトにならない
<-- これもビックリマーク(!)が抜けてるのでコメントアウトになりません-->

上記は1行目だけしかコメントアウトにならず、2-4行は表示されるので注意。
はじめのうちは後で見返した時に自分でちゃんとわかるように、コメントアウトを多用してhtmlファイルのなかにどんどんメモしていきましょう。
っていってもパスワードとか第三者に見られて困るものは残してはいけませんよ。

次の講座:コラム htmlタグ周りの特殊な読み方←目次に戻る
メールコンサルティング
WordPress保守管理サービス

Filed Under: HTML初心者 関連タグ:HTML

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

8.その他のデベロッパーツールの紹介
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門
7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
6.確認から制作まで即使えるCSSの機能(2/2)
2014年3月4日
タグ: css, HTML
カテゴリー: デベロッパーツール入門

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. Elementorで表を作る3つの方法

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.