HPの事で今さら聞けないけど知りたいシリーズ(HTMLタグ編)

「いまさら人に聞けないけど知りたいシリーズ」のホームページ編として、 専門用語を解りやすく(そう言う自分もまだまだ勉強中ですが…)紹介している本ブログ。 今回は「HTMLタグ」です。

WEB初心者の方にとっては、どこかで一度は耳にしたことのあるワードなのに、 いざ他人に説明するとなると、ある意味で最も説明しづらい専門用語の一つではないでしょうか?

そもそもHTMLって何?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、ホームページはHTMLというマークアップ言語(ホームページを表示するための言語)を使って作られています。マークアップとは、もともと雑誌や新聞の編集用語のようで、文章構成の指示のことです。

タグというマーク(命令)を使って、HTML文書の構造(ここは見出しでここからは段落など)を指定したり、文字の大きさや色を変えるとか、画像を表示することなどが出来ます。


HTMLを使ってホームページを作る場合、メモ帳などのテキストエディタを使ってタグを記入していきますが、それをHTMLファイルとして保存しブラウザで開くと、タグの指定されたとおりにブラウザに表示されます。


なのでHTMLの書き方を理解するためには、「タグ」という概念の理解が必要になってくるのです。

では、そのHTMLタグって何?

簡潔に言うと、タグとは、「文字(テキスト)に意味を与えてあげる印のようなもの」です。


HTMLでは、コンピューターに文書の意味(文書構造)を理解してもらうために、タグ付け(Markup:マークアップ)と言われる、< >の記号で、文章をその意味ごとに囲んで作成していきます。
コンピュータは人間のように、ホームページに表示されている文章を読んで、文章中のここが大事だ!など、文章の意味(内容)を判断できません。そこで文章構造(ここは見出しでここからは段落など)とコンピューターに分かってもらう必要があります。そのことで、検索エンジンがあなたの作ったページを正確に認識し、検索エンジン最適化(SEO)につながります。SEOに効果があると、検索結果に表示されやすくなり、ホームページが多くの人に見てもらえるチャンスが広がるということにつながっていきます。

SEOについてもっと知りたい!!と思った方にはこちら。


前回の「HPの事で今さら聞けないけど知りたいシリーズ(SEO編) 」で詳しく説明しておりますので良かったらご覧ください。

タグの書き方

タグの記入方法ですが、基本的には<開始タグ>と</終了タグ>の2つを1セットとして使います。終了タグにはタグ名の前に/(スラッシュ)を付けます。

例えばページのタイトルを指定する場合は、<title>~</title>のように記述します。 また改行を指定する<br>タグのように、終了タグがないものもあります。
その他の主だったタグですと

となりますが、上記以外にもたくさんのタグがあります。

また、タグは半角英数字(123abc)を使って記入する必要がありますので、全角文字(123abc)ではダメです。
古い規格のHTMLでは大文字、小文字どちらでも良かったのですが、最近は小文字で記入する流れになっているようです。

実際に見てみよう!!

HTMLやタグがどんな感じで書かれているか試しにみてみましょう。

弊社人気サービスのホームページ館 https://web.sendenkan.com/

こちらのページを表示したら、画面を右クリックをし、「ページのソースを表示」を押してみましょう。

すると、英数字と記号が組み合わさった文章が出てきます。

これが、このホームページのHTMLで記述された文章になります。
 文字をタグ< >で囲ってあげることにより、ただの文字がh1(見出し)やp(段落)といった意味を持って Web上に表示されているのがわかりますよね。

ChromeやSafariといったWebブラウザがこのHTML文章を読み、ホームページをどのように表示するか判断しているのです。
どのようホームページでも、このソースコード(HTML文章)を表示することができますので、 気になるホームページがあったら見てみるのも、いいですね。

さらにホームページについて詳しく知りたい、相談したい、という方はお気軽にお問合せください。ご連絡お待ちしております。
ホームページ館 https://web.sendenkan.com/
フリーダイヤル 0800-100-3333

【運営会社・宣伝館の公式動画、続々アップ中!】
『見るだけで宣伝館がわかる!』と高評価をいただいている動画をただいま公開中です。ぜひ視聴して、チャンネル登録してみてくださいね♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です