HTMLは、Webページの土台を作るために欠かせないマークアップ言語です。書き方の基本が分かれば、プログラミングの知識がない方でも活用できるようになります。

→ダウンロード: 無料HTML & CSS入門ガイド│マーケティング担当者向け

本記事では、HTMLの基本的な書き方・ブラウザでの表示方法・よく使うタグについて、初心者の方向けに分かりやすく解説しています。サンプルコードも用意していますので、コードを真似して実際に自分でも書きながら学習してみてください。

HTML & CSS入門ガイド│マーケティング担当者向け

HTMLとは?

HTMLとは、「Hyper Text Markup Language」の略で、Webページで視覚的な表現や文章構成などを記述するための、マークアップ言語の一つです。

マークアップとは文章構成の指示のことで、マークアップ言語はコンピューターが理解できるように、「見出し」や「段落」といった情報をコードで示すためのコンピューター言語です。例えば、改行する際には<p>、見出しには<h1>や<h2>が用いられます。

HTMLを使用することで、ブラウザで正しくページが表示されるだけでなく、文字にリンクなどの機能を与えることも可能です。Webページのデザインやレイアウトには、HTMLの他にCSS言語を用いて調整します。
 

HTMLの3つの要素

HTMLを構成しているものを「要素(element)」と呼び、要素には100以上の種類があります。head要素やbody要素など、Webページで表現したい内容に合わせて要素を選び、タグで囲んで使用します。

本章では、HTMLの書き方の基本となる、「タグ」「属性」「コンテンツ」の3つの要素について解説します。
 

タグ

要素の始まりや終わりを、<(要素名が入る)> と で囲んで示したものが「タグ」です。HTMLでは、このタグで文章や画像などを囲むのが基本文法となります。

それぞれ始まりを「開始タグ」、終わりを「終了タグ」と呼び、基本的にセットで使われます(※一部例外もあります)。開始タグと終了タグで囲まれた部分全体を、「要素」と呼びます。
 

属性

タグの種類によっては、各要素の細かい動きや働きを設定する必要があり、この情報を「属性」と呼びます。開始タグの <> の中の要素名の後にスペースを空け、属性名=”属性値” の形で記述します。

例えば「~」はリンクを作成するためのタグですが、リンク先のURL情報である「href="リンク先のURL"」の部分が属性となります。
 

コンテンツ

開始タグと終了タグに囲まれた部分を「コンテンツ」と呼びます。「contents(コンテンツ)」とは、「中身」という意味です。

例えば、<p>~~~</p> で囲まれた文章や、<h2>~~~</h2> で囲まれた見出しの文字などがコンテンツとなります。
 

HTMLの基本の書き方

基本のHTMLは、HTML宣言・htmlタグ・headタグ・titleタグ・bodyタグでできています。それぞれの書き方をご紹介します。
 

HTML宣言

HTMLファイルは、1番初めに「HTML宣言(ドキュメントタイプ宣言)」を書きます。

HTML宣言

HTML宣言は決まり文句のようなもので、 と書くことで「このファイルはHTML文書です」という宣言の役割を果たします。HTML宣言には、終了タグは不要です。
 

htmlタグ

HTML宣言の下に「htmlタグ」を書き、コード全体を囲みます。

htmlタグ

これによって、<html></html> で囲んだ部分が「HTMLコードです」という意味になるため、HTMLファイルを作成する際は必ず書くようにします。
 

headタグ

「htmlタグ」の中に「headタグ」を書きます。<head></head> で囲んだheadタグの中には、そのWebページの情報や設定を書きます。

headタグ

headタグの中には、文字コード・検索ページで表示される概要・CSSファイル・タイトルなどが入ります。head内に記入した内容は、あくまでもブラウザへの情報や設定ですので、Webページの画面には表示されません。

head内の情報 使用タグ

文字コード

<meta charset="ここに文字コードを記述">

検索ページで表示される概要

<meta name=”description” content=”ここにテキストを記述”>

CSSファイル

<link href="ここにCSSファイル情報を記述" rel="stylesheet" />

タイトル

<title>ここにタイトルを記述</title>

 

titleタグ

headタグの見出しでも触れたとおり、「titleタグ」はWebページのタイトルを示します。titleタグ内の文は、ページ名としてブラウザのタブ・検索エンジン・SNSなどに表示されます。

titleタグ
 

bodyタグ

「headタグ」の下に「bodyタグ」を書きます。<body></body> に囲まれた部分が、実際のWebページの画面に表示されます。

bodyタグ

ここまでの内容を「.html」ファイルとして保存してブラウザに表示させると、下の画像のように表示されます。ブラウザでの表示方法は、HTMLを書いてブラウザで表示する方法で解説しています。

bodyタグ
 

【サンプルコード付き】HTMLのタグの書き方<基礎編>

次に、よく使うタグの書き方をご紹介します。ここで紹介するタグは、すべて<body></body> 内で使用するタグです。
 

h1〜h6タグ

「h1〜h6タグ」は、見出しを表示させるためのタグです。h1タグが最も大きな見出しで、数字が増えるほど小さい見出しになります。

h1タグは基本的にページのタイトルとなり、各ページで1回のみの使用が理想的です。基本的にh1タグから順番に使用し、h2タグの次にh4タグを配置することのないよう注意してください。

h1〜h6タグ

また、h5以降は構成の階層が複雑になるため、多用は避けましょう。
 

pタグ

「pタグ」は、段落を表すタグです。pはParagraph(パラグラフ)の略で、文章を表示させる際に使用します。

html 書き方_No08
 

aタグ

「aタグ」は、リンクを表示させるためのタグです。<a> の中に href="リンク先のURL" を書くと、aタグに囲まれた部分をクリックした際に、リンク先ページに遷移します。

リンクを貼った文字のことをアンカーテキストと呼び、aタグではテキストだけでなく、画像を囲むことも可能です。

html 書き方_No09
 

ul/ol/liタグ

「ul / ol / liタグ」は、箇条書きを表示させるためのタグです。<ul>と<li> のペアで数字無しの箇条書き、<ol>と<li>のペアで数字付きの箇条書きとなります。

html 書き方_No10
 

imgタグ

「imgタグ」は画像を表示させるためのタグで、終了タグは不要です。<img src=” ” alt=” ” />と書き、「src=" "」の中には画像のファイル名とある場所を、「alt=" "」の中には代替テキストを入力します。

横幅のサイズを「width=” ”」、縦幅のサイズを「height=” ”」で指定することも可能です。例えば、横幅を640px、縦幅を480pxに指定する場合は、下のように書きます。

imgタグ

imgタグで表示できるのは、JPG・PNG・GIF・SVG・GIFアニメーションなどの画像形式のみです。PDFデータや動画データは表示できません。
 

divタグ

「divタグ」は、複数の要素をまとめるためのタグで、「division (ディビジョン、仕切り)」の略です。

imgタグ

なお、classの設定については以下の記事でも詳しく解説しています。ご興味のある方はぜひご覧ください。

navタグ

「navタグ」は、文書内の主要なナビゲーションのセクションを表示させるためのタグです。Webサイトの各ページに共通して表示されるグローバルナビゲーションや、サイドバーのカテゴリーリストなどに使用します。

navタグ

実際にWebページで表示させると、次のようになり、各項目をクリックするとリンク先URLへ遷移します。

html 書き方_No14
 

【サンプルコード付き】HTMLの書き方<応用編>

基本のHTMLが書けるようになったら、応用を学んで理解を深めましょう。

本章では、コメントの書き方・要素の階層関係・styleタグの書き方・絶対パスと相対パスの書き方について、サンプルコードを使って解説します。
 

コメントの書き方

HTMLでは、非表示のコメントを挿入できます。コメントとは、コード中に挿入するメモ書きのようなもので、複数人で管理する際などに役立ちます。

html 書き方_No15
 

要素の階層関係

タグの中にタグが入っている場合、要素は2つとなり、要素の間に階層関係ができます。囲む側の要素を「親要素」、囲まれる側の要素を「子要素」、その下を「子孫要素」と呼びます。

要素の階層関係

例えば上のhtmlコードの場合、divタグの下の階層のpタグは「子要素」。その下にあるpタグの中にあるstrongタグはdivタグから見て「子孫要素」となります。strongタグから見るdivタグは「祖先要素」となります。
 

styleタグを使ったCSS(スタイルシート)の書き方

headタグの中にstyleタグを作り、その中にCSSを直接書くことも可能です。終了タグの</head> の直前に <style> </style> と書くと、bodyタグ内全体にスタイルが反映されます。

styleタグを使ったCSS(スタイルシート)の書き方

CSS(スタイルシート)については以下を参考にしてください。

絶対パスと相対パスの書き方

 aタグのリンク先や、imgタグのsrc属性(読み込みファイルの場所)として、「パス」を記入する必要があります。「パス」とは、特定のファイルの場所までの道筋を記述したもので、パスを書くことで、コンピューターが読み込むファイルの格納場所を特定できるようになります。

パスの書き方には「絶対パス」と「相対パス」の2種類あり、別サイトのファイルを読み込む場合は「絶対パス」を、同じサーバー内のファイルを読み込む場合には「相対パス」を使用します。

「絶対パス」とは、絶対に変わることのないファイルの住所のことで、「どのドメインの / どのフォルダの中の / どのファイル」であるかを、「/」(スラッシュ)で区切ってすべて書きます。

絶対パス

例)https://hubspot.jp/wp-content/uploads/img/image.jpg

「相対パス」とは、表示させたいファイルがどの階層にあるかを示した文字列のことで、「どの階層の / どのファイル」であるかを、「/」と「..」を用いて表します。

例えば、表示するページの1つ上の階層にある「imgファイル」の中に、表示させたいファイルが保存されているとします。この場合、「..」が一つ上の階層という意味で、そのあとの「/img」が「imgファイルの中にある」という意味です。文字列の最後の「/image.jpg」は、ファイル名を指します。

相対パス

例)../img/image.jpg

相対パスは、絶対パスに比べて短い表記で済むというメリットがある一方で、ファイルのある階層の変更や、サイト構成が変更になった際のコード修正・管理が困難になるというデメリットがあります。HTMLの保守性を高めるためには、絶対パスを使用することをおすすめします。
 

HTMLを書いてブラウザで表示する方法

HTMLの書き方が一通り理解できたら、実際にテキストエディタ―にコードを書いて表示させてみましょう。本章の手順に沿って進めると、自分で書いたコードをブラウザで表示できるようになります。
 

テキストエディタを用意

今回使用するテキストエディタは「Sublime Text」、ブラウザは「Google Chrome」で作業します。

「Sublime Text」のインストール方法は、以下のとおりです。

① 「Sublime Text」公式サイトで「Windows」または「Mac」を選んでダウンロードします。

② 「sublime_text.exe」のファイルをダブルクリック→「すべて展開」→解凍された「sublime_text.exe」ファイルをダブルクリックすると、テキストエディタが開きます。
 

コードを書く

Sublime Textを開くとすぐにコードが書けるようになっています。以下のサンプルコードをコピーして貼り付けてみましょう。コードを書く練習のため、実際にキーボードで入力しても良いでしょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <title>ここにタイトルを入力</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>はじめてのHTML入門</h1>
  <p>HTMLの書き方について学ぼう</p>
</body>
</html>

 

保存する

コードが書けたら保存します。Windowsの場合は「Ctrl+S」、Macは「⌘+S」のショートカットキーで保存できます。

ファイル名は、必ず末尾に「.html」をつけて保存します。例えば「test.html」といったファイル名にします。
 

ブラウザにHTMLファイルをドラッグして表示

フォルダウィンドウと、ブラウザウィンドウをそれぞれ縮小して横に並べ、保存したHTMLファイルをブラウザ上にドラッグします。ブラウザではHTMLのコードが自動で変換され、Webページとして表示されます。

自分のパソコン内での練習や、テスト用のWebページを作るだけであればサーバーを借りなくても可能なので、HTMLコードを書く練習をしてみてください。
 

HTMLの基本の書き方を学び、Webサイト作りに活かそう

ここまで、HTMLの基本の書き方について、初心者の方でも分かりやすいようにサンプルコード付きで解説してきました。

学習する前は、専門用語が多くて難しそうと感じていた方でも、簡単なHTMLコードを書いて、ブラウザで表示できるようになったのではないでしょうか。

基本の書き方に加えて、要素やよく使うタグの役割を学ぶことでカスタマイズが可能になります。

分からない箇所は本記事をくり返し読み、Webサイト作りに活かしていただければ幸いです。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

HTML & CSS入門ガイド│マーケティング担当者向け

 HTML & CSS入門ガイド│マーケティング担当者向け

元記事発行日: 2021年11月29日、最終更新日: 2021年11月29日