HTMLは覚えたほうがいいのか?

カテゴリー:ホームページ作成前に...

HTMLは覚えたほうがいいのか?
kaiwa
先生

ホームページは何で書かれているか知っていますか?

kaiwa
生徒

はーい!
ホームページはHTMLっていうもので書かれていまーす!

kaiwa
先生

はい、そうですね。
では、HTMLはもう覚えましたか?

kaiwa
生徒

知りませーん!
だって、 「HTMLなんて知らなくても…」って広告に出てるもーん!

ホームページは「HTML」っていうもので書かれているということは自分でホームページを作ろうと思っている方なら知っていると思います。しかし「HTML」を知っているか?というとそうではない方が多いのも事実です。しかし、やはりホームページ作成の基本はHTMLです。

HTMLを理解しているとたとえHTMLを知らなくても投稿できるブログであれ、WordPressであれイザというときに役に立ちます。投稿の表現の幅が広がります。ここではこれだけは覚えておきたいHTMLを紹介します。

絶対に覚えておいた方が良いHTMLタグ

見出しタグ(h1,h2,h3,h4,h5,h6)

通常の作文や論文、レポートを書く際には文書のタイトルをつけたり、文書の内容ごとに見出しを付けてその文書を読みやすく、理解しやすくします。これはホームページの文章でも同じです。

ペンで紙に書く文書では見出しは行を独立させたり、文字の色を変えたり、大きめの文字で書いたりして見出しと分かるようにします。ホームページ作成の場合には「見出しのタグ」を使用します。

「見出しのタグ」を使わなくてもHTMLやCSSで文字のサイズを変えたり、改行したりして見出しのように視覚的に見せることは可能です。しかしSEOの観点からも見出しには「見出しのタグ」を使うことが必要です。

「見出しのタグ」は「hタグ」ともいわれ「h1」「h2」「h3」「h4」「h5」「h6」の6段階で表すことが出来ます。「h1」は通常ページのタイトルとなりそのページのキーワードを含んでいたりします。続いて「h2」「h3」…と全部で6段階あります。

「見出しタグ」の記述方法

<h1>h1の見出し</h1>
<h2>h2の見出し</h2>
<h3>h3の見出し</h3>
<h4>h4の見出し</h4>
<h5>h5の見出し</h5>
<h6>h6の見出し</h6>

このように記述すると以下の表示例のように表示されます。

見出し

段落のタグ(p)

通常の文章でも「文のかたまり」を「段落」といいます。これはホームページでも同じです。ブログサービスやWordPressなどのCMSで文章を入力すれば何もしなくてもたいていはこの段落のタグで記述されます。ですからあまり意識することのないHTMLタグですが、最も頻繁に使われるタグと言えます。

「段落のタグ」の記述方法

<P>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。</p>
<p>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、「ドンブラコッコ、スッコッコ。ドンブラコッコ、スッコッコ。」と流れて来ました。</p>

このように記述すると以下の表示例のように表示されます。

段落のタグ(p)

改行のタグ(br)

文章を開業したいときに使用するのが「改行のタグ」です。「段落のタグ(p)」と混同しやすいですが、「改行」は単純に行を改めるだけです。見た目では「段落のタグ(p)」は1行隙間が出来ますが、「改行のタグ(br)」では隙間はありません。

「改行のタグ」の記述方法

<P>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。</p>
<p>ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、<br>
「ドンブラコッコ、スッコッコ。<br>
ドンブラコッコ、スッコッコ。」<br>
と流れて来ました。</p>

このように記述すると以下の表示例のように表示されます。

改行のタグ(br)

ここで注意したいのが「改行のタグ(br)」を2つ続けると見た目は段落と同じになりますが、HTMLの文法上は好ましくありません。文章のまとまりを表すのは段落のタグを使うことが正しいです。

こんな「改行のタグ(br)」の記述の仕方は間違い

<p>むかし、むかし、あるところに、おじいさんとおばあさんがありました。まいにち、おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。<br>
<br>
ある日、おばあさんが、川のそばで、せっせと洗濯をしていますと、川上から、大きな桃が一つ、<br>
「ドンブラコッコ、スッコッコ。<br>
ドンブラコッコ、スッコッコ。」<br>
と流れて来ました。</p>

こんな風に記述しても以下のように段落のように表示されますが、HTML文法上は正確ではありません。

間違った記述

リンクのタグ(a)

テキストにリンクを作成することはサイト内の別のページに移動させたい場合や他のサイトを開きたい時など頻繁に使用します。ブログサービスやWordPressなどのCMSではリンク作成のボタンなどがあると思いますがどのようなタグなのかを理解しておくことは大切です。

「リンクのタグ(a)」の記述方法

<!--同じタブまたはウィンドウでリンク先のページを表示する-->
<a href="リンク先のURL">テキスト</a>
<!--別のタブまたはウィンドウでリンク先のページを表示する-->
<a href="リンク先のURL" target="_blank">テキスト</a>

「tardet=”_blank”」をつけると別のタブまたはウィンドウでリンク先のページを開くことが出来ます。

リンクのタグ(a)

画像のタグ(img)

ほとんどのホームページではそれぞれのページで画像を貼り付けています。画像を貼り付けることで文字では表現できないものも視覚的に表現することが出来ます。通常、ブログサービスやWordPressなどのCMSでは画像を貼り付けるためのボタンや機能があるためこのタグを入力することは滅多にありませんが、どのようなタグなのかを理解しておくことは大切です。

「画像のタグ(img)」の記述方法

<img src="画像のURL" width="幅" height="高さ" alt="画像の説明">
<!--画像にリンクを作成する場合-->
<a href="リンク先のURL"><img src="画像のURL" width="幅" height="高さ" alt="画像の説明"></a>

これらも覚えておきたいHTMLタグ

リストのタグ(ul,ol,li)

箇条書きのHTMLタグです。結構活用します。箇条書きには「・」で並べるリストと番号付きのリストがあります。見た目では改行で表現することも可能ですが箇条書きは「リストのタグ」で記述することが大切です。

「リストのタグ(ul,ol,li)」の記述方法

<!--通常の箇条書き-->
<ul>
<li>だいこん</li>
<li>にんじん</li>
<li>じゃがいも</li>
</ul>
 
<!--番号付きの箇条書き-->
<ol>
<li>ももたろう</li>
<li>うらしまたろう</li>
<li>おむすびころりん</li>
</ol>

このように記述すると以下の表示例のように表示されます。

リストのタグ

表(テーブル)のタグ(table,tr,td)

表を作るためのHTMLタグです。おそらく初心者が一番最初に悩むHTMLタグではないかと思います。WordPressなどのCMSでも視覚的に簡単に表(テーブル)を作成できるようになってきています。ただ、やはりこれもHTMLでどのように記述されているかを理解しておくと何かと便利です。

「表(テーブル)のタグ(table,tr,td)」の記述方法

<table>
<tr>
<td>だいこん</td>
<td>200円</td>
</tr>
<tr>
<td>にんじん</td>
<td>180円</td>
</tr>
<tr>
<td>じゃがいも</td>
<td>90円</td>
</tr>
</table>

このように記述すると以下の表示例のように表示されます。

表(テーブル)のタグ

まずはこれだけをしっかり理解しよう

いかがでしょう。HTMLタグはまだまだありますが、ブログサービスやホームページ作成サービス、WordPressなどのCMSを活用して記事を投稿するのであればこれくらいは身に着けておきましょう。これらのタグをしっかり理解出来たらその他のタグも少しずつ理解が進んでいくはずです。

こちらもおススメ!!

こういう人はホームページ公開、運営で失敗しやすい

これまでホームページを公開したことない、運営したことないという方にとって果たしてこれから作成するホームページが効果あるものとなるのかどうかはとても不安に思われることだと思います。実際、ホームページを公... もっと見る

こんな記事が良く読まれています

Amazonプライムの自動更新設定を解除いたしましたというメール

お知らせ&コラム

Amazonプライムというサービスをご存じの方も多いでしょう。Amazonをちょくちょく利用する方ならプライム会員になっている方も多いことと思います。みんなに嬉しい、Amazonプライムプライム会... もっと見る

ポータルサイトを作成するためのテーマ「EVERY」

ポータルサイトを作成するためのテーマ「EVERY」

WordPressテーマ

スマホの普及により多くの方が常にインターネットにアクセスし様々な情報やコンテンツにアクセスするようになってきました。この流れは今後もますます加速すると思われますが、これらのユーザーに満足してもらえる情... もっと見る

WordPressを簡単にインストールできるレンタルサーバー【1】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る

メディアと文章ブロック(WordPress5.5)

WordPress投稿&固定ページ作成マニュアル

画像ブロックで画像の配置を設定できますが、「メディアと文章」ブロックではより豊富なレイアウトが可能になります。メディアと文章ブロックを追加上のスクリーンショットのように左上の「ブロックの追加」アイ... もっと見る

引用ブロック(WordPress5.5)

WordPress投稿&固定ページ作成マニュアル

ホームページやブログを運営していて他のサイトや文献から引用することもあるでしょう。「コピペはいかん!」とは言っても、ホームページを見ている人に分かりやすくするために引用文を載せたほうがいいこともありま... もっと見る

アイキャッチ画像を自動設定してくれる「XO Featured Image Tools」

WordPressプラグインガイド

設定画面が日本語の自動アイキャッチ設定プラグイン投稿や固定ページで記事の内容を分かりやすく表すためのアイキャッチ画像を自動的に設定してくれるプラグインとして「EasyAddThumbnail」を... もっと見る

見出しブロック(WordPress5.5)

WordPress投稿&固定ページ作成マニュアル

「見出し」はページの文章をわかりやすくするために段落などの前に配置します。書かれている文章を的確に表す「見出し」をつけることはサイトを閲覧しているユーザーのためにもSEOの観点からもとても重要です。「... もっと見る

画像の拡大表示をカッコよく「Fancybox for WordPress」

WordPressプラグインガイド

「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。どんな風に画像を拡大するのか?例えば以下のよう... もっと見る

wp_list_categories( パラメータ )

WordPressテンプレートタグ

WordPressテンプレートタグ

カテゴリーのリストをリンク付で表示させます。リンクをクリックするとそのカテゴリーに属する投稿を表示させることが出来ます。サイドバーで使うことが多いです。その他トップページや固定ページのテンプレートでも... もっと見る

このブロックには、想定されていないか無効なコンテンツが含まれています。

WordPress(ワードプレス)

WordPressのブロックエディターでは時々「このブロックには、想定されていないか無効なコンテンツが含まれています。」という表示が出ることがあります。これは初めて見るとびっくりしてしまいますが、落... もっと見る