ホームページに必須!HTMLのおさらい/台東区上野のWEB制作/訪日外国人集客会社

株式会社ケイツー・インタラクティブ [K2-interactive]

WEB担当者の相談室

ホームページに必須!HTMLのおさらい

 

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

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

ホームページに必須!HTMLのおさらい:目次

制作しない方のためのHTMLの基礎知識

制作をしない企業のWEB担当者でも、WEBサイトのリニューアルときにHTMLの話が出てくることがあると思います。そのような方のために、かんたんにHTMLについて解説いたします。

マークアップとは

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

よく使われるタグ(エレメント)の紹介

Title : タイトルタグ

ページテーマが何かを示します。ブラウザの画面には表示されませんが、画面外枠の左上に表示されたり、ブラウザのお気に入りに保存したときに表示されます。検索エンジンが最も重要と評価するタグです。

例)
<title>株式会社ケイツー・インタラクティブのホームページ</title>
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ファイルの作り方

最初にテキストエディタ(メモ帳でもOK)を用意します。上記で解説したタグを念頭におきつつ、まずは「HTMLタグ」「HEADタグ」「BODYタグ」をエディターに書き込みます。

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

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

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

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

このように、HEADとBODYは記載する要素が少し違いますが、HEADタグ内は大凡決まったパターンになってくることが多いです。

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

実際ホームページを作ってみましょう。エディターは何でも大丈夫です。下記のコードをコピー&ペーストしてください。
新しく「<meta charset="utf-8">」というタグが追加されています。このタグを記載しないとホームページが文字化けしてしまいます。現在よく使われている文字コードはutf-8ですが、Shift_JISやEUC-JPなどが使われる場合もあります。

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

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

ホームページに必須!HTMLのおさらいのまとめ

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

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

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

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

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

ホームページに必須!HTMLのおさらいに関連する記事

ホームページ制作の成功の可否を決めるワイヤーフレーム
コンテンツを魅力的に見せるレイアウト

K2 WAY

ソリューション

施策事例 Client Voice

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

K2の得意なこと

WEBマーケティング

WEBマーケティング

顧客とのコミュニケーション課題を解決して、御社のビジネスを成功につなげるWEBマーケティングのプロ集団です。

WEBマーケティング

インバウンド集客PR

インバウンドの集客PR

IT/SNSを使ったプロモーションからイベント開催まで一貫したO2Oブランド構築で集客・PRをご支援をいたします。

インバウンド集客PRを見る

CMSツール導入支援

CMSツール導入支援

HTMLが判らなくてもかんたんにWEBサイトを更新出来るCMSツールを活用して、見込み客をを増やしませんか?

CMSツール導入支援を見る