HOMEWEBマーケティング記事一覧HTMLの書き方の基本とよく使うタグの使い方を解説|初心者向けWEBマーケティングテクニカルSEOHTMLの書き方の基本とよく使うタグの使い方を解説|初心者向け2023/01/18ツイートシェアWebサイトを運営する際、必要となる知識が「HTML」です。日記ブログ程度であれば知識がなくても問題はありませんが、広告などのビジネス目的でWebサイトを作るなら、HTMLを避けて通ることはできません。サイト運営の初心者などは、HTMLが何なのかがよく分からず、混乱してしまうかもしれません。そこで今回は、HTMLの意味や基本的なコードのサンプルを紹介するので、Webサイトを作る際の参考にしてみてください。「生成AI」「LLM」など、AI時代のWEBマーケティングを制する!基礎から最新トレンドまで、169の必須用語を完全網羅。Language」の略語で、「Webサイトのテキストや画像などに視覚的な表現や構成を付与する言語」のことを指します。特定のルールに従ったタグを用いることで、見出し・段落・表などを追加することができるものです。上記のように見出しを付与した際に記述した内容は、以下の通りです。<h2>30代男性のおすすめ腕時計の選び方3つのポイント</h2><h3>1ブランド</h3><h3>2年齢層に合ったもの</h3><h3>3価格</h3>このように、<h2></h2>などの見出し用タグでテキストを加工することで、視覚的に見出しとしてページに出力されます。HTMLを使えば多彩な視覚表現ができるので、Webサイトの訪問者にとっては単調なテキストが羅列されるよりも、圧倒的に内容が読みやすくなります。HTMLはアップデートが数回されており、現在のバージョンは「HTML5」が最新になります。HTMLの基本的なルールHTMLには、どの場面でも共通の基本的なルールがあるため、そのルールを覚えるのがHTMLを理解する近道です。基本的には「<開始タグ>~</終了タグ>」でコンテンツを囲い込むことで、テキストや画像をさまざまなスタイルで表現することができます。開始タグと終了タグの中身が変わるだけで、「<>~</>」の形が変わることはありません。h2見出しでテキストを表示させたい場合は、以下のように表します。<h2>見出しで表示させるテキスト</h2>このように、開始タグと終了タグでテキストを囲むことで、テキスト部分がh2見出しとなって表示されるのです。「<開始タグ>テキスト</終了タグ>」の全体を、「要素」と呼びます。あるミスとして、終了タグに「/(スラッシュ)」を入れ忘れるというものがあるので、表示に違和感がある場合などは、タグの入れ方が間違っていないかチェックしてみてください。HTMLの書き方を解説ここでは、実際にHTMLの書き方について、順番に解説します。初心者には少し難しいと感じるかもしれませんが、基本的なルールに慣れれば速く記述できるようになっていくでしょう。Webページを作る上でよく使うタグについてはサンプルも紹介するので、必要に応じてコピペするなどして活用してみてください。今回は、Windowsパソコン・HTML5を基準に、解説していきます。1.コードを編集するソフトと表示させるブラウザを用意まずは、HTMLを実際に書いていくために、HTMLを記述するためのソフトと記述したHTMLを表示するブラウザの2つが必要になります。どちらも無料のツールがあるので、特にコストが掛かることはありません。HTMLを記述するためのソフトは、「テキストエディタ」というものを使用します。主なソフトとしては、以下のものが挙げられます。3Notepad++Atom上記はどれも無料で使えるソフトなので、ダウンロードしてインストールしてみてください。Windows標準ツールの「メモ帳」でも使えなくはないですが、あくまでもメモを取るための限定的な機能なため、HTMLを記述すると文字化けする・空白が発生するなど使いづらいです。記述するHTMLを表示するブラウザにも、さまざまな種類があります。今このページを見ているブラウザでもOKですし、以下のようなブラウザでも問題ありません。Edge(Windows標準搭載)Firefox上記も無料で使えるので、使いやすいもの、使い慣れているものを選びましょう。Chrome」自体も使いやすいのでおすすめです。html><html><head><title>(ここにタイトルを入力する)</title></head><body>(ここにコンテンツを作っていく)</body></html>Webページを作る際の基本的なHTMLの形は、上記のようになっています。各タグの詳細は、以下の通りです。html>(厳密にはHTMLではない)文書型の宣言。「この文書はHTML5形式で作成されている」という意味。<html>~</html>HTMLで内容を構成するという意味のタグ。<head>~</head>検索エンジン向けにキーワードやページの説明などを記述する。「<title>~</title>」でタイトルを入れるなど。<body>~</body>ページ内のコンテンツを示すタグ。タイトル以外のテキストや画像は全てこのタグの内側に入れる。「30代男性におすすめのブランド腕時計10選」というタイトル、「30代男性のおすすめ腕時計の選び方3つのポイント」というh2見出しを入れるなら、以下のような表記になります。html><html><head><title>30代男性におすすめのブランド腕時計10選</title></head><body><h2>30代男性のおすすめ腕時計の選び方3つのポイント</h2></body></html>タイトル部分、コンテンツ部分にそれぞれ記述することで、タイトル・見出しを入れることができます。基本的に、タイトル以外は「<body>~</body>」内に入れないと、実際にブラウザでページを表示させた際に、うまく表示できません。テキスト・画像・表・動画などの全てのコンテンツ内容は、全て「<body>~</body>」内に記述すると覚えておきましょう。文章については、前述したように「<body>~</body>」内に記述すれば、特にタグで囲う必要はありません。入力したテキストがそのまま表示されます。改行する際には「<br>タグ」、段落の設定には「<p>~</p>」タグをそれぞれ使う必要があります。<br>は「Break(改行)」を表すタグで、主に文章を改行する際に使います。このタグは終了タグを入れる必要がありません。「私は土曜日に映画館に行きました。」という文章を改行する場合、以下のように改行したい位置に<br>と入れると、その直前の部分から改行されるようになります。私は<br>土曜日に<br>映画館に行きました。<p>~</p>は「Paragraph(段落)」を表すタグで、主に文章ごとに段落を設定することができます。入れ方の例としては、「私は土曜日に映画館に行きました。今年見た映画の中で一番面白かったです。」という文章を段落分けする際に、以下のように開始タグと終了タグの間に文章を入れることで段落を分けることができます。<p>私は土曜日に映画館に行きました。</p><p>今年見た映画の中で一番面白かったです。</p>4.見出しタグの使い方コンテンツに見出しを付けるには、<h1~6>~</h1~6>の開始タグと終了タグを使用します。数字が小さいほど大見出しとなり、主に<h1>~</h1>は記事タイトルとしてよく使われます。一般的に、h1タグは1コンテンツにつき1回まで、h2~h6は文章中に何回入ってもよいものとされています。「おいしいパエリアの作り方3つの手順」という記事タイトルで、手順3つと注意点3つを解説するコンテンツ作成をする場合、以下のように見出しタグを入れることで、コンテンツを読みやすくすることができます。<h1>おいしいパエリアの作り方3つの手順</h1>(タイトル)<h2>作り方3つの手順</h2><h3>手順1</h3><h3>手順2</h3><h3>手順3</h3><h2>作る際の3つの注意点</h2><h3>注意点1</h3><h3>注意点2</h3><h3>注意点3</h3>ちなみに、見出しタグは大きい見出し→小さい見出しの順番で使います。大見出しとであるh2を使う前に、いきなりh3を使うというような使い方はできないので、注意しましょう。5.リストタグ(箇条書き)の使い方リストタグを使うことで、テキストを箇条書きにすることができます。リストタグには用途に応じて、以下の2種類を使います。<ul>~</ul>箇条書きの先頭が「・」で表現される。<ol>~</ol>箇条書きの先頭が「数字」で表現される。実際に使用する際は、リストタグの間に項目タグの「<li>~</li>」を必要個数分入れることで、箇条書きの項目を増やしていくことが可能です。男性の腕時計の選び方で、「ブランド・年齢層・価格」の3つを数字でリスト化する場合、以下のように必要な項目を入れていきます。<ol><li>ブランド</li><li>年齢層</li><li>価格</li></ol>すると、ブラウザ上では先頭が数字の状態で表現され、以下のように表示されます。画像タグを使うことで、コンテンツに画像を表示させることができます。タグは<img>を使い、終了タグは必要ありません。料理のjpg形式の画像を表示するなら、以下のように記述します。src=”料理の画像.jpg”>「src」の部分は、画像の場所・出所という意味のコードなので、この部分に画像ファイル名・ファイルが置かれている場所を指定します。画像タグの基本形に、以下のようなタグで情報を加えることができます。画像にタイトルを付けることができます。読み込みミスなどで画像が表示されない場合に、画像の代わりに表示されるテキストを指定します。画像の幅を指定します。単位はpx(ピクセル)。画像の高さを指定します。単位は幅と同じくpx(ピクセル)。先ほどの料理の画像を、幅1000px・高さ600pxで指定したい場合、以下のように画像タグ内に追記していくことで、画像にさまざまな属性を付与することができます。height=”600”>ちなみに、画像タグで貼り付けができる画像ファイル形式は「jpg/png/svg/gif」です。これら以外のファイル形式だとうまく表示されないので、注意しましょう。7.テーブル(表)タグの使い方テーブルタグを使うことで、表を作ることができます。<table>~</table>の形で記述し、表内を線で区切るための「border=”〇〇”」を追加します。このテーブルタグの間に、以下のタグを追加すれば、表ができあがります。<tr>~</tr>「行」を表すタグ。このタグの間に必要なセルのタグを入れる。<th>~</th>テーブルの見出しを追加するタグ。<tr>タグの間に必要な列分を追加します。<td>~</td>テーブルにセルを追加するタグ。<tr>タグの間に必要な列分を追加します。「りんご:100円、バナナ:200円、いちご:300円」という感じで表を作る場合、以下のように記述すれば、表になります。border=”1”><tr><th>果物</th><th>りんご</th><th>バナナ</th><th>いちご</th></tr><tr><th>価格</th><td>100円</td><td>200円</td><td>300円</td></tr></table>実際にHTMLのテストサイトで表示させてみると、以下のようにしっかり表示させることができました。<tr>~</tr>をテーブルタグ内にどんどん追加していけば、下に必要な分だけ行を追加することができます。8.リンクタグの使い方リンクタグを使うことで、別のWebページを開くリンクを挿入することができます。href=”リンク先のURL”>アンカーテキスト</a>」の形で設定します。アンカーテキスト部分は、そのリンクを表示するテキストなどを指定できるので、Webサイトに応じてさまざまな設定が可能です。Yahoo!JAPANへのリンクを追加する場合、アンカーテキストを「ヤフージャパンを見る」に設定するとしたら、以下のようにURLとアンカーテキストを入力します。https://www.yahoo.co.jp/”>ヤフージャパンを見る</a>すると、ブラウザには以下のように指定したアンカーテキストでリンクが表示されます。ヤフージャパンを見るちなみに、リンクをアンカーテキストではなく画像にすることも可能で、その場合は以下のように記述します。src=”リンクに使う画像.jpg”></a>サイトを構成するHTML以外の要素についてここまで、Webサイトを作るためのさまざまなHTMLを紹介しました。HTMLだけでもWebサイトを作ることは可能ですが、実際にはデザインを構成する「CSS(スタイルシート)」が多くの場合でセットになります。Webサイト上でスライドショーやポップアップウィンドウなどの動的なコンテンツを入れるなら、「javascript(ジャバスクリプト)」も必要です。それぞれHTMLとは異なる知識が必要なので、Webサイト制作の初心者にはハードルが高く感じるかもしれません。現在では、WordPressをはじめとした、すでに構成されたテーマを導入するなどすれば、CSSやjavascriptの知識はそこまで知らなくても、しっかりしたWebサイトを作ることは可能です。実際に記事を構成するHTMLを先に覚えて、その後にCSSやjavascriptの知識を覚えていくとスムーズにWebサイト作りを進めていくことができます。まとめ今回は、Webサイトを運営する上で必要となる、「HTML」について紹介しました。HTMLは、テキスト・画像などに視覚的な表現・構成を追加するもので、単調な文章だけのサイトに比べて圧倒的に読みやすいコンテンツに仕上げることができます。HTMLは一見難しそうに感じますが、基本的には「<開始タグ>~</終了タグ>」の形で、タグの中身を使い分けることでさまざまな表現が可能です。この記事ではHTMLの基本形や見出し・リスト・表などのコードサンプルを紹介したので、必要に応じて使ってみてください。【無料のおすすめ資料】2024年版・絶対押さえるべきWEBマーケティング用語169選AI時代のWEBマーケティングを制する!基礎から最新トレンドまで、169の必須用語を完全網羅。けんと)2012年より一貫して検索エンジン領域のコンサルティング業務に従事。マーケティング部門立ち上げをおこなう。お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。名前メールアドレス電話番号(ハイフン(-)は必要ありません)送信することでプライバシーポリシーに同意したものとします。USデジタルマーケティングに関することならお気軽にご相談くださいメルマガ登録メールマガジンはこちらからご登録ください。デジタルマーケティングに関するホットな情報をお届けいたします。TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。