ホームページ制作に必須!15分でわかるHTML基礎/台東区のWEB制作会社

- WEB担当者の相談室 -

私たちは、台東区浅草雷門でホームページ制作・運営代行インバウンド対応/集客支援をしている会社です。

ホームページ制作に必須!15分でわかるHTML基礎

WEB制作について調べると、HTMLというキーワードがよく出てきます。HTMLって何ですか?

HTMLは Hyper Text Markup Language の略で、ほとんどの場合ホームページを作るときに必ず使う一番基礎となる言語です。

ホームページ制作に必須!15分でわかるHTML基礎:目次

ホームぺージ・スタートアップで初期費用を抑え運営注力

初期費用を抑えてホームページ運営に注力

ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。

HTMLの基礎知識

企業のホームぺージ担当者の方でも、ホームぺージ制作を外部の制作プロダクションに依頼するときに、HTMLの話が出てくることがあると思います。ここでは企業のホームぺージ担当者のために、かんたんにHTMLについて解説いたします。

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略称で、ホームぺージのほとんどはHTMLをベースに作られています。

現在はHTML5という規格のHTMLが主流ですが、他にもXHTMLやHTML4などで作られたホームぺージも多く存在します。これらの違いはバージョンの違いと考えていただければ大凡問題はありません。他の規格と比べて新しいバージョンのHTML5では、比較的新しいブラウザで使える便利な機能が多く存在します。またHTML5は、HTMLだけでなくCSSやJavascriptなどの周辺技術も含めた総称として呼ぶこともあります。

マークアップとは

HTMLはマークアップと呼ばれ、文章構造などの情報をコンピューターに伝えるための言語です。具体的には「このテキストはタイトル」「このテキストは文章」とHTMLタグを使い文字情報に情報を付与します。そうすることでコンピューターは文章の重要度や構造を理解することが出来ます。

Google などの検索エンジンもHTMLに付与された情報、つまりHTMLタグをたよりにホームページの中身を判断するので、SEO対策でもHTMLの構造を意識することは重要です。

ホームページで使われているHTMLの確認方法

次に、実際にホームページでどのようにHTMLが使われているかを見ていきましょう。

ここではChromeを例にご説明します。今ご覧のこのページでも他のホームページでもなんでも結構です。右クリックをしてみてください。メニューが表示されるので、「ページのソースを表示」(上画像赤枠)をクリックしてください。

上記のようなHTMLが表示されますね。これが、実際にご覧のホームページに使われているHTMLのソースコードです。

よく使われるHTMLタグ

Title : タイトルタグ

タイトルタグはSEO対策では最も重要なタグで、ページ(ホームぺージ)のテーマが何かを示します。

例)
<title>株式会社ケイツー・インタラクティブのホームページ</title>

タイトルタグの文字列はホームページ(ブラウザ画面)には表示されませんが、ブラウザ画面外枠の左上(上記画像赤枠参照)に表示されたり、ブラウザのお気に入りに保存したときに表示されます。検索エンジンが最も重要と評価するタグです。

Hタグ : 見出しタグ

ホームページ(ブラウザ画面)に見出しとして表示されるタグです。Hタグもコンピューターや検索エンジンに重要な要素と判断されます。Hタグは、1~6まであり、それぞれ重要度が違います。最も重要とされるのがh1で次に2、3と続きます。

例)
<h1>このページの大見出し</h1>
<h2>このページの中見出し</h2>
<h3>このページの小見出し</h3>
Pタグ : 段落タグ

文章(ページ内本文)を表示するのに使うタグです。段落ごとにPタグで括ります。

例)
<p>これはPタグを使った文章表示です。</p>
LIタグ : リストタグ

目次や項目・要点が並ぶ場合に使います。

例)
<li>項目1の文</li>
<li>項目2の文</li>
<li>項目3の文</li>
IMGタグ : イメージタグ

画像を表示させるのに使います。

例)
<img src="画像へのパス" alt="画像の意味をテキスト化">

細かいことは抜きにして最低限ですが、これだけのタグを押さえておけばそれなりに情報を伝えるホームページを作ることが出来ます。

かんたんなホームぺージを作ろう!!

HTMLファイルの作り方

HTMLを作るのに必要なのは、テキストエディターです。多機能なページやコンテンツボリュームのあるホームぺージには専用のエディターが必要ですが、かんたんなものであれば「メモ帳」でも問題ありません。

今回はメモ帳でかんたんなホームぺージを作り、HTMLがブラウザで表示される仕組みを理解したいと思います。ここで気をつけたいのはファイルの保存形式ですが、HTML形式(.html)で保存してください。

HTMLの基本構造

ファイルの準備ができたら、まずは「HTMLタグ」「HEADタグ」「BODYタグ」をエディターに書き込みます。

<html>
 <head></head>
 <body></body>
</htme>

これがHTMLの基本構造です。もう少し細かく見ていきましょう。

<html>
 <head>
  HTMLのメタ情報、つまりどのような仕様かを記載します。(文字コードやタイトルなど)
  Googleの検索結果に出てくる文章(概要)もここに記載します。

 </head>
 <body>
  HTMLのブラウザでの表示要素を記載します。(見出しや段落です。)
 </body>
</htme>

このように、HEADタグとBODYタグの中に記載する内容は異なります。BODYタグの中身は表示内容によってHTMLタグが異なりますが、HEADタグ内は大凡決まったパターンになってくることが多いです。

HTMLのソースコードをコピーしてホームページ制作

それでは実際ホームページを作ってみましょう!

今回のホームページ制作に使うエディターは、かんたんなモノなので何でも大丈夫です。下記のコードをコピー&ペーストしてください。

<html>
 <head>
  <meta charset="utf-8">
  <title>Hallow HomePage</title>
 </head>
 <body>
  <h1>Hallow World!</h1>
  <p>はじめてホームページを作りました。</p>
 </body>
</html>

新しく「<meta charset="utf-8">」というタグが追加されています。このタグを記載しないとホームページが文字化けしてしまいます。現在よく使われている文字コードはutf-8ですが、Shift_JISやEUC-JPなどが使われる場合もあります。

メタタグで設定した文字コード(赤文字部分)でファイルを保存して、そのままファイルをダブルクリック、もしくはブラウザにドラッグ&ドロップすればホームページが表示されます。

実際にWEBサーバーにHTMLファイルをアップロードしてホームページを閲覧する仕組みは、『ホームページが見れる仕組みを知りたい』も是非参考にしてください。

ホームページ制作に必須!15分でわかるHTML基礎のまとめ

このページでは本当にかんたんなホームページの作り方を紹介しました。ここでご紹介したHTMLを押さえておければ、ホームページのリニューアルや運営の際に制作現場とのやり取りがスムーズになるかと思います。是非、お役立てください。

SEO(検索エンジン)を考慮するのであれば特にタイトルタグ、見出しタグ、そして文章構造に気をつけてHTMLを記述して、正しく検索エンジンにページの情報を伝えることを心がけてください。

ケイツー・インタラクティブでは基本的に検索エンジンを考慮したHTMLを実装します。ご不明な点やご要望などございましたらお気軽にお問い合わせください。

本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

ホームページリニューアルのご相談・お問い合わせ

ホームぺージ・スタートアップで初期費用を抑え運営注力

初期費用を抑えてホームページ運営に注力

ホームページ・スタートアップ は初期費用を抑えてホームページ運営に注力したい方向けホームページ入門パッケージです。ホームページ運営の方法がよくわからない一緒に戦略を考えてくれるブレーンがいないなどお悩みのホームページ担当者にもおすすめのサービスです。

WEBマーケティング
CMSツール導入支援

ホームページ制作に必須!15分でわかるHTML基礎に関連する記事

コンテンツを魅力的に見せるレイアウト

コンテンツを魅力的に見せるレイアウトの一番のポイントはファーストビューです。ファーストビューで見せるデザインは、ホームページで最も重要な要素です。ユーザーは一瞬でページの善し悪しを判断し、もし興味が無ければすぐにページを閉じてしまいます。ページを読んでもらうポイントは「魅力的な体験」「簡潔で具体的な内容」を提示出来ているかどうかです。

CMSツール導入支援

K2 WAY

ソリューション

施策事例 Client Voice

WEB担当者の必見ノウハウ 7 選