2018-12-21

HTML初心者のための使えるHTML基礎知識

HTMLの書き方の基本的なルールを覚えることで、マーケターのみなさんが業務に必要となる簡単なHTMLを修正できるようになります。

マーケティングの現場で覚えておきたい、よく使う便利なHTMLの基礎をまとめました。

みなさまのお役に立てますと幸いです。

「マーケ施策と事例で学ぶ！ BtoBマーケティングの入門書」をダウンロードする

HTMLの概要

HTMLの概要と関連する技術要素をまとめました。HTMLの位置付けと、CSSの概要はしっかり覚えておきましょう。

HTMLとは？

HTML(Hyper Text Markup Language)とは、Webページの構造を定義するための言語です。

Webページは、たいてい４つのファイルの組み合わせでできています。HTMLは文章に段落を作ったり、小見出しを作ったりして、Webページを構造化しています。

HTMLの特徴は、「タグ」と呼ばれる「< >」で囲まれた記号を用いることです。HTMLは、プログラミング言語のように、複雑な演算式を書く必要はありません。

文字の色やWebページの幅の設定などは、HTML以外でも対応が可能です。デザインは、CSSを用いることでWebページを装飾します。

【参考】CSSとは？

CSS(Cascading Style Sheets)とは、「デザイン」の観点から、Webページの見た目を整えるための定義（言語）です。HTMLもCSS同様に、Webページの見た目を整える言語ですが、役割が違います。

HTMLはWebページの構造を定義することで外観を整えます。CSSは文字の色や画面の横幅などを定義して見た目を整えます。

HTMLでWebページを構造化するだけでは、見栄えのよいWebページは作れません。Webページを作る上で、HTMLとCSSは切っても切れない関係です。

すべてのWebページはHTMLで書かれている

すべてのWebページはHTMLで書かれており、あなたが見ているこのページも、もちろんHTMLで書かれています。

Webページのソースは、ブラウザから簡単に見ることができます。

Chromeでは、Webページ上で右クリックして、「ページのソースを表示」をクリックすることで、Webページのソースが表示されます。

HTMLの基礎知識

HTMLの基礎知識では、タグを使う上で知っておくべき「タグのルール」「要素」「属性と属性値」の３つについてご紹介します。

タグのルール

HTMLのタグを覚える前に、タグの書き方を覚える必要があります。

HTMLのタグは、開始タグと終了タグの二種類があります。「< >」を開始タグといい、「</>」を終了タグといいます。

そのほかに、HTMLの書き方には３つのルールがあります。以下に挙げる３つのルールは覚えておきましょう。

要素

要素とは、ある開始タグからある終了タグまでで構成される文章全体のことです。「タグ」と言った場合は、開始タグか終了タグのいずれかを指しますので注意してください。

HTMLは、要素の中に要素を入れる「入れ子構造」の書き方をします。親要素は、HTML文書の最初に記述する<html>タグであり、その中に含まれる要素は全て子要素です。

属性と属性値

属性は、要素になんらかの設定をするものです。属性の書き方は、以下の通りです。

要素の中で、属性がどこにあたるのか、HTML文書の例を見て確認しましょう。以下は、リンクを挿入するときに使うaタグとhref属性の例です。

aタグは、そのままではURLの挿入ができません。href属性を追加することで、リンクの挿入が可能になります。

HTMLの基本構成

HTMLは、DOCTYPE宣言、htmlタグ、headタグ、bodyタグで構成されています。

body要素の中に書かれている内容以外は、Webページの訪問者に直接見えませんが、SEO的な観点からhead要素も重要です。

それぞれのタグを、詳しく確認しましょう。

DOCTYPE宣言

HTMLにはいくつかのバージョンがあり、バージョンによって利用できる要素や属性、記述ルールなどが異なります。

ブラウザは文書を読み込む際に、その文書がどんな言語で書かれているのかを認識しています。

DOCTYPE宣言は、HTML文書がどんな仕様、バージョンで書かれているのかを、ブラウザに伝えるための記述です。DOCTYPE宣言は、HTML文書の先頭で行います。

DOCTYPE宣言には、以下のようなものがあります。

HTML4.01 Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

HTML５以降のバージョン
<!DOCTYPE html>

htmlタグ

htmlタグは、ドキュメントがHTML文書であることを示すタグです。htmlタグはDOCTYPE宣言のあとに開始タグを記述し、文書の最後に終了タグを記述します。

headタグ

headタグは、ブラウザに向けた情報を記述するタグです。<head>タグは、htmlタグの直下に一つだけ記述できます。

headタグの中では、titleタグやmetaタグ、linkタグなどを使用します。

headタグ中の記述は、検索エンジンに向けた情報なので、Webページの画面上には表示されません。しかし、ウェブデザイナーやディベロッパーが多くの時間を費やす要素でもあります。

SEOの観点から、headタグを適切に記述することは大切です。

bodyタグ

bodyタグは、Webページの訪問者に直接見える部分です。訪問者に見て欲しいコンテンツは、すべてbodyタグの中に記述します。

bodyタグの中にないコンテンツは訪問者から見えないので注意してください。

HTMLでよく使うタグとその使い方

HTMLのタグは、全て覚えるのは大変です。必要なタグは調べながら書けばよいのですが、ひんぱんに使うタグは覚えることで作業は早く進みます。HTMLでよく使うタグをご紹介します。

hタグ（見出しの作成）

hタグは、小見出しを作るタグです。hタグの種類は、h1からh6まで６種類あり、数字が小さいほど大きな見出しを示します。だいたいの場合、h1タグはWebページのタイトルとして使うので、h2タグから小見出しとして使います。

imgタグ（画像の埋め込み）

imgタグは、Webページに画像の埋め込みをするときに使うタグです。imgタグの使い方は、以下をごらん下さい。

imgタグには、注意点が２つあります。

１点目が、imgタグには、終了タグが必要ないことです。

２点目が、alt=”〜”の部分に、画像の説明文を記入することです。画像の説明文は、基本的にユーザーに表示されるものではありません。しかし、なんらかの理由で画像がうまく表示されなかったとき、画像の代わりに画像の説明文がWebページに表示されます。画像の説明文があれば、画像がうまく表示されなかったとしても、「なんの画像なのか全くわからない」という事態は避けられます。