ホームページ更新担当者様向けHTML基礎講座
Publish2011/01/08(土)
Update2018/10/08(月)
この記事では、ホームページの更新・運用担当者様向けに今更聞けない基礎知識として、HTMLの基礎中の基礎について解説します。
知っているようで知らないこと、知っているけど勘違いしていたことなどあるかと思いますので、一読していただいてサイトの運用をする際のお役に立てれば幸いです。
目次
- はじめに
- HTMLの概要
- よく使用される本文内のHTMLの要素
- 基礎的なHTMLを書いてみよう
- meta要素について
- Googleのサポートしているmeta要素を使用する
- Web担当者が覚えておいて損はないHTML5タグ
はじめに
ホームページ/Webサイトがどういう仕組みで表示されているかはご存じでしょうか？
まず、ホームページは、HTMLという言語で記述されています。
HTMLをインターネットエクスプローラーなどのブラウザが読み取り、サイトを表示しています。
大切なことは、文字による情報が画面に投影されているものだということを知ることです。
そのため、変更を行う場合は、文字によって変更が行われているということを理解しておくことが重要です。
ただ、HTMLは日常生活で見かけないものなので、ちょっと「とっつきにくい」というイメージになりがちです。
HTMLはプログラム言語ではありませんが、プログラム言語と混同される場合も多く、そのイメージが助長されていると感じることもあります。
しかし、実際にサイトを運用する場合に覚えておくことは実は多くありません。
HTMLには特定のルールがあり、そのルールさえ守れていれば問題がありません。
サイトを丸ごと制作するのであれば話は別ですが、既存のサイトを運用していくのであれば、必要最低限のものを覚えるだけですみ、そこまで時間がかかるものでもありません。
例えば、「タグで文字を囲う」というルール。
HTMLの基礎ともいえるルールで、多くのHTMLタグと呼ばれる記述の指定のベースともいえるルールです。（一部例外はあります。）
基本的にはこのルールさえ分かっていれば、いろいろなシーンで応用が利きます。
文字を強調する場合は、以下のようにHTMLで書きます。
<strong>強調する文字列</strong>
文字を強調する場合は、<strong></strong>の間に文字を入れると強調文字になるという具合です。
この基本ルールさえ覚えておけば、あとは「strong」のようなタグと呼ばれる文字列を覚えるだけといっても過言ではありません。
このルールさえ把握できていれば、ある程度はどんな内容か分かるようになりますし、分からなくても検索する手がかりにはなります。
理屈が分かれば修正をするのにもそんなに怖くないんじゃないでしょうか。
HTMLの概要
では実際にHTMLとはどういうものかを具体的な内容で説明していきます。
サイトを構成する上で必要なタグ
以下で紹介するタグは、サイトに必ず入っている必要最小限のHTMLタグになります。
逆に言えば、最低限これだけあれば世界に文書を公開できる準備ができるともいえるくらい重要で基本的なものになります。
まずはこの4つを覚えてください。
最悪この4つだけでサイトを表示する事もできます。
ただし、運用する上ではこれらのタグを新たに追加する必要はおそらくありません。
予備知識として必要な内容という程度の認識で考えていただいた方が良いかとは思います。
html
<html></html>
HTMLは一部例外を除いて基本的に全部この中に含みます。
この記述の内部にHTMLを記載するというのが基本的なルールになります。
head
<head></head>
画面に表示されない部分でHTMLの情報などが入っているエリアを指定しています。
サイトの名前や説明などを入れる部分がここになります。
以下で紹介するmetaタグはこちらの中に記述する形となります。
body
<body></body>
画面に表示される部分はここの中に記述します。
画像や文章など、画面内に表示させたい場合はここの中に記述しましょう。
title
<title></title>
「head」タグ内に入れるそのページの名前を設定するタグです。これはそのページごとにきちんと書いておきましょう。
よく使用される本文内のHTMLの要素
次に、本文内で使用されるHTMLの要素を紹介します。
これらの要素は、ページ内での特定キーワードの重要性を上げたり、ページ内の文書構造を作っていく上で非常に重要です。
見出し要素
いわゆるhタグと呼ばれるものです。
hタグは見出しタグという意味で、ページ内の見出しを定義するための要素です。
上から順番に、h1,h2,h3というように数字で見出しレベルを設定して使用します。
サイト内の見出し構造を正しく記載することで、ページ内の文章が構造化され、検索時の評価にも利用されると言われています。
見出しタグはh1からh6までになるので、h7以降はありませんのでご注意ください。
<h1></h1>
strong
「strong」は強調させるための要素です。
文書内の特定キーワードが重要である場合に使用する属性になるのですが、その効果から過去にSEOで悪用されてきたことがありますので、ページ内での「strong」の多用は禁物です。
文章の内容を鑑みて、本当に重要な場合のみに使用しましょう。
<strong></strong>
リスト要素
ページ内でリストを書く場合に使用する属性です。
リストではなく、改行することで対応されているケースも多々見受けられますが、本来はリスト要素で作成するのが好ましいです。
下記で書いた「ul」(順不同型リスト)以外にも「ol」(番号順リスト)、「dt」(定義語型リスト)などもあります。
<ul><lil></li></ul>
基礎的なHTMLを書いてみよう
実践編として、試しに今回紹介した基本的な4つのタグを使って実際にページを作ってみましょう。
サイト制作者の多くはまずここからスタートしていると言っても過言ではないほど基本的な内容ではありますが、文字を実際に入力して保存し、ブラウザで表示されるとものすごく実感がわきます。
実際の手順
まずは新規テキストファイルを用意します。
そしてそのテキストファイルを開きタグを書いてください。
サンプルとしてこんな感じで大丈夫です。
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>サンプルページ</h1>
表示できたよ！</body>
</html>
コピペでもいいですが、このくらいは書く量も少ないですし、なにより実際の自分が書いたものができ上がる感覚をつかめますので、コピペではなくしっかりとタイプしてみてください。
書けたら一旦そのまま保存しましょう。
保存が終わったらファイルを保存します。
保存する際は別名で保存するようにして、ファイルの名前を「index.html」に変更しましょう。
注意点
- ※.htmlのような拡張子と呼ばれる文字が表示できていない場合は、Windowsの場合は適当なフォルダを開いて「ツール」にある「フォルダオプション」の「表示」タブから「登録されている拡張子は表示しないのチェックをはずす」で「OK」にして設定を変更すると表示されるようになります。
Macの場合は Finderの「環境設定」の「詳細」タブから「すべてのファイルの拡張子を表示」のチェックボックスにチェックを入れる事で表示されます。 - ※ファイル名を変更する時は全角文字ではなく半角英数にしましょう。
「index.html」に変更する事で、ファイルがHTMLで作成された文書であるという事をコンピューターが認識できるようになります。
「index.html」はフォルダにアクセスした際に一番最初に表示されるファイルの種類という意味でお考えください。
（この部分は厳密にいうとちょっと違うんですが、そういう解釈で考えていても間違いではありません。）
変更後そのファイルをダブルクリックするか、「index.html」ファイルをブラウザにドラッグすると、記載した内容がブラウザで表示されている事を確認できます。
自分が書いた文字の情報がブラウザで表示されたというだけの事ですが、最初に表示された時にはすごく達成感があります。
まずはこのような小さい成功を積み重ねていくという事が大事なので、少しづつステップアップしていきましょう。
meta要素について
次は運用の実践に移ります。
まず紹介するのはHTMLの「meta要素」についての説明になります。
上記で少し説明しましたがHTMLのmeta要素は、ブラウザで見た際には見えない項目になるので「head」タグ内に記載します。
見た目上はサイトに反映されませんので、必要ないと考えてしまいがちですが、HTMLとしてはなくてはならないものです。
HTMLの仕様としては「HTML文書の各項目を定義する為のもの」であることがその理由ですが、わかりやすく考えるとSEO面での影響があるためです。
例えば、一番重要といわれている「title」だと「ページの名前」を設定する事になるんですが、このページのタイトルの設定によって検索順位に影響があるといわれています。
SEOの詳細についてはまた別の機会で説明しますが、検索時に表示される文字列にもtitleは使用されるので、検索順位だけではなく、クリック率にも影響しますので正しく設定されることでサイトのアクセス数にも影響してくる重要な要素になります。
この認識は非常に大切な部分になりますので、覚えておきましょう。
meta要素の種類
では実際によく使用されるmeta要素とその意味を紹介します。
文字コード
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
そのHTML文書がどの文字コードで記述されているのかを定義する為のmeta要素です。
設定することで、サイトがどの言語で記載されたものなのかを判別することができるのですが、正しく設定できていないと文字化けしてサイトを確認することができなくなります。
日本語のサイトの場合は、「UTF-8」「Shift-JIS」「EUC-JP」などの文字コードがありますが、現状では主なサイトは「UTF-8」になっています。
使用しているプログラムなどが文字化けしている場合は、まず文字コードを疑いましょう。
タイトル
<title>ふにろぐ</title>
例でも紹介したHTML文書の名前を設定する項目が「title」です。
SEO的にもかなり重要な要素ですが、意外と知られていませんがブラウザでブックマークする際にもtitleの文字列が利用されます。
ブックマークしてもらう際にも分かりやすいように名前を設定するということを意識してみるといいかと思います。
もちろんtitleはきちんとその文書で取り扱われている内容を記述してあげる必要がありますので、関係のないキーワードは除外するようにしておいたほうが安全です。
関係ないキーワードを詰め込むとSEO的にもいい効果が望めません。
また検索結果に表示される際には文字数には制限がありますので、全角25文字程度の文字数で設定するといいです。
ページの説明
<meta name="description" content="ふにすのブログ「ふにろぐ」です。" />
「description」はHTML文書に対する説明文を定義する項目です。
設定した内容は、基本的には検索結果に反映されますので、検索結果で表示された画面でも「何のページなのかが分かりやすい」内容を設定しておくことが重要です。
よくある悪いパターンとしては、サイト内の全ての「description」が同一のものになっている場合があります。
この場合、全てのページが同じ内容といっているようなものなので、よくありません。
基本的には、それぞれ個別の内容をページごとに設定する必要があります。
理想としては。全てのページの「description」は全て異なり、正確にそのページを説明している文章に設定しておくのが理想です。
こちらも検索結果に表示される際には文字数には制限がありますので、全角で100〜130文字程度にしておくとよいと思います。
キーワード
<meta name="keywords" content="ふにろぐ,ふにす" />
一昔も二昔も前のSEOではかなり重要項目だった「keywords」ですが、今は全くといっていいほど意味がないと考えて問題ありません。
下手に設定するよりもしない方がいいので、あえて設定する時以外は消してしまっても問題ありません。
CSSとJSの読み込み
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
HTML文書のスタイルを定義するcssと、HTMLにアクションを設定できるJavaScriptを設定する項目です。
文書に埋め込む事もできますが、別ファイルで管理をしておく方が運用上運用しやすいかとは思います。
サイトによって状況は異なりますので、サイトに合わせて外部ファイルとして設定してHTML文書に埋め込む、インラインとしてHTMLに埋め込むのいづれかの方法でご対応ください。
制作者情報
<meta name="author" content="ふにす" />
authorはその文書を作成したのが誰であるのかを記述する項目です。
重要視される事がない項目ですので、特に気にしなくても構いません。
URLの指定
<link rel="canonical" href="https://funnis.net/blog/">
同じページでも
https://funnis.net/blog/
https://www.funnis.net/blog/
https://funnis.net/blog/index.html
https://funnis.net/blog/index.php
https://funnis.net/blog/index.shtml
というに、アクセスしたら同じ結果が得られるページが複数存在する場合があります。
この場合、検索エンジンがどっちを優先するのかという問題になりますが、判断するのは検索エンジン次第なので、「canonical」を設定し正しいURLを指定する事が必要です。
ただし、使用には注意が必要で、誤った情報で設定してしまうと設定したページが検索結果に反映されなくなるということが起こります。
同様のURLが複数存在している場合のみにご対応ください。
ファビコン
<link rel="Shortcut Icon" href="https://funnis.net/blog/favicon.ico" />
ファビコンは、ブックマークされる際に表示されるアイコンなどで使用される項目です。
必要というものではありませんが、ブックマーク時にサイトを識別しやすくなる効果もあるので、可能であれば設定しておく方が好ましいです。
ファビコン作成サイトとかで簡単に作ることができるので、生成されたファイルをアップロードしてURLを指定して対応することもできます。
検索エンジンへの設定
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<meta name="robots" content="noindex,nofollow" />
検索エンジンにサイトをインデックスして欲しくない場合とかに設定する項目です。
インデックスされないようにすると、検索結果に反映されないので検索されたくないものがある場合は設定しましょう。
ちなみにnofollowという項目もありますが、この設定を行うことでリンク先の情報についてサイト側では保証しないという意味を持たせることができます。
OGP/TwitterCard
<meta property="og:title" content="ふにすquot; />
<meta property="og:type" content="company" />
<meta property="og:url" content="https://funnis.net/" />
<meta property="og:image"content="画像のURL" />
<meta property="og:site_name" content="ふにす" />
<meta property="og:description" content="ページの説明文" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@funnisnet" />
<meta name="twitter:url" content="https://funnis.net/blog/knowledge/metatag/" />
<meta name="twitter:title" content="Googleのサポートしているmetaタグを使用する" />
<meta name="twitter:description" content="ページの説明文" />
Facebookやtwitterでシェアされた際などに、表示を最適化させるために使用されるmeta要素がOGP/TwitterCardになります。
OGPを設定するとFacebookにシェアやいいねされた情報をきれいな形で表示する事ができるようになります。
詳しくは以下の2つのブログを読むとたいてい分かります。
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
Facebookのウォールでちょっとアピールする方法（OGP）
ソーシャルで露出する際の情報設計も重要なので、OGP/TwitterCardは設定するようにしましょう。
Googleのサポートしているmeta要素を使用する
上記meta要素の中でも特に重要なものを下記で改めて詳細に説明します。
これらの要素は、Googleがサポートしているmeta要素になり、検索エンジンからの集客を意識する上で非常に重要になってきます。
Googleに正しくサイトの情報を評価してもらい、検索結果に反映されることで、検索エンジンからの集客が可能になりますので、Googleがサポートしているmeta要素を正しく設定して対応しましょう。
title
ページのタイトルです。
改めてその重要性を書く必要もないんじゃないかというくらい重要です。
HTMLでの記述は以下のような感じです。
<title>ページのタイトル</title>
注意すべきポイントは以下になります。
文字数は全角25文字分くらいがいい
基本的には32文字まで表示されるという情報もありますが、検索結果を見ていると26文字以降で「…」と省略されているのをよく見かけます。
32文字でも問題はないかと思いますが、25文字程度で考えておいた方が無難なんじゃないかなと最近は考えています。
なお、キーワードによっては文字を単語として認識する場合もあり、25文字でも「…」と省略される場合がありますので、20文字程度にまとめておくというのも一つの方法ではあります。
タイトルはできるかぎり簡潔で分かりやすく、自然語の方がいい
タイトルが長くなると分かりづらいだけでなく、検索結果に表示された場合のクリック率にも影響してきます。
極力分かりやすく、簡潔に「自分の言葉で」表現した方がクリック率が上がりやすい傾向があります。
クリック率の事だけを考えると、思わずクリックしたくなるような「釣りタイトル」を設定したくなる気持ちも分からなくはないですが、長期的に運用を考えていく場合では、あまりおすすめはできません。
ページごとの固有のタイトルを付ける
これはすごく大切な事ですが、同じタイトルが設定されたページが複数同じサイト内にあるという状況は避けなければいけません。
ページ毎に固有のタイトルを設定して、タイトルタグの重複を防ぎましょう。
キーワードを詰め込まない
検索での露出を意識するあまり、キーワードを詰め込みたくなる場合があるかと思います。
ある程度の狙いは必要ですが、詰め込みには注意しましょう。
自分でタイトルを読み返して、不自然ではないなと思える形にしていくようにすれば「詰め込んでいる」ようにはなっていかないと思います。
description
サイトの説明文です。検索結果上に表示されるページの説明文は、例外はありますが基本的にはここで設定した文章が使われます。
HTMLでの記述は以下のような感じです。
<meta name="description" content="ページの説明文" />
注意すべきポイントは以下になります。
検索結果で表示された場合の状態を想定する
検索結果上で表示される事を前提として考える事が重要です。
そのため、description単体ではなく、ページのタイトルも考慮に入れた上で説明文を作成する必要があります。
特定のキーワードで検索してきたユーザーが何を望んでいて、どういう説明があるページだとクリックするだろうかというような事を考えれば、どういう説明文にすればいいのかというのは自ずと見えてくるかと思います。
「Google検索結果シミュレーター」などのツールを使用すると、実際の画面をイメージしながら設定が行えるので、便利です。
Webサイトを運用するすべての人にオススメできる「Google検索結果シミュレーター」
ページの内容を的確に表す内容にしておく
ページの説明文自体は誇張などは行わず、実際のページの内容にそってわかりやすく紹介するような形にするのが好ましいです。
検索結果上での表示もふまえて、考慮する事が大切です。
ページごとに固有の説明文を設定する
descriptionもタイトルタグと同様に、ページごとに固有の文章を設定する必要があります。
ページの説明文がサイト全体で全て同じというような例もたまに見かけますが、それは非常によくない状態です。
きちんとページごとにオリジナルの説明文が設定されているのかをチェックしましょう。
キーワードを詰め込まない
こちらもタイトルタグ同様に、キーワードの詰め込みには注意しましょう。
特にやりがちな地域キーワードを複数盛り込んだりする方法は、安易にやるべきではないでしょう。
読む人の事を考えた分かりやすい文章にする事を心がけていれば、自然とキーワードの詰め込みは起こらないと思います。
その他のGoogleがサポートしているmetaタグについての詳細は、以下URLにてご確認いただけます。
Google がサポートしているメタタグ
余談：Keywordは不要と考えて問題ない
前述していますが、meta要素の「keywords」は過去にSEO目的で使用されることが多かった要素ですが、現在ではその効果はありません。
そのため、いくら必死になって設定してもその影響が検索結果に反映される事はありませんので、無意味です。
これについては、Googleの公式ブログで2009年9月21日の記事で明言しています。
Google does not use the keywords meta tag in web ranking
たまに、「Keywordsは何個くらい設定したらいいですか？」と聞かれる事があるんですが、自分が管理するために設定するという事での使用ではなく、検索での露出を考えてという事であれば設定する必要はないでしょう。
効果がないっていわれているのに、がんばって考えて対策するのは時間の無駄です。
そんな小手先の事を考える時間があるのなら、サイトの文章を読み返したり、分かりやすいコンテンツの流れを考える方が有意義です。
Web担当者が覚えておいて損はないHTML5タグ
HTMLの仕様の中でも、現在主流となっているのがHTML5という仕様です。
HTML5で制作されているサイトもかなりありますので、担当者レベルでも覚えておいてもらった方がいいタグをまとめておきます。
なお、HTML5は2015年に勧告になっており、すでに多くのサイトがHTML5で制作されています。
ブラウザ側も、例の問題あるブラウザ以外のモダンブラウザと言われるブラウザではサポートされております。
ふにすでも制作するサイトは基本的にHTML5で制作しています。
!DOCTYPE html
<!DOCTYPE html>
HTML5のドキュメント宣言です。文書の一番最初に書いてあるので他の人が作ったサイトのソースを見たときに一番最初にこの記述があればそのサイトはHTML5で作られているということを意味します。
header
<header>
ヘッダーを定義している要素です。サイトの中でヘッダーを定義する要素となります。
footer
<footer>
フッターを定義している要素です。サイトの中でフッターを定義する要素となります。
section
<section>
セクションを定義する要素です。セクションなので文章における節になる要素です。
節という事なので基本的に見出しとセットになっている必要があります。
たまに見出し要素をセットされていないsectionを見かけますが、本来は正しくないので見出し要素はセットにしましょう。
nav
<nav>
ナビゲーションを意味する要素です。ナビゲーションはグローバルナビゲーションだけでなくローカルナビゲーションも含みます。
article
<article>
本文を意味する要素です。この要素の中の部分だけも独立したページとしての意味があるという風になるので、文書の中ではかなり重要な位置付けになります。
article内には見出し要素が必ず必要です。
また、基本的にページ内には1セットのみとなります。
aside
<aside>
本文には直接関係ないけれど、関連性はある要素を置く為の要素です。サイト内のバナーなんかを置くという使われ方をよくされています。
video
<video>
動画コンテンツを格納する為の要素です。今の動画のような形式の埋め込みではなく、直接動画を読み込む時に使用します。これまでかなり長いタグだったものが
<video src=”video.mov”>
のような感じで簡素化されます。
main
<main>
メインコンテンツを格納するためのセクション要素がmain要素です。
セクションと同じような意味合いなので、使用する際には見出し要素を使用する必要があります。
HTML5とセマンティンクという考え方について
このようにHTML5で追加された要素は、要素そのものが意味を持っている要素になっている（セマンティックといいます）事が多いのが特徴です。
サイトを構成する上で、これまでは意味を持っていなかった「div」でマークアップするよりも、サイトの要素に対する意味付けができるので、HTMLを見ただけでサイトのどの部分を意味しているのが分かりやすくなっています。
その結果として、検索エンジンに対してサイトを評価してもらう時に、どういう意図でページ内の要素が構成されているのかを暗にアピールすることもできるというわけです。
この辺については、制作側で意識しておく必要がある項目ではありますが、サイトの運用側としてもコードを見てどういう意図で現状のコードが構成されているのかを把握しておくと、運用時に便利にはなってきますので、余裕が出てきたら確認してみるのも面白いと思います。
まとめ
結構な長文になったので、最初に見た人には難しく感じる内容かもしれません。
しかし、ここだけ押さえておけば問題ないと思う内容のみをまとめていますので、時間をかけてでもいいので一つ一つ理解していくことが重要だと考えています。
今後のWeb運用で間違いなく役に立つと思いますので、ぜひご参考ください。
