HTML

HTMLとは、Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、Webページの制作で使用するコンピュータ言語です。現在公開されているWebページのほとんどは、HTMLで文章に目印をつけることによってブラウザに文章や画像、動画などを表示させています。

HTMLを理解すれば、記事編集がスムーズにできるだけでなく、自分でオリジナルのWebサイトテンプレートを作ることもできるようになります。

HTMLの知識が少なくても、ブログサービスやWordPressでサイトを始められますが、基本的なHTMLを知っておくとサイトでの表現の幅が広がり、より見やすいサイト作りにつながります。

HTMLの基礎知識

HTMLでは、「タグ」を用いて、文章（プレーンテキスト）をマークアップしていきます。

タグは文章の構造をブラウザに示す目印であり、必ず半角文字で記述します。HTMLは、Webページの画面上で右クリックし、「ページのソースを表示」で確認できます。

HTMLを構成する要素と属性

HTMLタグの中に書くのは、「要素」と「属性」です。

要素は、見出しやタイトルなど、もとのテキストに対して意味づけを行います。

属性は、それぞれの要素に対して情報を付け加える場合や、後述するCSSで編集するためのラベルとして用いられ、ひとつの要素につき複数設定することができます。

たとえば、ページ内に画像を貼りたい場合は、以下のような要素と属性が考えられます。

<img src=”アップロードした画像のURL” alt=”画像の内容を表すテキスト”>

HTMLページの基本構造

HTMLの構造は大きく分けて、head要素とbody要素からなります。実際にWebページのソースを表示してみると、多くのタグが並んでいますが、これらはhead要素内とbody要素内のいずれかに配置されています。

head内にはページの定義や検索結果で表示するタイトル・要約文などのメタ情報を入れ、body内には記事本文を入れるのが基本です。

HTMLを編集する際には、開始タグ<〇〇>と終了タグ</〇〇>で個々のコンテンツを囲んでいきます。タイトルや見出し、リンク、表やブロック分けしたレイアウト、下線や文字色などがこれに該当します。また終了タグのない「空要素」と呼ばれるタグもあり、改行や画像などが該当します。

終了タグがある場合

<title>ページタイトル</title>
<h2>見出し</h2>
<table>表</table>
<div class=”〇〇”>囲み記事など、ブロックにしたいコンテンツ</div> 
<p>段落</p>

終了タグがない（空要素）の場合

<img src=”アップロードした画像のURL” alt=”画像の内容を表すテキスト”>
<meta name="description" content="検索結果で表示されるページの概要を表す文章" />
<br>（改行）

記事編集で用いる主要なHTMLタグの意味と使い方

ページタイトル

ページのタイトルは、<title>と</title>で囲まれた部分に記述し、ページ内容を検索結果等の外部に分かりやすく示すための重要な要素です。Google等の検索結果やSNSのシェアカードでも、通常最も目立つ部分となります。

メタディスクリプション

メタディスクリプションは、Webページの内容を検索エンジンに伝える「メタタグ」のひとつで、検索結果に表示されるコンテンツの概要文を表します。メタディスクリプションタグはタイトルタグと同じくhead要素内に設置されており、その内容はページ内には表示されません。

<meta name="description" content="ページの概要を表すテキスト" />

ただ、設定したメタディスクリプションが、そのまま検索結果の概要部分（スニペット）に表示されるとは限りません。Googleによって、メタディスクリプションがページ内容を表すのに最適と判断されなかった場合、検索キーワードに関連する記事内の文章が抜粋されたり、自動生成されたりして表示されるようになっています。そのため、難しい場合は無理にメタディスクリプションを設定する必要はありません。

見出し

見出しはbody要素内に設置し、大きい順にh1からh6まであります。大きな見出しのあとに小さな見出しを配置していくのが文章としての基本であり、内容のまとまりごとに適切に見出しをつけていくことで、ユーザーが目的とするコンテンツを見つけやすくなります。

<h1>最も大きな見出し。タイトルタグ内のテキストと同じにすることも多い</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

段落・改行

まとまった内容を表す段落は、開始から終了までを<p></p>で囲みます。また、改行は<br>で表します。

箇条書きリスト

箇条書きのタグには、序列なしのul（unordered list）と、序列ありのol（ordered list）があります。個々の項目は、liタグで囲みます。

リンク

リンクの設定は、a（anchor）要素で行います。href属性でリンク先URLを指定できるほか、target属性により、リンク先ページをクリックしたときに別タブで開く設定も追加できます。

<a href=”リンク先のURL” target="_blank">リンク先のタイトルや内容を表すアンカーテキスト</a>

画像

画像表示はimg要素で設定します。src属性でアップロードした画像のURLを指定するほか、alt属性で代替テキストを設定したり、width（幅）属性やheight（高さ）属性で画像サイズを設定したりすることができます。

とりわけalt属性は、読み上げツールを使う人や、画像の識別ができないGoogleロボット等にとってコンテンツを理解する手がかりとなるため、できる限り記述するようにしましょう。

<img src=”アップロードした画像のURL” alt=”画像の内容を表すテキスト” width=”450” height=”300”>

動画

動画をページ内に埋め込むには、video要素を使ってMP4等のファイルを指定する方法と、iframe要素を用いてURLを指定する方法があります。このうちvideoタグは、HTML5未対応のブラウザでは再生できないため注意が必要です。

iframeタグを使ったコードは、YouTube等の動画サイトの共有ボタンから発行することもできます。

<video src=”動画のファイル名”></video>
<iframe src=”動画のURL”></iframe>

HTMLとともに用いられるCSS・JavaScriptとは

HTMLとあわせて使われることの多いコンピュータ言語に、CSSとJavascriptがあります。

CSSはHTMLの各要素や属性について、その表示方法や色、フォント、サイズ、簡単なアニメーション等を細かく指定できるコンピュータ言語で、専らHTMLとセットで用いられます。

JavaScriptは、Webページにアニメーションやスライダーなど動きをつけたいときに用いる言語で、Google AdSenseの広告スライド等にも利用されています。

おまけ：検索結果で特殊な表示ができる構造化データをHTMLに追加する方法

Googleの検索結果には、パンくずリストやレビュー、Q&A、レシピや映画情報などを特殊な形式で表示できるリッチリザルト（リッチスニペット）機能があります。これを利用するには、「構造化データ」をHTMLに追加することが必要です。

サイトの内容によっては、構造化データを取り入れることで、検索エンジンがページの内容を理解しやすくなり、検索結果でユーザーの目に留まりやすくなる可能性があります。

構造化データは、ページの内容に関する情報（メタ情報）の一種で、ユーザーのニーズに応じて一定の項目を検索結果で表示できるようにしたものです。Googleでサポートされている構造化データは、公式ページで参照できます。

構造化データは自分で用意して追加することもできますが、作ったページのURLやHTMLを入力して各項目をマークアップできるようにするツールがあるため、初心者にも取り入れやすいです。また、作成した構造化データが機能するかをテストするツールもあります。

• 構造化データマークアップ支援ツール
• 構造化データテストツール