マークアップ・コーディング Web制作|ホームページ制作用語

ホームページ（ウェブサイト）を制作し、ブラウザ上で適切に表示させるためには、正確なマークアップとコーディングの知識が重要です。普段見ている画面の裏側には、厳密なルールに基づいたデータが存在しています。

事業を成長させるためのホームページ運用においても、内部の構造が美しく整理されていることは、検索エンジンの評価を高める上で大きなアドバンテージになります。

今回は、ホームページ制作の基盤となるマークアップ言語やファイルの構成に関する基礎的な要素について解説していきます。

ホームページ（ウェブサイト）を構成する要素を理解するためには、データがどのような形式で保存され、どのように読み込まれるのかを知ることが大切です。基本的なテキスト形式の違いから、ファイルの管理方法までを順番に見ていきます。

コンピューターで扱う文字情報には、装飾を持たない純粋なテキストデータ（プレーンテキスト）と、文字の大きさや色などの情報を含んだリッチテキスト形式があります。ホームページのコーディングにおいては、プレーンテキストを用いてソースコードを記述します。これにより、コンピューターやブラウザが情報を正確に読み取れるようになります。

マークアップ

マークアップ/マークアップ言語（markup language）は、html、XMLなど、文書・テキストデータなどにタグ付けなどをし、コンピュータに対して論理性などの情報を表現するための形式言語です。

一般的な文書であれば、人間の目で見たとき、どの部分がどのような属性を帯びているかが判断できますが（タイトルや段落）、そういった文書の要素・論理構造を伝えるための言語です。

タグ付けすることで、該当部分は「見出しである」「段落である」といった意味付けをしていくことができます。

タグ付けして意味付けをする

その言語を用いて、各部分をタグ付けして意味付けしていくことをマークアップと呼びます。

例えば、ウェブサイト（ウェブページ）であれば、HTMLなどを使用して「この部分が大見出し、あの部分は段落」といったように指定していきます。

ホームページ制作・SEOの1ポイント

ホームページ制作において、純粋なテキストデータをどうマークアップしていくかで、そのページの論理構造を示すことができます。純粋なテキストデータのままでも文書としては読むことができますが、論理構造を示すことで、より読みやすく、テキストの意味の理解がしやすくなります。これはSEO内部対策の基本となります。

コーディング

コーディング(coding)は、一般的にはプログラミング言語を用いて、プログラムのソースコードを記述することを指します。ホームページ（ウェブサイト）の制作においても、この作業は非常に重要です。デザインをブラウザ上で正確に表示させるだけでなく、検索エンジンにページの内容を正しく伝えるための基盤となります。事業の魅力をインターネット上で最大限に発揮するためには、見た目の美しさと同じくらい、裏側のソースコードが整理されている必要があります。

ホームページ制作でのコーディング

ホームページ制作（ウェブサイト制作）では、基本的には、HTMLやCSSなどでウェブページの全体構造（レイアウト構造）などを記述したり、ウェブページのコンテンツをマークアップしたり、装飾を加えていくことを指します。その他、JavaScriptなどにって動作を記述することも指します。

JavaScript・Ajax・jQuery

PHP

CGI・Perl

ホームページ（ウェブサイト）を構築するコーディング作業には、大きく分けて二つの側面があります。それぞれの役割を理解し、適切に連携させることで、高機能で集客力の高いページを作り上げることができます。

構造を定義するマークアップ言語

HTMLやCSSを用いた記述は、正確にはマークアップと呼ばれます。文章の見出しや段落といった文書構造を定義し、デザインを装飾する役割を持ちます。より専門的には、検索エンジンがコンテンツをスムーズに理解できるよう、適切なタグを配置するSEO施策においても非常に重要です。

動きやシステムを構築するプログラミング言語

一方で、JavaScriptやPHPなどを用いた記述は、ページに動きをつけたり、お問い合わせフォームなどのシステムを稼働させたりするために行います。ユーザーの利便性を高め、事業の目的を達成するための導線をスムーズにする役割を担います。

HTMLコーディング

ホームページのHTMLを制作していくことを、「HTMLコーディング」といったように呼ぶ場合があります。

ホームページ制作・SEOの1ポイント

コーディング自体は、どこまで作業を簡略化するかが一つのキーポイントとなります。ホームページの作成において、共通項をコピー・アンド・ペーストで貼り付けていくことも良いですが、phpなどの利用で、単一ファイルの使い回しのほうが理にかなっているケースもあります。

DOCTYPE宣言とHTML

ページを作成する際、どのバージョンの言語で書かれているかをブラウザに伝えるための記述がDOCTYPE宣言です。これを正しく記述することは、レイアウト崩れを防ぎ、意図した通りにページを表示させるためにとても重要です。

HTMLについて

html5 tag ホームページ制作の基本タグ

このページではHTML以外のタイプについて触れていきます。

XML

XML（Extensible Markup Language、エックスエムエル、エクステンシブル マークアップ ランゲージ）は、Web制作でもよく使用される汎用的なマークアップ言語で、仕様はW3Cより勧告されています。

XMLは、文書内のデータの内容や構造を示すのに使用するマークアップ言語で、HTMLと同様に、文書にハイパーリンクの設置など、タグ付けをすることができます。

Extensible Markup Language (XML)　（W3C）

言語を定義するメタ言語

さらに、XMLは、言語を定義する「メタ言語」とも呼ばれ、ユーザ―が独自のタグを指定してマークアップ言語を作成することもできます。

ウェブページ動的生成への利用

ウェブサイトのコンテンツをXMLで制作し、ベースとなるHTML、JavaScriptの組み合わせによって、ウェブページを動的生成することもできます。

ただ、この方法（XMLとHTML、JavaScript）でのウェブページの動的生成は、あまり用いられず、近年はXMLよりもMySQLなどのデータベースシステムが利用され、phpとDBを利用したウェブページの動的生成が一般的です。

ホームページ制作・SEOの1ポイント

ホームページ制作が完了した場合、検索エンジンに新規ホームページを公開した旨を通知すると、クロールされやすくなります。この際、XMLサイトマップを作成して、サーチコンソールで通知しておくと、深い部分までのクロールへのヒントを提示することになり、ホームページ全体のクロールの助けになります。

XMLサイトマップ再送信の際、最終更新日時を付加して送信することで、再クロールを促すことにもつながるので、SEOを考える上ではこうしたサイトマップの送信も心がけてみましょう。

XMLサイトマップ

近年では、XMLは検索エンジンクローラー用のサイトマップ生成などに用いられています。

このXMLサイトマップには、URLや優先度、最終更新日時が記述されます。

検索エンジンはこのサイトマップやウェブ上の様々なリンクを頼りにウェブページを発見します。

XML形式でのサイトマップを検索エンジンに送信することにより、サイトの構造を伝え、クロールを促すことができます。

SEOとXMLサイトマップの関係

XMLサイトマップの送信自体は、SEOにおける検索順位決定の直接的な要因として考えられませんが、クロールされきっていないページの存在を示し、ホームページ全体のボリュームを伝えたり、XMLサイトマップに最終更新日時を加えることで、ページ更新の旨を通知する事ができるため、クロール促進とSEO施策の早期反映という意味ではプラスに働きます。

XHTML

XHTML(Extensible HyperText Markup Language、エックスエイチティーエムエル、エクステンシブル ハイパーテキスト マークアップ ランゲージ）、は、XMLの文法に従ったXMLアプリケーションで、HTMLをXMLの文法で定義し直したマークアップ言語です。

XHTMLの仕様はHTML、XMLと同様に、W3Cによって勧告されています。

ホームページでのXHTML宣言

ウェブページにおいては、記述の仕様がXHTMLである場合は、ドキュメントタイプ宣言で文書がXHTMLであることを宣言する必要があります。ホームページ制作時にページの最初に記述しておく必要があります。HTMLのタグを小文字で記述したり終了タグを省略しない、要素を正しく入れ子にするなどXMLの文法に従うように記述する必要があります。XHTMLの利用で、XMLのもつ拡張性を利用することができますが、HTML5以降は、ほとんど利用されなくなりました。

ホームページ制作がXHTMLでも基本的なSEOは同じ

ホームページ制作にXHTMLを使用した場合でもSEOに関する記述内容は同じです。XHTML独自のヘッドの記述などはありますが、結局は検索エンジンに対して内容を正確に伝えるのがSEOであるため、基本的にHTMLでホームページ制作をした場合と内容は変わりありません。ただし、HTML5独自仕様によるものが使えない分、少しSEOには不利かもしれません。

ホームページ制作・SEOの1ポイント

ホームページ制作では、HTML5の登場まではXHTMLもよく利用されていました。SEOとしては、文書のマークアップがしっかりしていれば、HTMLかXHTMLかによるページのSEO評価は変わりません。しかしながらHTML5の方が、文書内の要素の論理性のマークアップがきめ細かくできるため、若干有利に働くとも考えることができます。

SEOのためにHTMLのバージョンなどを変更する必要はありませんが、ホームページ制作時に選択可能なのであれば、なるべくHTML5を利用したほうが良いでしょう。

テキストデータ（プレーンテキスト）

テキストデータ（プレーンテキスト）は、htmlなどのマークアップが施されていない文字データです。単純には「ただの文字データ」というような意味になります。文字（もしくは文字と改行）のみで構成され、書式や装飾情報を含まないテキスト形式です。

htmlにおけるhtml5で廃止された<plaintext>も同じような意味ではありますが、<plaintext>タグはソースをそのまま表示するタグであり、厳密には狭義には同じものではありません。プレーンテキストは、テキストファイル(.txt)やプログラミング言語のソースコードなどで用いられています。フォント、色、サイズなどの書式情報や装飾情報が含まれません。

広い意味でのテキストデータとして、ホームページ制作（ウェブサイト制作）においてプログラムや画像などと文字を区別する際に「テキストデータ」と呼ぶことがあります。

なお、純粋なテキストデータであるプレーンテキストと異なり、テキストデータのフォント、フォント色・フォントの大きさボールド（太文字）などの装飾を指定することができる形式をリッチテキスト形式と表現する場合があります。

テキスト内容とSEO

テキスト内容とSEO・検索順位とは非常に大きな関係があります。

そのページがどのような内容について書かれたものかを検索エンジンが識別するためにもテキストデータは非常に重要なものになり、タイトルと内容が一致しているかが極めて重要になります。

また、近年は検索エンジン上の評価に関して、ユーザーの検索意図とのマッチ率を高めるために自然言語を解析する流れがあるため、ホームページ上の文章の文法的、文脈的な正しさをある程度意識する必要があると考えられます。

SEOキーワードと言い換えワードの予測

自分では非常に優れた内容のページを書き上げたと思っていても、ユーザーの検索ニーズ、そして検索キーワード（SEOキーワード）がマッチしていなければ、検索エンジン経由のアクセスを期待することは難しくなります。

近年では検索エンジンのAIが進化し、「言い換えワード」によるキーワードの調整が行われるようになってきました（この機能が逆に意図しない検索結果を表示することもあります）。その判定精度は高まっているものの、SEOに力を入れる場合、やはり一致率の面で多少の調整は必要になってくると考えられます。

SEOはテキストデータを検索エンジン用に調整するのが基本

SEOはテキストデータを検索エンジン用に調整するのが基本形です。プレーンな状態の文字列の中で、見出し箇所や段落箇所、リスト箇所といったように整形していくことで、その文字列が持つ「意味」や「重要度」を検索エンジンに伝えていくことができます。

SEOにはSEO内部対策とSEO外部対策がありますが、外部からの被リンクはホームページ運営側はそれほど操作できないものであるものの、SEO内部対策については、工夫次第でいくらでもSEOスコアを向上させていくことができます。その基本形は、テキストデータの中身、コンテンツの中身を正確に検索エンジンに伝えていくというSEOとしてのHTMLマークアップです。

近年ではAIの活用による「類語による調整」の精度が高まっていますが、それでも直接的にマッチしたキーワードを含むに越したことはありません。

ホームページ制作・SEOの1ポイント

ホームページのメインコンテンツはテキストデータです。基本的にHTMLは文書として論理構造を示しながら、装飾を加えたり、リンクによって他のページとの参照関係を作るために開発されました。このことから原則的にはテキストがメインコンテンツであり、レポート形式のページが基本であると考えることができます。

クエリ関連性の面でのSEOを考えると、ページの内容の中の重要な部分、重要なワードはどれかということを指定することの重要性が見えてきます。

リッチテキスト形式

リッチテキスト形式(Rich Text Format、RTF) は、テキストデータのうち純粋なテキストデータであるプレーンテキストと異なり、テキストデータのフォント、フォント色・フォントの大きさボールド（太文字）などの装飾を指定することができます。

また、文章の段落について文字の左揃え・右揃え・中央揃えなどの指定や、リストや表、画像の挿入などをすることができます。狭義にはマイクロソフト社の開発したWordなどでの実装形式（.rtf）を指します。

リッチテキスト形式のウェブでの利用

ワードやメールの形式として利用されるほか、広義にはWordPress（ワードプレス）のビジュアルエディタもこのリッチテキスト形式です。ビジュアルエディタを利用することで、HTMLタグを直接記述するすることなく、簡単な操作で見出し設定やフォントカラーの設定などを行うことができます。

メールにおけるリッチテキスト

メールにおいては、メール本文の文字の色や大きさなどが編集可能でHTMLメールを作成できます。フォント形式、フォントサイズ、太字（ボールド）、斜体（イタリック）、下線付き（アンダーライン）、打ち消し線、テキストの色、マーカー、テキストの位置ぞろえ（左寄せ、中央、右寄せ）、インデント（増やす、減らす）、リスト（ドット、数字）、ハイパーリンクの作成、絵文字が使用できます。

ホームページ制作・SEOの1ポイント

WordPressや各種レンタルブログでの投稿画面などは、ほとんどがリッチテキスト形式を利用することができます。リッチテキスト形式を利用して投稿を作成する場合、特定部分を削除したつもりが、テキストは消えているものの見出しタグなどが、中身が空のまま残存していることがありますので、そういった場合はテキストモードで確認してみると良いかもしれません。

外部ファイル

外部ファイルは、そのまま文字通り、外部にあるファイルを指しますが、ホームページ制作（ウェブサイト制作）においては、そのページのhtmlやphpに直接記述されているもの以外のファイル群を指します。

ホームページ（ウェブサイト）は、HTMLだけでなく、画像やスタイルシートなどの様々な外部ファイルと連携して成り立っています。これらのファイルの種類を識別するための文字列が拡張子です。用途に合わせて適切な拡張子を持つ外部ファイルを読み込むことで、効率的にページを構築できます。

例えば、画像はサーバーの別の場所に保存してあり、それをhtmlの記述で呼び出します（読み込みます）。

その際に呼び出すファイルを外部ファイルと呼ぶことがあります。

JavaScriptなどのライブラリやCSSなど、いろいろなページで呼び出して利用するようなファイルも外部ファイルとなります。

例）

<script src="js/yomikomi.js"></script>

<script type="text/javascript" src="/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>

外部ファイルとしてのCSS

ウェブページの装飾を施すスタイルシートなども、html内に直接記述することができますが、外部ファイルとしてCSSを制作して、そのスタイルを使用する時に外部ファイルであるCSSを該当htmlに呼び出すといったことが、ホームページ（ウェブサイト）を作る上で設計されています。

例）

<link rel="stylesheet" id="sample-css" href="sample.min.css?ver=1.1" type="text/css" media="all" />

こうして外部ファイルとしてCSSを作成し、各ページで呼び出すという形を用いることで、CSS側の修正を各ページに一気に反映することができます。こうすることで、Webデザイン変更などの作業にかかる手間や時間を短縮することができます。

ホームページ制作・SEOの1ポイント

ホームページを作成する場合、ページのHTMLマークアップなどの他に様々な外部ファイルを呼び出してページを生成していきます。外部ファイルが多いとその分だけページの読み込み速度が低下するため、設計の際には、なるべく手順を少なくするように心がける必要があります。

拡張子

拡張子（かくちょうし）は、コンピュータ上のファイル種類を識別するためにファイル名の末尾につけられるアルファベットの文字列でおおむね2、3、4文字のものがほとんどです。
ホームページ制作（ウェブサイト制作）においては、.html、.php、.css、.jsなど、ウェブページを構成するもの、また画像に関する拡張子、.jpg、.gif、.pngなどがよく現れます。

サイト制作において拡張子の違いで起こるエラー

例えば同じファイルであっても拡張子が.htmlでも.htmでもそのファイルがHTMLファイルであることを意味します。
このように同一の内容のファイルであってもウェブ制作において、外部ファイルを呼び出す際のファイルの拡張子が異なる場合があり、URLのパスを記述する際にファイルに付けられた拡張子が異なった表現でされている場合、該当ファイルをうまく呼び出すことができず、ウェブページがエラーになったり画像が表示されなかったりすることがあります。

例）

呼び出す画像.jpg

呼び出す画像.JPG

ホームページ制作・SEOの1ポイント

ホームページ制作において、URLパスなどで拡張子がきちんと設定されていないと、リンクの設定や外部ファイルの呼び出しがうまくいかない場合があります。

同じファイル形式でも、拡張子としての表現がバラバラに成っている場合があり、たとえばJPEGファイルであれば、.jpgや.jpeg、.JPGなど、様々な表現がなされているため、画像呼び出しがうまくいかない場合は、拡張子の表現をチェックしてみると良いでしょう。

ディレクトリ

ディレクトリ （directory） は、一般的には、コンピュータ上の階層で、階層ごとにファイルを収めて管理するために設置されるグループで「フォルダ」です。

ホームページ制作（ウェブサイト制作）においては、サーバー上のフォルダを指し、各階層であるディレクトリごとにファイルを収めます。一つのテーマに絞ったページ群を同一ディレクトリにまとめたり、ディレクトリ内にさらにディレクトリを設置してページの親子関係を示すような形で用いられるほか、画像を格納するディレクトリを設置するような形で利用されます。

多くのファイル群を適切に管理するための階層構造がディレクトリです。画像用、スタイルシート用など、目的ごとにディレクトリを分けてファイルを整理することは、制作や運用の効率を上げるために重要です。検索エンジンにとっても、ホームページ（ウェブサイト）の構造を把握しやすくなるというメリットがあります。

ディレクトリによるサイトの階層

URLにおいてはディレクトリごとにスラッシュで区切られ、階層を示します。

例えば

https://funfairfanfare.com/reference-index/html5_tag_reference-index/

であれば、/reference-index/がディレクトリです。そしてそのディレクトリの中にhtml5_tag_reference-index/というディレクトリが存在していることを示しています。

ウェブサイト・ホームページを表示するときは最後がスラッシュで終わった場合、index.php、index.htmlなどがある場合には、ファイル名と拡張子を省略しても表示されます。

ホームページの一部のディレクトリ以下にオウンドメディアを設置

ウェブサイトのURLのうち、一部のディレクトリ以下にオウンドメディアを設置することも可能です。

例えばメインである

https://funfairfanfare.com/

以下のディレクトリを静的htmlで制作しその下層ディレクトリである

https://funfairfanfare.com/web/

に、WordPressをインストールすることもできます。これによって/web/以下のみにだけオウンドメディアを設置することもできます。

ディレクトリによるページの親子関係とパンくずリスト

このディレクトリ構造は一つの階層であるため、ウェブサイト・ホームページの中のページ群の親子関係を示すことにも繋がります。しかしながらSEOとしては、近年はディレクトリ構造によるページの親子関係よりもパンくずリストによる親子関係を重視して捉えられる傾向にあります。このため、ページの親子関係を示すという面では、以前ほどディレクトリ構造を意識する必要はなくなったと考えられます。

パンくずリスト（ブレッドクラム）垂直方向ナビゲーション

ホームページ制作・SEOの1ポイント

SEOとしてディレクトリ構造は、ページ同士の関係性、特に親子関係を推測する場合のヒントとなります。しかしながら正確にページ間の親子関係を示す場合は、ホームページ制作時に構造化データマークアップによる記述が必要になります。

ライブラリ

ライブラリ（Library）は、ホームページ制作（ウェブサイト制作）においては、jQueryなど、汎用性の高いプログラムをひとまとまりにして、ショートコードなど少ない記述で再利用できるようにしたものを指します。

ライブラリをうまく活用することで、ホームページ制作の表現の幅を高めたり、制作期間を短縮することができます。ライブラリは頻繁に利用される機能、部品や再利用可能なコード、データをまとめたものであり、原則的に単体では動作せずプログラムに組み込んで利用します。

ホームページ制作でライブラリを利用するメリット

「よく使う記述」が再利用できる形になっているため、ホームページ制作においてこのライブラリを利用することによって、長いソースコードを記述することなく、CSSやJavaScriptなどを用いた多彩な表現を比較的簡単に実装することができます。

ホームページ制作・SEOの1ポイント

汎用性の高いライブラリを利用することで、ホームページ制作の手間を格段に省略することができます。しかしながら、ある程度決まりきった型しか利用できないため、細かな調整ができない場合があります。同じような機能であっても、配布ライブラリと同じように一から作る場合は非常にコストがかかることがあるため、表現に細かなこだわりがあっても、多少ライブラリのままで妥協することも必要な場合があります。

テンプレート（テーマ）

テンプレート(template)は、文書などのデータの雛形（ひながた）です。

ホームページ制作（ウェブサイト制作）においては、レイアウトやカラーパターンなどの形式が雛形としてテンプレート化され、配布されている場合もあります。

ブログシステムなどにおいては、サイトの外観の基本形を設定する雛形を指します。

WordPressテーマも一種のテンプレート

ホームページ制作におけるテンプレートは、それを用いればあとは内容（ウェブページにおいてはコンテンツ）を記述するだけで、ページが完成するよるといった場合の雛形を指します。WordPress（ワードプレス）のテーマも一種のテンプレートです。

テンプレートを利用することで、サイト内に共通表示される部分については改めて作成する必要がなくなるため、ページ内容の記述、コンテンツ配信などに集中することができます。全体的なレイアウトの決定の他、見出しのあり方などが決定されています。

ホームページ制作・SEOの1ポイント

ホームページ制作において、テンプレートを利用すると、制作の手間が省けることがよくありますが、その分テンプレートの仕様による制限などが出てくる場合があります。この場合修正箇所を探すのに非常に手間がかかる場合があります。

カテゴリ別 Web制作/ホームページ制作用語集

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ