ホームページの基礎知識 ホームページ制作

初心者さんが抑えておくべきHTML基礎知識

投稿日:

突然ですが、今アナタが見てくれている、このページ…

インターネット上で、今見て頂いているように表示するために、どうやって作られているかご存知ですか?

信じられないかもしれませんが…

このページに表示されてるディースケも、ヒヨコさんも、何もかも、実は、全て文章で作られてるんです!

こんなキュートなオレが、文章でデキてるって言われても信じがたいよな(笑)

まぁ、論より証拠。このオレが、どんな文章になっちゃうのか見て頂こう。

<div class="st-kaiwa-box kaiwaicon3 clearfix">
<div class="st-kaiwa-face">
<img src="https://selfservice-homepage.com/wp-content/uploads/2018/05/hiyoko-sensei-300x300.png" width="60px">
<div class="st-kaiwa-face-name"></div>
</div><div class="st-kaiwa-area">
<div class="st-kaiwa-hukidashi">こんなキュートなオレが、文章でデキてるって言われても信じがたいよな(笑)
<p>まぁ、論より証拠。</p><span class="huto">このオレが、どんな文章になっちゃうのか見て頂こう。</span><br />
</div></div></div>

まさか、あのヒヨコが、こんな暗号みたいな文章で作られてたなんて、ビックリした人も多いんじゃないかな。

でも、よく見てもらうと、実際にヒヨコのセリフが、日本語で書いてあるの気付くでしょ?

そう、この文章は、ヒヨコが吹き出しで発言してる内容を表しています。

もちろん、ヒヨコだけじゃなく、このページに表示されている全て、もっと言えば、インターネット上にある全てのホームページが、この文章で書かれているんです。

この文章こそ、ホームページを作るための特別な言語…

ハイパーテキストマークアップランゲージ...

略して、 HTML ( HyperText Markup Language )といいます(笑)

ちなみに、ヒヨコ部分だけでも、結構な量のHTMLが書かれていましたが、このページ全てをHTMLにしたら、一体どのくらいのボリュームになるのか気になりませんか?

HTMLだけが書かれているページのことを、HTMLソースと呼びますが、そのHTMLソースは以下の方法で、確認することができます。是非、ご覧になってみてください(笑)

HTMLソースを見る方法

  • windowsの人 : ctrl + U を同時押し
  • macの人 : option + ctrl + U を同時押し
  • マウスを右クリックして、ページのソースを表示をクリック

HTMLの役割は、ホームページの設計図

このページのHTMLソース見ていただけましたかw?
たった、1ページだけなのに、膨大な量のHTMLで書かれていて、ビックリしたかもしれません。

勘のよい社長さんは、既にお気付きかもしれませんが…

そのとおりです…。
ホームページを作るという事は、このHTMLを、書いて、書いて、書きまくること(笑)

そして、HTMLとは、掲載する情報と、その構造を併せて伝える、ホームページを形作るための特殊言語。

つまり、ホームページの設計図であり、言うなれば 家の骨組みなんです。全ての土台になる部分ですから、このHTML無くして、ホームページは成り立たちません。

WEB制作業者さんも、もちろん、このHTMLを書いてホームページを作っています。

WEBの知識が無い初心者さんが、ゼロからホームページを作るのは、ハードルが高いとお伝えしましたけど、その理由を体感頂けたでしょうか?

本業も忙しいのに、こんなの自分で書けるかよ!って、ページを閉じようとした社長さん…待ってくれよ!

HTMLなんて覚えなくても、ホームページは作れるんだから(笑)

優秀な翻訳家、ホームページ作成ソフト。

本来であれば、ホームページを作るのに HTMLは必須です。

もし、アナタがWEB制作業者になるのを目指すなら、HTMLは必修。HTMLが読めない、書けないじゃ、お話になりません。

でも、ご安心ください。

アナタは、HTMLを覚えなくても良いんです!なぜかって?

それは、ホームページ作成ソフトを手に入れてしまえば、全部やってくれるから(笑)

そう、ホームページ作成ソフトは、
HTMLの翻訳家。

HTMLを知らない初心者さんでも、Wordや、メールを書くように、普通に文章を入力するだけでOK。あとは、ホームページ作成ソフトが、HTMLに書き直してくれるのです!

もちろん、HTMLを覚えてしまえば理想的ですし、ホームページ作成ソフトに投資する 3万円も節約できますが、その代わり、多大な時間と労力を必要とします…

ディースケとしては、HTMLの習得に 1年を費やすなら、HTMLはホームページ作成ソフトに任せて、ホームページの運用や、SEO、コンテンツを作ることに 1年を使った方が、よっぽど価値的で、目標達成の近道だと考えています。

なぜなら、アナタの目的は、HTMLをマスターしWEB業者になる事ではなく、自分で作ったホームページで、集客アップ&売上げアップのはずだから。

HTMLを覚えるより、もっと大事な事があるんです。

ホームページ作成ソフトで、時間を買うと思ったら、3万円なんて安いもんだろ。

そのホームページが、お客さん捕まえて来てくれたら、減価償却できちゃうし。

HTMLの基本的な記述ルール

HTMLは、ホームページ作成ソフトに丸投げしちゃって良いのですが、基礎的な知識を少しでも知っておくと、ホームページ作成ソフトを操作する理解も深まります。

と言うことで、ここからは、ちょっと知っておけば役立つHTMLの記述ルールについて、お伝えしておきます。

この時点では、無理に覚えなくても大丈夫だぜ。

ホームページ作成ソフトを使い始めたら、自然と覚えちゃうだろうから。今はサラッと読んどこう!

HTMLタグには、1つ1つ意味がある。

初めて見ると、暗号にしか見えないHTMLですが、当然ながら、このHTMLには、意味があり、沢山の記述ルールがあります。

先程、当サイトのヒヨコが、HTMLで書かれているのをご覧いただきましたが、その中身をみると、<div>や、<p><img>などの、記号が、所狭しと書かれていたのに気付いていただけたでしょうか?

これらは、HTMLタグと呼ばれ、1つ1つに構造的な意味と役割を持っています。

より具体的に説明するために、1つの HTMLタグを例に挙げて説明していくぞ。

HTMLの例 タイトルタグ

<title> ここに書く内容が、このWEBページのタイトル(題名)になるよ。 </title>

例に挙げた<title>から始まるHTMLタグは、タイトルタグと呼ばれるHTMLタグの1つ。

そして、このタイトルタグの意味は、そのページのタイトル(題名)を意味します。ページを1つの本に例えると、このタイトルタグは、本の題名に当たります。

黄色くマーキングされた <title>と、赤くマーキングされた </title> で挟まれた中身の文章が、そのページの題名として、ホームページ上で表現されるんです。

もちろん、本のタイトル(題名)ですから、当然、1ページに対して、1回しか使われないと言うルールがあります。

開始タグと、終了タグで囲むのが基本。

ちなみに、黄色くマーキングされた <title> と、赤くマーキングされた </title> で、スラッシュ( / ) の有無に気付いていただけましたか?

実は、スラッシュの有無は、そのHTMLタグの始まりと、終わりを意味しています。

黄色くマーキングされたスラッシュの無い方が、開始タグ
赤くマーキングされたスラッシュがある方が、終了タグ で、
HTMLタグは、必ず 開始タグから始まり、終了タグで閉じることが文法上の記述ルールになっています。

一部、例外的なHTMLタグもありますが、ほとんどのHTMLタグが、開始タグ、終了タグがあり、基本的な記述ルールは、開始タグと終了タグの間に、ホームページで表示したい文章を記述すると言うのは、どのHTMLタグであっても変わりません。

HTMLタグで文章を挟むと、その文章は、挟まれたHTMLタグの意味や、役割を基に表現されるってことだな。

覚えとくと便利!使用頻度の多いHTMLタグ

ここでご紹介する HTMLタグは、とくに頻出度が高いものです。

ホームページ作成ソフトを使う前提であれば、覚える必要もないのですが、
覚えてしまえば、そっちの方が早かったりもしますので、ざっくりご紹介しておきます!

見出しを表す Hタグ

Hタグ記述例

<h1> ここに書く内容が、記事の見出しになるよ。 </h1>

見出しタグは、ページ内の見出しを定義するHTMLタグです。h は、headingの頭文字で、見出しと言う意味ですね。

記述例には、h1を挙げましたが、実は、見出しタグは h2,h3,h4,h5,h6の6段階用意されていて、番号が小さいものほど、重要な見出しになります。本(Book)で言うところの、章、節、項などに当たり、文章構成にも影響を及ぼします。

SEOにおいても影響度が高いので、h1~h6までの使い方については、ちょっと注意が必要です。

段落を意味する Pタグ

Pタグ記述例

<p> ここに書く内容は、一つの段落として認識されるよ。 </p>

Pタグは、Pは、paragraphの頭文字で、段落を表すHTMLタグです。<p>~</p>で囲まれた範囲が、一つの段落として認識されます。

よく、改行代わりに、Pタグが使われてしまう誤ったケースも見られますが、文章の内容・意味合いを考慮して、使用する必要があります。

リンクを張るための aタグ

aタグ記述例

<a href="ここにリンク先のURLを記述します。"> ここに書く文章をクリックすると、リンク先に飛びます。 </a>

aタグは、アンカータグと呼ばれ、船の錨を表す Anchorの頭文字が使われています。
アンカータグの存在があったことで、インターネット、ホームページの利便性が高まったと言っても過言ではなく、それが為に、使用頻度も非常に高い HTMLタグの1つです。

注意点は、記述例の通り、特殊な方法( href="URLを指定" )で、リンク先のURLを指定します。このhrefは属性と呼ばれ、HTMLタグの開始タグ内に記述され、タグの持つ本来の意味以外の 付加情報を表現するモノです。
aタグには、この href属性だけでなく、他にも、target属性や、title属性など様々な属性が用意されています。

画像を表示させたいなら imgタグ

imgタグ記述例

<img src="ここに表示したい画像のURLを指定" alt="その画像の説明文を記述する" />

imgタグは、imageの略で、画像を表示させたいときに使うHTMLタグです。使用頻度が極めて高く、覚えておくと便利です。
このimgタグは、他のHTMLタグと異なり、開始タグ、終了タグがありません。記入例にある通り、imgタグ単体で使用されます。

また、aタグ同様に、多くの属性が用意されており、表示させたい画像は、src属性で指定する他、その画像の説明文を記述する alt属性などが使用されます。

文章中での改行なら brタグ

Pタグ記述例

<br />

brタグは、Breakの略で、改行を意味するタグです。imgタグと同じく、開始タグ、終了タグがなく、brタグ単体で使われます。

次の講座は、HTMLとは別の言語、CSSってものを紹介するぜ!

次の講座
初心者さんが抑えておくべきCSS基礎知識

ホームページ作成ソフトに任せて良しとは言われても、暗号のような HTMLをご覧になって、テンションが下がり気味の社長さんもいらっしゃるかもしれません… 弱っているところに追い打ちをかけるようで申し訳な ...

メルマガ始めました!

産地直送
店舗集客アップに役立つ情報を、WEB業界からダイレクトにお届けする、ディースケのメールマガジン雨天決行は、もちろん無料です(笑)
ディースケが、WEB業界の現場から、店舗集客に役立つ情報を、お届けしちゃうWEBマガジン…
その名も"雨天決行"

雨が降ろうと、槍が降ろうと、頑張る社長さんのために、ブログじゃ言えない 訳ありノウハウや、お勧めツールなど、情報盛り沢山(予定)

無料登録はこちらから

-ホームページの基礎知識, ホームページ制作

Copyright© セルフサービスホームページ , 2024 All Rights Reserved.