【HTMLの基本を徹底解説！】初心者向けHTMLの基本とよく使うタグ一覧

ここでは、これからHTMLを勉強したい初心者向けにHTMLの基本とよく使うタグ一覧をご紹介していきます。HTMLの使い方を覚えてホームページやブログの作成・カスタマイズにぜひ役立ててください。

ホームページを作成しようと思っています。HTMLという単語をよく聞くけど、HTMLってなんですか？

HTMLは、Webページを作っていくための言語です。<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って文章や画像を加えたりしてWebページを作成できます。下記がサンプルですよ。

ううっ、暗号みたいでちょっと難しそうですね。

素人でもHTMLを覚えられるんでしょうか？？
もしHTMLができたら自分でホームページとか作成していきたいですね

もちろん勉強すればできますよ。慣れ的なところも大きいです。
HTMLを覚えることで下記のように自分で簡単なWebページが作れます。それに、WordPressやアメブロなどのHTMLエディタでも記述ができるようになりますよ。

■1分でわかるHTMLを使ったWebページの作り方(BGMあり)

ここでは、まずHTMLとはなにかについて説明します。後半に実際によく使うHTMLタグを中心に紹介して、最後に今時のHTML（HTML5）について補足していきます。

【メルマガ登録はこちら！！】
HTML・CSS・お役立ち情報をGET

1 HTMLとは
- 1.1 HTMLとはWebページの構造を定義する言語
- 1.2 HTMLとセットで使う言語CSS
2 HTMLの構造
3 BODY内でよく使うHTMLタグ一覧
4 BODY内で記述するよく使うHTMLタグ詳細
5 次に覚えておきたいHTMLタグ一覧
6 よく使うHTML5タグ
7 ブロックレベル要素とインライン要素
8 (補足)特殊文字
9 (補足)headタグの中に入れる主要なタグ
10 まとめ
- 10.1 参考サイト

【PR】ネットショップを始めるなら！無料でスタートできるBASEがオススメ！

HTMLとは

HTMLとはWebページの構造を定義する言語

HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語です。

構造を定義する？？

例えると、人の構造を定義するときに「頭が一つ」あって、その中に「目が二つ」「鼻が一つ」「口が一つ」といったように人の構造を定義していくのと同じような感じです。
HTMLでは、Webページの構造を定義していきます。

■人の構造の定義に例えたイメージ

より具体的に言うと、<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って、「これは見出し」「これは文章」「これは画像」「これはリンク」など定義していきます。

HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。

このように、HTMLを使ってページを作成することを「マークアップする」とも言います。

HTMLとセットで使う言語CSS

また、Webページのスタイルを整えるため、HTMLとセットでCSS（Cascading Style Sheets）という言語もよく使います。

スタイルを整える？HTMLと何が違うんですか??

たとえば、HTMLが「目が二つ」「鼻が一つ」でといったように人の構造を定義する言語だとすると、CSSは「この人の目は二重にして、鼻の高さは2センチで」といったように人の見た目を調整する言語です。

■人に例えたイメージ

先ほどの例でいうと、具体的には「この見出しは赤文字で」「この文章のフォントは30pxで」「このグループは青線で囲む」などHTMLで定義した内容をどんな見た目に表示させるかを設定していきます。

CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。

HTMLは文書の構造を定義する言語、セットで使うCSSは文書の見た目を調整する言語という点を覚えておきましょう。

CSSについては下記に詳しく載せていますのでこちらをご参照ください。
初心者がはじめに覚えておきたいCSSの基本とよく使うプロパティ一覧

ここでは、HTMLについて説明していきます。

【PR】ワードプレスを始めるなら！オススメのレンタルサーバー

HTMLの構造

次に、HTMLの構造を説明していきます。HTMLの基本構造は下記のように記述します。

HTMLの基本構造

先頭に<!DOCTYPE html>と記述して
<html>で大きくくくり
htmlの中の前半に<head>でくくり
htmlの中の後半に<body>でくくります。

!doctype html

<!DOCTYPE html>はこれからhtml5というバージョンでhtml文を書きますよという宣言文で、最初の行に記述します。

HTML5？？HTMLにもバージョンがあるんですか？

はい。たとえば、iPhoneが6→7→8と時代に応じてバージョンがだんだん上がっていくのと同様に、HTMLも時代に合わせて古いHTML4.01から現在の主流HTML5へバージョンが上がっていっています。

参考)[HTMLの歴史] HTMLの誕生からHTML5までをザッと要点紹介

最初は難しいので、とりあえずおまじないという意識で記述しておくと良いと思います。

htmlタグ

<html>～</html>はページがhtmlページであることを宣言するタグです。htmlタグの中にhtml文を記述していきます。

(※)言語指定を厳密にする場合は、<html lang="ja">〜</html>にします。

headタグ

headタグには、Webページのタイトル（titleタグ）や、検索エンジン向けの説明文、文字コード、外部のCSSファイルやjavascriptファイルなどを記入します。

ここに記述した内容は、titleタグなどの一部を除きWebブラウザ上には基本的に表示されません。

人で例えると、外見以外にも属性情報（氏名は〇〇で日本語を話すなど）をを入れる箇所がheadタグというのがイメージしやすいかもしれません。

■人に例えた時のイメージ

bodyタグ

bodyタグの中には、実際にWebブラウザに表示される中身を記述します。

たとえば、見出し、文章、画像、テーブル、などなどのコンテンツをします。なお、ひとつのHTML文書の中にheadタグやbodyタグが出現する回数は一回だけです。

bodyタグの中に文章や画像などの中身を書き込んでいったら良いんでしょうか？

そうですね！先ほどの例でいうと、bodyタグの中が人の構造を定義する箇所になります。本ページではbodyタグの中でよく使うタグを説明していきますね。

(補足)HTML5 headerタグとfooterタグ

現在主流のHTMLのバージョン「HTML5」では、より意味付けを意識したタグが新たに登場しました。

<header>タグは、ヘッダー部分(人間で言う頭の部分)に利用できます。(文書のヘッダ情報を表す<head>タグとは意味が全く異なりますのでご注意ください。)

また、<footer>タグは、フッター部分(人間で言う足の部分)であることを示す際に使用します。

よくある例としては、Webページ上部のナビゲーションバーをheaderタグで囲んだり、サイトの最下部にあるcopyrightなどをfooterタグで括ったりすることが多いです。

ココからココまでをheader部分にするといった厳密な決まりはありませんし、必須のタグでもありません。
あくまで意味づけなので自分でWebページを作るときにヘッダーと思う部分をheaderタグ、フッターと思う部分をfooterで括ると良いと思います。

他にもHTML5のタグはよくありますがheaderとfooterは特によく使われるので参考に覚えておきましょう。

(補足)id属性とclass属性

さて、htmlの各タグにはid属性やclass属性という属性が設定できます。

例
<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>

idやclassを設定することでCSSでレイアウト装飾する際に、「このid名がついているタグは背景を赤色にする」あるいは、「このclass名がついているタグは文字色を青色にする」などの指定ができるようになります。

(※)idはHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。

■記述例 (内部スタイルシート形式で記述)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSSセミナー</title>
    <style media="screen">
      #top-h{
        background: red;
      }
      .blue-text{
        color:blue;
      }
    </style>
  </head>
  <body>
    <h1 id="top-h">はじめてのCSS</h1>
    
    <p class="blue-text">この文章は青文字になっています</p>
  
    <h2 class="blue-text">この見出しも青文字になっています</h2>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSSセミナー</title>

#top-h{

background: red;

}

.blue-text{

color:blue;

}

</style>

</head>

<body>

<h1 id="top-h">はじめてのCSS</h1>

<p class="blue-text">この文章は青文字になっています</p>

<h2 class="blue-text">この見出しも青文字になっています</h2>

</body>

</html>

■表示例

idやクラスを利用したCSSの設定方法に関する詳細は、「知っておきたいCSS セレクタの優先順位・詳細度・継承」をご参照ください。

【PR】初めてホームページを作るなら使いやすいロリポップがオススメ！

HTMLを覚えたらサーバーを借りて本番のホームページを作成してみましょう。初めてのホームページを作るならロリポップがオススメ！

BODY内でよく使うHTMLタグ一覧

ここでは、bodyタグ内で文書を定義するためのよく使うHTMLタグ一覧を紹介します。

HTMLタグ	意味	備考
見出し	h1〜h6	見出しは、h1~h6タグを利用します。見出しは、書籍の章立ての「章」に相当します。h1〜h6のhはheadingの略です。
段落	p	パラグラフ(段落)は、pタグを利用します。pはParagraphの略です。
改行	br	テキスト内・間で改行するためには、brタグを利用します。brとはBreak（改行）の略です。
画像	img	画像を表示するには、imgタグを利用します。imgはImageの略です。
リンク	a	Webサイトやページへのリンクを作成するには、aタグを利用します。aタグはアンカー（Anchor）の略です。
順番なしリスト	ul	箇条書きのようにリスト表示する場合は、ulとliを利用します。ulはUnoder list(順序のないリスト)の略です。
順番なしリスト	li	liはList Itemの略で各項目をliでくくります。ulの中にliが入ります。
順番ありリスト	ol	順序のある箇条書きのようにリスト表示する場合は、olとliを利用します。olはOder list(順序のあるリスト)の略です。
順番ありリスト	li	liはList Itemの略で各項目をliでくくります。olの中にliが入ります。
定義リスト	dl	定義リスト（定義する用語とその用語の説明を一対にしたリスト）を作る際はdlを利用します。dlはDefinition Listの略です。
	dt	用語はdtを利用します。dtはDefinition Termの略です。dtはdlの中に入ります。
	dd	用語の説明はddを利用します。ddはDefinition Descriptionの略です。ddはdlの中に入ります。
テーブル(表)	table	テーブルを定義します
	tr	table rowの略。テーブルの行を定義します。
	th	table headerの略。テーブルの見出し項目を定義します。
	td	table dataの略。テーブルのデータ項目を定義します。
汎用タグdiv	div	タグ自体は特定の意味を持ちませんが、タグどうしをグループ化したりする際にdivタグを利用します。
汎用タグspan	span	divタグと同じように、span自身は特に意味を持っていませんが、囲んだ範囲をひとかたまりのグループとするのに、spanタグを利用します。divタグが改行が入るのに対して、spanは改行が入りません。
水平線	hr	水平線を引いて文書を区切る場合はhrタグを利用します。hrはHorizontal Ruleの略です。終了タグはありません。
引用	blockquote	blockquoteは文章を引用・転載する際に使用します。blockquoteで囲まれた部分が引用・転載部分になります。
整形済みテキスト	pre	preタグを利用して整形済みテキストとして記述できます。preはPreformatted Text（整形済みテキスト）の略です。
フォーム	form	お問い合わせフォームなどのフォームはformタグを利用します。
	input	formタグの中に入れる入力項目にinputタグがあります。テキスト項目、ラジオボタン、チェックボックス、パスワードなど入力項目を指定することができます。
	select	formタグの中に入れる入力項目にselectタグがあります。セレクトメニューを指定することができます。
	textarea	長文のメッセージを入力項目にしたい場合は、textareaタグを利用します
ヘッダー	header	文書中でヘッダーに相当する部分にheaderタグを利用できます。機能的な意味はなく意味的にヘッダー部分を明示したいときに利用できます。(文書のヘッダ情報を表すheadタグとは意味が全く異なりますのでご注意ください。)
フッター	footer	文書中でフッターに相当する部分にfooterタグを利用できます。機能的な意味はなく意味的にフッター部分を明示したいときに利用できます。
ナビゲーション	nav	文書中でナビゲーションに相当する部分にnavタグ利用できます。機能的な意味はなく意味的にナビゲーション部分を明示したいときに利用できます。
セクション	section	文書中でセクション(かたまり)に相当する部分にsectionタグを利用できます。機能的な意味はなく意味的にセクション部分を明示したいときに利用できます。
動画	video	mp4などの動画を再生する場合にはvideoタグを利用します。

【PR】初めてホームページを作るなら使いやすいロリポップがオススメ！

HTMLを覚えたらサーバーを借りて本番のホームページを作成してみましょう。初めてのホームページを作るならロリポップがオススメ！

BODY内で記述するよく使うHTMLタグ詳細

さて、これまでHTMLの基本構造について説明しました。

headタグに記述する内容は最初は難しくおまじない的に書く記述も多いのでここでは割愛して、ここからはbodyタグに書く内容を主に説明していきます。

見出しタグ h1〜h6

見出しは、h1~h6タグを利用します。見出しは、書籍の章立ての「章」みたいなものです。

<h1>～<h6>のhとはheadingの略で、見出しを意味します。

<h1>が最上位の見出し（大見出し）で、数字が大きくなるにつれて下位の見出し（小さい見出し）になります。<h6>が最下位の見出しです。
通常、<h>～</h>の前後に1行分改行されます。

使用例

<h1>H1 関西のラーメン特集</h1>
<h2>H2 大阪のラーメン特集</h2>
<h3>H3 梅田のおすすめラーメン特集</h3>
<h4>H4 梅田のおすすめラーメン とんこつ特集</h4>
<h5>H5 梅田の濃厚とんこつラーメン</h5>
<h6>H6 梅田の濃厚とんこつラーメンで一番なラーメン屋</h6>

<h1>H1 関西のラーメン特集</h1>

<h2>H2 大阪のラーメン特集</h2>

<h3>H3 梅田のおすすめラーメン特集</h3>

<h4>H4 梅田のおすすめラーメンとんこつ特集</h4>

<h5>H5 梅田の濃厚とんこつラーメン</h5>

<h6>H6 梅田の濃厚とんこつラーメンで一番なラーメン屋</h6>

ブラウザでの表示例

パラグラフ(段落)タグ p

パラグラフ(段落)は、pタグを利用します。最初は文章を書くときに囲むタグという認識で良いと思います。

<p>タグはParagraphの略で、<p>～</p>で囲まれた部分がひとつの段落になります。通常、<p>～</p>の前後に1行分改行されます。

使用例

<p>
本日は、htmlのセミナーを実施しています。
最初は難しいですが、慣れてくるとだんだん面白くなってきます。
</p>

<p>

本日は、htmlのセミナーを実施しています。

最初は難しいですが、慣れてくるとだんだん面白くなってきます。

</p>

ブラウザでの表示例

改行タグ br

テキスト内・間で改行するためには、brタグを利用します。

<br>とはBreak（改行）の略で、テキストや画像等をブラウザ上で改行させたいときに使用します。

さきほどのpタグの例で、エディタ上は改行していてもブラウザ上では改行されていませんでした。

使用例

<p>
本日は、htmlのセミナーを実施しています。
<br>
最初は難しいですが、慣れてくるとだんだん面白くなってきます。
</p>

<p>

本日は、htmlのセミナーを実施しています。

<br>

最初は難しいですが、慣れてくるとだんだん面白くなってきます。

</p>

ブラウザでの表示例

あれ？今まで<h1>〜</h1>のように、開始のタグ<h1>と終了のタグ</h1>があったと思うんですが、brはそうなっていないんですが良いんでしょうか？

はい！通常HTMLタグは<開始タグ>〜〜</終了タグ>のように、開始タグと終了タグで囲む形になります。

しかし、囲む必要のないタグについてはbrタグのように開始タグのみのタグもあります。
(<br>〜〜</br>のようにしてはいけません。)

次に紹介する画像タグ(img)も開始タグのみになります。

画像タグ img

画像を表示するには、imgタグを利用します。<img>はImageの略です。

画像ファイルの場所をsrc属性（sourceの略）で指定します。指定できる画像形式は、GIF・JPEG・PNGなどです。

使用例

<img src="images/home.jpg" alt="画像の補足説明をテキストで入れる">

1	<img src="images/home.jpg" alt="画像の補足説明をテキストで入れる">

ブラウザでの表示例

上記使用例では、「src="images/home.jpg"」のように画像の場所を指定しています。画像の指定方法には絶対パスと相対パスの二つの指定方法があります。

画像の指定方法　絶対パスと相対パス

絶対パス：「src="http://xxxxxx/xxx/home.jpg"」のように誰が見ても同じURLのパスで画像の場所を指定する方法
相対パス：「src="images/home.jpg"」のようにimgタグを記述しているファイル(HTMLファイル)を基準にして、画像がどこに在るかを相対的に示す記述方法

絶対パスとか相対パスとか、初めて聞くしなんだかイメージがしにくいですね。。

私たちが普段よく使う例で置き換えると、

「大阪駅から５０m北に行ったところのお店だよ」といった何かを基準に相対的な位置を示す方法が相対パスにあたります。

対して、絶対パスは「あのお店は郵便番号xxx-xxxx 大阪市北区xxx番地1-1」という誰が見ても同じ住所を示す表記みたいなものです。

相対パスの方が慣れないと戸惑いやすいところなので簡単に説明します。

下記のように、htmlと画像ファイルが同じフォルダ(同階層のフォルダ)にある場合は、
src="拡張子含めた画像ファイル名(ここではhome.jpg)"
になります。

また、HTMLファイルから見てimagesフォルダの中にあるhome.jpgを指定する場合は、
src="images/home.jpg"のように指定します。

またHTMLファイルよりも一階層上がったフォルダにある画像を指定する場合は、「..」で一階層上がって指定することができます。

下記の場合htmlファイルから見て、一階層上がったところにある画像なので、src="../home.jpg"で指定することができます。

(※)「..」は一階層上がるの意味です。

意味はわかったんですけど、普段使わないかちょっと慣れないですね。

最初は仕方ないと思います。何回か使ううちに勝手に慣れていうので、慣れるまで練習してみてください。

リンクタグ a

他のWebサイトやページへのリンクを作成するには、aタグを利用します。<a>タグはアンカー（Anchor）の略です。

■使用例

<a href="https://webst8.com">Web活用スクール</a>

1	<a href="https://webst8.com">Web活用スクール</a>

■ブラウザでの表示例
Web活用スクール

上記例の場合は、<a>〜</a>で囲まれた「ウェブ活用スクール」という文言を押すと、href="〜"のリンク先「https://webst8.com」に移動します。

リンク先をhref属性で指定します。画像と同じように絶対パスと相対パスが指定可能です。
絶対パスの例 href="https://webst8.com"
相対パスの例 href="contact.html" (同じフォルダ内にあるcontact.htmlファイル)

target="_blank"で新規タブで開く

リンク先を新しいタブで開く場合は、aタグの中に、「target="_blank"」と追加します。

■使用例

<a href="https://webst8.com" target="_blank">Web活用スクール(新規タブで開く)</a>

1	<a href="https://webst8.com" target="_blank">Web活用スクール(新規タブで開く)</a>

■ブラウザでの表示例
Web活用スクール(新規タブで開く)

idを指定してページ内リンクを設定する

Webページ内のid属性のついているタグを利用して、href="#id名"のようにすると、ページ内の該当箇所にリンクすることも可能です。

■使用例

<a href="#contents">▲目次に戻る</a>

1	<a href="#contents">▲目次に戻る</a>

■ブラウザでの表示例
▲目次に戻る

リストタグ ul,li | ol,li

箇条書きのようにリスト表示する場合は、ulタグとliタグを利用します。

順序なしリスト ul li

順序なしリストはulタグとliタグを利用します。

<ul>タグは、Unordered Listの略で、順序のないリストという意味です。<li>タグは、list itemの略で、ここの項目です。

ulで大きくくくり、中のリストの各項目を<li>タグで記述します。

■使用例

<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>

<ul>

<li>Facebook</li>

<li>Instagram</li>

<li>Twitter</li>

</ul>

■ブラウザでの表示例

順序ありリスト ol li

順序があるリストを定義したい場合は、ulの代わりに、<ol>タグを利用します。

(※)「ol」は「ordered list」、「ul」は「unordered list」の意味になります。

■使用例

<ol>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ol>

<ol>

<li>Facebook</li>

<li>Instagram</li>

<li>Twitter</li>

</ol>

■ブラウザでの表示例

リストタグも非常によく使われていて、CSSでスタイル調整して、メニューバーを作成したりできます。

テーブルタグ table

表を作成したい場合は、tableタグを利用します。

tableタグでは複数のタグを利用して構成します。テーブルは複数のタグを組み合わせて作成します。

タグ	意味
table	テーブルを定義
tr	table rowの略。テーブルの行を定義。
th	table headerの略。テーブルの見出し項目を定義。
td	table dataの略。テーブルのデータ項目を定義。

■使用例

<table>
　　<tr><th>項目</th><th>内容</th></tr>
　　<tr><td>日時</td><td>5月１5日</td></tr>
　　<tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr>
　　<tr><td>費用</td><td>¥10,000</td></tr>
　　<tr><td>持ち物</td><td>ノートPC</td></tr>
</table>

<table>

　　<tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr>

　　<tr><td>持ち物</td><td>ノートPC</td></tr>

</table>

■ブラウザでの表示例

表の枠線をつけるにはどうすればよいんですか？？

tableタグにborder="1"をつけると簡易的な枠線が作れますよ。

■表示例属性border="1"を追記して簡易な枠線を表示する

  <table border="1">
    <tr><th>項目</th><th>内容</th></tr>
    <tr><td>日時</td><td>5月１5日</td></tr>
    <tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr>
    <tr><td>費用</td><td>¥10,000</td></tr>
    <tr><td>持ち物</td><td>ノートPC</td></tr>
  </table>

<tr><td>場所</td><td>大阪堀江エイトビル10F</td></tr>

<tr><td>持ち物</td><td>ノートPC</td></tr>

</table>

■表示例

枠線が二重線になっているんですが、一重の枠線にはできないんでしょうか？？

CSSの話になるので、ここでは割愛しているんですが、枠線の細かい設定はCSSで設定することができます。ここでは、tableタグの書き方を中心に説明していきますね。

tableタグの書き方

まず<table>～</table>で大きくくくります。

tableタグ内に<tr>～</tr>を記述して、表の横一行を定義します。

trタグのなかで、見出しに該当する項目を、「<th>～<th>」で定義します。

trタグのなかで、データに該当する項目を<td>～<td>で定義します。

■上記の表示例

※thで記述したセル内は一般的なWebブラウザでは太字で表示されます。

tableタグの補足

table関連のタグは他にも独自の属性(border属性、colspan属性、rowspan属性)やtheadタグ、tbodyタグ、tfootタグなどあります（必ず使用しなければならないというわけではありません。）

■例.列を連結する属性「colspan属性」と行を連結する「rowspan属性」

<table border="1">
     <tr><th colspan="2">項目と内容</th></tr>
     <tr><td>日時</td><td>5月１5日</td></tr>
     <tr><td rowspan="2">場所と費用</td><td>大阪堀江エイトビル10F</td></tr>
     <tr><td>¥10,000</td></tr>
     <tr><td>持ち物</td><td>ノートPC</td></tr>
</table>

<tr><th colspan="2">項目と内容</th></tr>

<tr><td rowspan="2">場所と費用</td><td>大阪堀江エイトビル10F</td></tr>

<tr><td>持ち物</td><td>ノートPC</td></tr>

</table>

■表示例

色々細かいタグや使い方があるんですが、まずは基本的な表が書けるようになれば良いと思います。

グルーピングタグ div

タグ自体は特定の意味を持ちませんが、タグどうしをグループ化したりする際にdivタグを利用します。

■使用例

<div style="background:pink;width:400px;text-align:center">
  <p>お弁当でも仕切りでグルーピングしています</p>
  <p><img src="images/lunch-box1.jpg"></p>
</div>

<p>お弁当でも仕切りでグルーピングしています</p>

</div>

■ブラウザでの表示例

divタグ自体は意味を持たないタグなんですが、CSSと合わせてスタイル・レイアウト調整をするのに非常によく使いますので覚えておきましょう。

グルーピングタグ span

divタグと同じように、span自身は特に意味を持っていませんが、囲んだ範囲をひとかたまりのグループとするのに、spanタグを利用します。

■使用例

<p>
  明日の天気予報です。
  <br><
  明日東京は<span style="color:red;">大雨警報</span>、大阪は<span style="color:yellow;">大雨注意報</span>、
  福岡は<span style="background:aqua;">晴天</span>になりそうです。
</p>

<p>

明日の天気予報です。

<br><

明日東京は<span style="color:red;">大雨警報</span>、大阪は<span style="color:yellow;">大雨注意報</span>、

福岡は<span style="background:aqua;">晴天</span>になりそうです。

</p>

■ブラウザでの表示例

さきほどのdivタグとどういう違いがあるんでしょうか？？

divタグはブロック要素という前後に改行が入るグルーピングタグであるのに対して、spanタグはインライン要素という前後に改行は入れないグルーピングタグです(※)。

上記例のように、改行が入れないことを利用して特定の部分だけ赤文字表示したりマーカーのように背景を入れたりできます。

(※)インライン要素とブロック要素の違いについて興味のあるかたは下記もご参照ください。
6. (補足)ブロックレベル要素とインライン要素

【PR】ネットショップを始めるなら！無料でスタートできるBASEがオススメ！

次に覚えておきたいHTMLタグ一覧

HTMLタグたくさん出てきましたね。けど、これまで全くわからなかったタグも意味は理解できるようになってきました。

最初は慣れないかもしれませんが、何回も書いたり読んだり行くうちに覚えて行くと思います。まず上記で紹介したタグに慣れるようにしておきましょう。

ここからは、上記の主要タグの次に覚えておきたいHTMLタグの一覧を紹介していきます。

水平線タグ hr

水平線を引いて文書を区切る場合は<hr>タグを利用します。<HR>はHorizontal Ruleの略で、終了タグはありません。

■記述例

<p>この文章の下に水平線が入ります</p>
<hr>
<p>この文章の上に水平線が入ります</p>

<p>この文章の下に水平線が入ります</p>

<hr>

<p>この文章の上に水平線が入ります</p>

■表示例

定義リストタグ dl,dt,dd

<dl>はDefinition Listの略です。

<dl>～</dl>の中が定義リスト（定義する用語とその用語の説明を一対にしたリスト）になります。

<dt>～</dt>に定義する用語を記述し、 <dd>～</dd>にその用語の説明を記述します。

■記述例

      <dl>
        <dt>定義リストとは</dt>
        <dd>定義する用語とその用語の説明を一対にしたリストのことです</dd>
      </dl>

<dl>

<dt>定義リストとは</dt>

<dd>定義する用語とその用語の説明を一対にしたリストのことです</dd>

</dl>

■表示例

dtとdlのセットは<dl>～</dl>の中に複数並べることができます。

引用タグ blockquote

<blockquote>タグは文章を引用・転載する際に使用します。blockquoteで囲まれた部分が引用・転載部分になります。

cite属性を追記して引用元のURLを入れることもできます。

■記述例 (wikipediaより引用)

<blockquote cite="https://ja.wikipedia.org/wiki/HyperText_Markup_Language">
  HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。
</blockquote>

HyperText Markup Language（ハイパーテキストマークアップランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。

</blockquote>

■表示例

普通にpタグで文章を記述するのと何が違うんですか？？

たとえば、blockquoteタグに引用とわかるCSSスタイルを適用することで、見た人にひと目で引用であることを伝えることができます。

■本サイトで上記サンプルのblockquoteを使用した時の表示例

HyperText Markup Language（ハイパーテキストマークアップランゲージ、HTML（エイチティーエムエル））は、ハイパーテキストを記述するためのマークアップ言語の1つである。

あ、引用と一目でわかりますね。

あと、blockquoteで引用することにより検索エンジンは引用箇所に記述されているテキストを引用であると理解できるので、適切な引用は検索エンジンにも親切だと考えられています。

整形済みテキスト pre

preタグを利用して整形済みテキストとして記述できます。なお、<pre>タグはPreformatted Text（整形済みテキスト）の略です。

■使用例

<pre>
  preタグはPreformatted Text（整形済みテキスト）の略です。
  
  preタグで囲まれた範囲のソースに記述された内容をそのまま表示します。
  
  改行やスペースがそのまま表示されます。
</pre>

<pre>

preタグはPreformatted Text（整形済みテキスト）の略です。

preタグで囲まれた範囲のソースに記述された内容をそのまま表示します。

改行やスペースがそのまま表示されます。

</pre>

■表示例

<pre>～</pre>で囲まれた範囲のコードについては、スペース・改行などを、そのまま等幅フォントで表示されます(※)。

どんな場面でこのタグは使われるんでしょうか？？

プログラムのソースコードをウェブ上に表示する際にpreタグがよく利用されています。使用頻度は少し低めかもしれませんね。

(※)< や > などの特殊文字をpreタグに入れる場合は、< と > に置換する必要があります。

フォームタグ form

「お問い合わせはこちら」などでよく見かけるフォームは<form>タグを利用します。

フォームタグの中にテキスト入力欄、ラジオボタンやドロップダウンメニュー、送信ボタンなどをを追加していきます。

■ソースコード

<form action="#" method="post">
  <p>名前：<input type="text" name="name" value="" placeholder="ウェブスト太郎"></p>
  <p>
    <input type="radio" name="sex" value="man">:男性
    <input type="radio" name="sex" value="woman">:女性
  </p>    
  <p>
    <textarea name="message" rows="8" cols="80" placeholder="なにかメッセージがありましたらこちらに記入ください"></textarea>
  </p>       
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>

<input type="radio" name="sex" value="man">:男性

<input type="radio" name="sex" value="woman">:女性

</p>

<p>

</p>

</form>

■表示例

あ、よく見かけますね。こういったフォームはformタグで作れるのですね。

はい！ただ、フォームタグは他のタグと違ってphpなどのプログラムと連携してデータの受け渡しをするのに利用します。
そのため、他のタグよりも少し難しいのでここではHTML範囲内での書き方を簡単に紹介しますね。

フォームタグの書き方送信先プログラムとの連携方法

まず、formタグで大きく括ります。

なお、formタグ内にあるactionとmethod属性は送信先となるプログラムの連携方法を指定する方式です。

項目	内容
action	フォームの入力内容をどこに送るか、送信先のページを指定します。
method	フォーム送信の通信方式(get/post)を指定します。

actionとかmethodとかさっそく意味がよくわかりません。。

確かにちょっと難しいですね。下手に説明すると余計ややこしくなりそうなので、最初はこういうのがあるというくらいで詳しく覚えなくても大丈夫です。

formタグの中には、インプットタグ<input>、セレクトタグ<select>、(複数行の)テキストエリアタグ<textarea>等のタグを利用して、テキストボックスやラジオボタン、チェックボックスなどの項目を追加することができます。

フォームタグ内でもっともよく利用するタグ inputタグ

formタグの中に入れるよく使うタグで、inputタグがあります。

inputタグでよく使う属性として下記のようなものがあります。

項目	内容
type="〇〇"	入力方式(必須)です。テキスト入力欄やラジオボタンなどタイプを選択します
name="〇〇"	入力項目(必須)です。フォーム送信で受け渡す項目名です。
value="〇〇"	入力値(任意)です。実際に入力した値が入る属性です。初期値を入れる場合に設定できます。
placeholder="〇〇"	プレースホルダー(任意)です。薄い字で記入例などを設定できます。

また、入力方式に合わせてtypeには以下のようなものが設定できます。

項目	内容
type="text"	テキスト入力欄
type="password"	パスワード入力欄
type="radio"	ラジオボタン
type="checkbox"	チェックボックス
type="hidden"	隠し入力欄
type="submit"	送信ボタン

もう無理です！

とりあえず一つずつ説明していきますね！

テキスト入力　input type="text"

名前やログインIDなどの短文のテキストデータを入力項目とする場合はtype="text"を使用します。

■記入例

<form action="#" method="post">
  <p>ログインID：<input type="text" name="loginId" value="" placeholder="webst-taro"></p>
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>ログインID：<input type="text" name="loginId" value="" placeholder="webst-taro"></p>

</form>

■表示例

上記の初期状態では、入力項目（name="loginId"）の入力値(value)は空ですが、値を入力するとvalue属性の中に値が入ります。

その下のtype="submit"は送信ボタンです。form内の入力値をaction="送信先"に送信します。

inputタグをpタグでくくっているのはなんでなんでしょうか？？

pタグで括らないといけないわけではないんですが、aタグのようにinputタグは改行を持たないタグなのでここでは見やすさを重視して一例としてpタグでくくっています。

パスワード入力　input type="password"

ログインパスワードなどの見られたくないデータを入力項目とする場合はtype="password"を使用します。

■記入例

<form action="#" method="post">
  <p>パスワード：<input type="password" name="yourname" value=""></p>
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>パスワード：<input type="password" name="yourname" value=""></p>

</form>

■表示例

(表示上は見えないだけで内部間の通信ではパスワードを閲覧できてしまいます。盗聴などを防ぐためにはSSL通信などで暗号化する必要があります。)

ラジオボタン input type="radio"

ラジオボタン形式で入力項目を作る場合はtype="radio"を使用します。

■記入例

<form action="#" method="post">
 <p>好きな動物：</p>
 <p>
  <input type="radio" name="animal" value="dog">:犬
  <input type="radio" name="animal" value="cat">:猫
  <input type="radio" name="animal" value="bird">:鳥
  <input type="radio" name="animal" value="lion">:ライオン
  </p>
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>好きな動物：</p>

<p>

<input type="radio" name="animal" value="dog">:犬

<input type="radio" name="animal" value="cat">:猫

<input type="radio" name="animal" value="bird">:鳥

<input type="radio" name="animal" value="lion">:ライオン

</p>

</form>

■表示例

チェックボックス input type="checkbox"

チェックボックス形式で入力項目を作る場合はtype="checkbox"を使用します。

■記入例

<form action="#" method="post">
  <p>好きな動物(複数選択可)：</p>
    <p>
      <input type="checkbox" name="animals" value="dog">:犬
      <input type="checkbox" name="animals" value="cat">:猫
      <input type="checkbox" name="animals" value="bird">:鳥
      <input type="checkbox" name="animals" value="lion">:ライオン
    </p>
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>好きな動物(複数選択可)：</p>

<p>

<input type="checkbox" name="animals" value="dog">:犬

<input type="checkbox" name="animals" value="cat">:猫

<input type="checkbox" name="animals" value="bird">:鳥

<input type="checkbox" name="animals" value="lion">:ライオン

</p>

</form>

■表示例

ラジオボタンとチェックボックスは何が違うんでしょうか？

ラジオボタンは一つのみ選択できる項目で使います。
チェックボックスは複数選択可能な項目で利用します。

ほかにも、ユーザーに入力させない（非表示）けれども、埋め込みたい値などはtype="hidden"を利用できます。

ドロップダウンメニューで利用 selectタグ

ドロップダウンメニューを利用したい場合はselectタグを利用します。selectタグの中に、選択肢としてoptionタグを利用します。

■記入例

<form action="#" method="post">
  <p>好きな動物：</p>
  <p>
    <select name="animal">
      <option value="dog">犬</option>
      <option value="cat">猫</option>
      <option value="bird">鳥</option>
      <option value="lion">ライオン</option>
    </select>
  </p>
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>好きな動物：</p>

<p>

</select>

</p>

</form>

■表示例

長文メッセージ用 textareaタグ

長文のメッセージを入力項目にしたい場合は、textareaタグを利用します。

■記入例

<form action="#" method="post">
  <p>メッセージ記入欄</p>
  <p>
    <textarea name="message" rows="8" cols="80" placeholder="なにかメッセージがありましたらこちらに記入ください"></textarea>
  </p>
  <p><input type="submit" name="submit" value="送信する"></p>
</form>

<p>メッセージ記入欄</p>

<p>

</p>

</form>

行数はrows属性、横幅はcols属性で指定できます。

■表示例

とりあえず、難しいということがわかりました。

他のタグに比べるとちょっと難易度が高いかもしれませんね。

フォームタグ自体を自分で記述する機会は少ないかもしれないので、CSSでレイアウト修正できるようにするためにまずは概要だけ抑えておくとよいかもしれません。

ここでは割愛しますが、formタグはpタグの代わりにlabelタグを使って記述したり、ほかにも色々な使い方があります。

また、後述のHTML5からinputタグのtype属性も新たに幾つも追加されました。

ここでは割愛しますが、必要になったときに随時調べて使えるようにしてみましょう。

【PR】初めてホームページを作るなら使いやすいロリポップがオススメ！

HTMLを覚えたらサーバーを借りて本番のホームページを作成してみましょう。初めてのホームページを作るならロリポップがオススメ！

よく使うHTML5タグ

インターネットの発達とともに、HTMLのバージョンもどんどん進化しています。

現在主流のHTMLのバージョンを「HTML5」といいます。

これまで紹介したHTMLタグでもある程度Webページを作ることができますが、HTML5ではこのほかに新しいタグがいくつも登場しました。

たとえば、videoタグなど動画を埋め込むタグが登場してより便利な表現ができるようになりました。

またHTML5では「より意味付け」を意識したタグが登場しました。

簡単にいうと、「ここはヘッダー部分だよ(headerタグ)」とか「ここにはフッダー部分を書いているよ(footerタグ)」といったように

HTMLで書かれた文章を見ただけで、検索エンジンやサイト設計者がページの構成・意味付けを理解できるようなタグがリリースされています。

正しい箇所に正しいタグを使うことでSEO的な効果もいくらか得られる可能性があります。

ここでは、いくつかのよく使われるHTML5のタグを紹介します。

(※)HTML5はInternet Exploler8などの古い環境では動きません。

ヘッダー用タグ header

divタグと同様にグルーピングタグに相当しますが、<header>タグは、ヘッダーに相当する部分に利用できます。

(文書のヘッダ情報を表す<head>タグとは意味が全く異なりますのでご注意ください。)

よくある例としては、Webページ上部のナビゲーションバーや画像などをヘッダーとして定義するためにheaderタグで囲むことが多いです。

■記述例

<header>
  <nav>
    <ul>
      <li>HOME</li>
      <li>COMPANY</li>
      <li>WORKS</li>
      <li>CONTACT</li>
    </ul>
  </nav>
  <div id="main-vg"><img src="main.jpeg" alt="メインビジュアル"> </div>
</header>

<nav>

<ul>

<li>COMPANY</li>

<li>WORKS</li>

<li>CONTACT</li>

</ul>

</nav>

</header>

なお、headerタグを使うことで見た目が変わるわけではなく、divタグでも代用可能です。

しかし、headerタグを利用することで「headerタグで囲まれている情報がヘッダー部に相当するんだな」と人や検索エンジンが理解しやすくなります。

たとえばナビゲーションバーだけheaderタグで囲むとかでも良いのでしょうか？？人によってheaderタグを使う箇所はバラバラでもよいのでしょうか？？

はい。大丈夫です。
ココからココまでをheader部分にするといった厳密な決まりはありません。
あくまで意味づけなので、自分でWebページを作るときにヘッダーと思う部分をheaderタグで括ると良いと思います。

フッター用タグ footer

<footer>タグは、フッター部分であることを示す際に使用します。

サイトの最下部にあるcopyrightやサイトマップなどをfooterタグで括ったりして利用されることが多いです。

■記述例

<footer>
  <p>©Copyright2018 Webst8 .All Rights Reserved.</p>
</footer>

</footer>

headerタグと同様に、footerタグを使うことで見た目が変わるわけではなく、必ず使う必要もありません。

しかし、footerタグを利用することで「footerタグで囲まれている情報がフッター部分に相当するんだな」と人や検索エンジンが理解しやすくなります。

ナビゲーション用タグ nav

<nav>タグは、メニューバーなどのナビゲーション関係のリンクを集めた箇所を示す際に利用されます。

■記述例

<nav>
  <ul>
    <li>HOME</li>
    <li>COMPANY</li>
    <li>WORKS</li>
    <li>CONTACT</li>
  </ul>
</nav>

<nav>

<ul>

<li>COMPANY</li>

<li>WORKS</li>

<li>CONTACT</li>

</ul>

</nav>

header、footerタグと同様に、navタグを使うことで見た目が変わるわけではなく、必ず使う必要もありません。

しかし、navタグを利用することで「navタグで囲まれている情報がナビゲーションに相当するんだな」と人や検索エンジンが理解しやすくなります。

セクション用タグ section

divタグと同様にグルーピングタグに相当しますが、<section>〜</section>タグは囲まれた範囲が一つのセクションであることを示します。

一般的に見出しや文章などの要素をひとまとめして括ります。

■記述例

<section>
  <h2>明日の集合場所のお知らせ</h2>
  <p>
    明日は13時に御堂筋のなんば駅に集合です。
    <br>
    赤いカバンを持っていますので、目印にしてください。
  </p>
</section>

<h2>明日の集合場所のお知らせ</h2>

<p>

明日は13時に御堂筋のなんば駅に集合です。

<br>

赤いカバンを持っていますので、目印にしてください。

</p>

</section>

例えば、ニュース情報、プロフィール情報、特集情報など、意味を持った一つのかたまりをsectionでくくることができます。

同じように、文章をひとまとめにするタグで、article、asideタグなどがあります。

<article>はブログの記事などのように内容が単体で完結するセクションであることを示す際に使用します。

<aside>補足情報のセクションであることを示す際に使用します。

articleやasideに比べてsectionタグはより汎用的なセクションになります。定義があいまいなため、使いどころが人によりまちまちになることが多いです。

なお、レイアウト修正目的で括る場合はsectionではなく、これまで通りdivタグを利用するのが文法的には推奨されているようです。

なんだか使いどころがよくわかりません。これを覚えて正しく使わないとHTMLでWebページを作れないのでしょうか？？

そんなことはありませんよ。今紹介したタグは、「綺麗な文書構造を書こう」といった趣旨で利用されますので別に使わなくてもページは作れます。

個人的な考えですが、HTMLの専門家になりたいとかでなければ、細かい文法を覚えるよりもまずは自分の作りたいページを作成できればそれで良いと思います。

なるほど！

このほかに、新たな機能として追加されたタグもあるので少し紹介しますね。

ビデオ用タグ video

最近よく使われているHTML5でvideoタグというものもあります。

imgは画像を埋め込むタグであるのに対して、videoタグは動画を埋め込むタグとしてHTML5からリリースされました。

■記述例

<video src="https://webst8.com/blog/wp-content/uploads/2017/06/atom-html-make-1.mp4" autoplay poster="posterimage.jpg" loop width="300px"></video>

1	<video src="https://webst8.com/blog/wp-content/uploads/2017/06/atom-html-make-1.mp4" autoplay poster="posterimage.jpg" loop width="300px"></video>

■videoタグの表示例

【PR】ネットショップを始めるなら！無料でスタートできるBASEがオススメ！

ブロックレベル要素とインライン要素

ブロックレベル要素とインライン要素の概要

これまでいくつかのHTMLタグを説明してきましたが、<div>や<a>などのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかにジャンル分けすることができます(※注)。

((※注)ブロックレベル要素とインライン要素でのジャンルわけですが、HTML5からは新たに「カテゴリー」という新たな分類方法でより細かくジャンル分けされています。しかし、簡略のためここでは割愛します。)

ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当します。

ブロックレベル要素とインライン要素のイメージ

このブロックレベル要素とインライン要素には、以下のような違いと性質があります。

ブロックレベル要素

代表的なブロックレベル要素として以下のようなものがあります。

div
h1〜h6
p
ul,ol,li
dl,dt,dd
table
form

ブロックレベル要素は各要素が一つのブロック（塊）で、以下のような特徴があります。

要素の前後に改行が入り、ブロック要素同士縦に並ぶ
横幅や高さを指定できる
余白(margin,padding)が指定できる

先ほどの特徴を実際に例を挙げて説明してみます。

例1. pタグを使った例

[pタグ1]pタグはブロック要素です。

[pタグ2]ブロック要素は改行が入ります。

■HTML文

<p style="border: black solid 1px;">[pタグ1]pタグはブロック要素です。</p>
<p style="border: black solid 1px;">[pタグ2]ブロック要素は改行が入ります。</p>

1 2	<p style="border: black solid 1px;">[pタグ1]pタグはブロック要素です。</p> <p style="border: black solid 1px;">[pタグ2]ブロック要素は改行が入ります。</p>

インライン要素

代表的なインライン要素として以下のようなものがあります。

a
span
img(※)
label
input(※)
textarea(※)

(※)のタグは幅高さや余白の設定が可能

インライン要素には以下のような特徴があります。

要素の前後に改行が入らず、インライン要素同士横に並ぶ
横幅や高さを指定できない(※)
余白(margin,padding)が一部指定できない(※)

先ほどと同様に、実際に例を挙げて特徴を説明します。

例3. aタグを使った例
[aタグ1]aタグはインライン要素です。[aタグ2]インライン要素は改行が入りません。[aタグ3]幅や高さの指定はできません。

■HTML文

<a style="border: black solid 1px;">[aタグ1]aタグはインライン要素です。</a>
<a style="border: black solid 1px;">[aタグ2]インライン要素は改行が入りません。</a>
<a style="border: black solid 1px; width: 200px; height: 200px;">[aタグ3]幅や高さの指定はできません。</a>

<a style="border: black solid 1px;">[aタグ1]aタグはインライン要素です。</a>

<a style="border: black solid 1px;">[aタグ2]インライン要素は改行が入りません。</a>

<a style="border: black solid 1px; width: 200px; height: 200px;">[aタグ3]幅や高さの指定はできません。</a>

なお、インライン要素での余白設定については、性質が結構ややこしくそのまま利用すると予期せぬレイアウトになる可能性があります（利用しない方が良いです）。

marginの上下は効かない（左右は効く）
paddingの上下左右効くが、他の要素の領域を考慮せず侵入する

ただし、インライン要素の中には例外があり、img、input、textareaのように幅や高さ、余白の設定ができるものもあります。

例5. inputを使った例
width200px　height50px

■HTML文

<input type="text" style="width:200px;height:100px;" />

1	<input type="text" style="width:200px;height:100px;" />

なお、ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。

一方、インライン要素の中には文章や他のインライン要素を配置できますが、中にブロックレベル要素を配置することは文法的にはできません。

CSSのdisplayプロパティで性質を変更する

レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てくると思います。

そういったときにCSSで「display」プロパティで解決できます。インライン要素をブロックレベル要素の性質にしたり、ブロックレベル要素をインライン要素の性質ににしたりすることができます。

「display:inline」要素をインライン要素の性質に変更する
「display:block」要素をブロックレベル要素の性質に変更する
「display:inline-block」要素を中間の性質(改行されずインライン要素の性質だが横幅・高さなど設定が可能)に変更する

【PR】ワードプレスを始めるなら！オススメのレンタルサーバー

(補足)特殊文字

< や >などのHTMLのタグとして使う記号は、そのままソースコード上に記述してもWeb上でそのまま表示させることができない場合があります。

表示できる場合もありますが、< や >をタグとして誤認識してしまう可能性があるため、

<は<と記述します(ltはless thanの意味です)。

>は>と記述します(gtはgreater thanの意味です)。

こういった特殊文字は他にもあります。

&は「&」と記述します。

また、 は半角スペースを意味します。

実は、ソースコード(例. Atomで表示で半角スペースを2つ以上連続して記述しても、Webブラウザで見たときは半角スペース一つ分になります。

半角スペースを連続してWebブラウザ場で表示したいときは、 を連続して記述すると、その連続した の個数分半角スペースがWebブラウザでも表示されるようになります。

(補足)headタグの中に入れる主要なタグ

最後に補足として、headタグの中に入れる主要なタグを説明していきます。

■タイトルタグ
ページタイトルをつけるタグです。

<title>個人事業主のためのウェブスクール　Webst8</title>

1	<title>個人事業主のためのウェブスクール　Webst8</title>

■メタディスクリプションタグ
ページの説明文をつけるタグです。

<meta name="description" content="「自分で作る選択を！」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール「Webst8(ウェブストエイト)」です。WordPress、HTML・CSS、SEO対策など個別指導で丁寧にサポートします。">

1	<meta name="description" content="「自分で作る選択を！」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール「Webst8(ウェブストエイト)」です。WordPress、HTML・CSS、SEO対策など個別指導で丁寧にサポートします。">

■リンクタグ
CSSファイルなどの外部リソースを読み込むためのタグです。

<link rel="stylesheet" href="css/styles.css" media="screen">

1	<link rel="stylesheet" href="css/styles.css" media="screen">

【メルマガ登録はこちら！！】
HTML・CSS・お役立ち情報をGET

まとめ

今回は、ホームページを初めて作ろうとしている方向けに、HTMLとはなにか、基本の説明とよく使うタグについて説明しました。

HTMLを理解しているとホームページを作る上でできることの範囲が広がります。

最後に補足で紹介したHTML5をはじめ、「HTML　タグ」や「HTML5 タグ」などで検索すると、今回紹介しなかったタグもたくさんヒットしますので、興味のあるかたは調べてみてください。

参考サイト

■HTMLの厳密な仕様を確認したい場合はこちら
W3C HTML5

■ブラウザごとのHTMLの対応状況を確認したい場合はこちら
caniuse.com

■HTMLのタグの意味をさくっと確認したい場合はこちら
HTMLクイックリファレンス

今回は以上になります。最後までご覧いただきありがとうございました。

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

【NPO法人書物研究会】板倉正子さん「15世紀以降の西洋古書の修復と修復講座をしています」