BLOG

Mar 25, 2020

HTMLマークアップの超基本！最低限押さえたいHTML入門

今回はマークアップの基本的な考えを身につけていければと思っています。HTMLのタグはどんなときに、どのタグを選んでマークアップするのか、分かりづらかったりします。え、マークアップって何？という人のために、少し説明しておきます。

HTMLマークアップとは？

HTMLマークアップとは、マークアップ言語である「HTML」を使ってファイルにソースコードを記述することなんです。 HTMLマークアップは、Webサイトのページを構築するために必要な作業で、現時点で最新のHTML5を使うことが推奨されてます。マークアップは文章を構造化する作業のことで、見出し・リスト・リンクがどこにあるのか一目瞭然にしていきます。ブラウザが機械的に見てもしっかりと認識できるので、画面上にも分かりやすく表示されるんです。

コーディングとどう違うの？

マークアップが文章を構造化する作業なのに対して、コーディングはソースコード全体を記述する作業なんです。HTMLだけではなく、JavaScriptやPHPなど、様々なプログラミング言語を用いて行う作業です。要するにコーディング作業の中のマークアップ作業という考え方ですね。

まずは元原稿を見てみよう

それでは実際にマークアップの基本的なところを見ていきましょう。まずは元原稿です。

フッと心が軽くなるおはなし会

人間関係や健康、家族、お金、将来など、誰もが少なからず“悩み”や“不安”を抱えて暮らしています。
「おはなし会」では、そんな悩みが少しでも軽くなり、もっと人生が楽しくなるための「心のつかい方」をお伝えします。
心の向きを少しだけ変えれば、必ず見える世界も変わってくるはずです。是非、ご参加ください。

●日時と場所
日時 : 2020年 3月29日（日）14:00〜
場所 : Webスタジオディーライズ（地図）

●注意事項
・参加費は無料です。初めての方もお気軽にご参加ください
・おはなしは20分程度です
・ひなちカフェ（茶話会）もございますので、是非ご参加ください

●中森祐貴プロフィール
10歳年下の妻と、3人の子どもたちと田舎でのんびり暮らすクリエイター。出版社で15年間、DTPデザイナーとして経験を積み、その間、独学でWeb制作の技術を取得。2018年、フリーランスとして独立し「Web Studio DeRize」を地元・三重県名張市で立ち上げた。

記事の大見出しを立てる

まずは大見出しを立てることから始めます。

<h1>フッと心が軽くなるおはなし会</h1>

大見出しのテキストに重要なのは、その記事の内容が一目で分かることです。<h1>はそのページの一番重要な見出しを意味します。ユーザーはまず大見出しを読んで、続きを読むか判断しますし、検索エンジンはこの大見出しの内容を重視すると言われているんです。それだけ重要なタグですから、記事の内容に合った適切な見出しを立てる必要がありますね。

中見出しを立てる

大見出しを立てたら、それ以外の見出しを立てます。

<h2>●日時と場所</h2>

<h2>●注意事項</h2>

<h2>●中森祐貴プロフィール</h2>

見出しタグは<h1>から<h6>まであります。大見出しに<h1>を使用すると、普通は中見出しには<h2>を使用し、<h2>の見出し内のテキストにさらに見出しが必要な場合は<h3>を使います。

段落を作る

見出しの次は、テキスト部分をマークアップしていきます。段落ごとに<p>タグで囲います。よく改行には<br>タグが使われがちですが、<p>は段落を意味するタグですのでそちらを使うのが正しいとされています。

<p>人間関係や健康、家族、お金、将来など、誰もが少なからず“悩み”や“不安”を抱えて暮らしています。</p>

<p>「おはなし会」では、そんな悩みが少しでも軽くなり、もっと人生が楽しくなるための「心のつかい方」をお伝えします。</p>

<p>心の向きを少しだけ変えれば、必ず見える世界も変わってくるはずです。是非、ご参加ください。</p>

箇条書きを作る

「日時と場所」「注意事項」の部分は箇条書き（リスト）ですので、<ul>と<li>でマークアップします。

<h2>●日時と場所</h2>
<ul>
  <li>日時 : 2020年 3月29日（日）14:00〜 </li>
  <li>場所 : Webスタジオ ディーライズ（地図）</li>
</ul>

<h2>●注意事項</h2>
<ul>
  <li>参加費は無料です。初めての方もお気軽にご参加ください</li>
  <li>おはなしは20分程度です</li>
  <li>ひなちカフェ（茶話会）もございますので、是非ご参加ください</li>
</ul>

リンクを作る

地図と書かれたところをリンクの<a>タグで囲います。

<ul>
  <li>日時 : 2020年 3月29日（日）14:00〜 </li>
  <li>場所 : Webスタジオ ディーライズ（<a href="URL">地図</a>）</li>
</ul>

記事をセクションごとにまとめる

さらに丁寧にマークアップするのなら、記事をセクションごとに分けることもできます。セクションとは、見出しとそれに続く内容をひとまとめにしたセットのことで、<section>タグで囲います。このタグはHTML5で新たに登場したタグですが、いまいち使い方がはっきししない上、検索エンジンに優遇されるなどのメリットもないとされるため、無理して使う必要はないかと思います。

<section>
<h2>●日時と場所</h2>
<ul>
  <li>日時 : 2020年 3月29日（日）14:00〜 </li>
  <li>場所 : Webスタジオ ディーライズ（地図）</li>
</ul>
</section>

<section>
<h2>●注意事項</h2>
<ul>
  <li>参加費は無料です。初めての方もお気軽にご参加ください</li>
  <li>おはなしは20分程度です</li>
  <li>ひなちカフェ（茶話会）もございますので、是非ご参加ください</li>
</ul>
</section>

<section>
<h2>●中森祐貴プロフィール</h2>
<p>10歳年下の妻と、3人の子どもたちと田舎でのんびり暮らすクリエイター。出版社で15年間、DTPデザイナーとして経験を積み、その間、独学でWeb制作の技術を取得。2018年、フリーランスとして独立し「Web Studio DeRize」を地元・三重県名張市で立ち上げた。</p>
</section>

記事全体を<article>でまとめる

<section>タグが記事の1部分をひとまとめにするのに対して、<article>は記事全体をひとまとめにするために使います。そのページで一番重要な<h1>と記事全体を<article>で囲むのがスタンダードな使い方です。こちらもHTML5で新たに登場したタグで、<section>同様用途が分かりづらいため、無理して使う必要はないかと思います。

<article>

<h1>フッと心が軽くなるおはなし会</h1>

<p>人間関係や健康、家族、お金、将来など、誰もが少なからず“悩み”や“不安”を抱えて暮らしています。</p>
<p>「おはなし会」では、そんな悩みが少しでも軽くなり、もっと人生が楽しくなるための「心のつかい方」をお伝えします。</p>
<p>心の向きを少しだけ変えれば、必ず見える世界も変わってくるはずです。是非、ご参加ください。</p>

<section>
<h2>●日時と場所</h2>
<ul>
  <li>日時 : 2020年 3月29日（日）14:00〜 </li>
  <li>場所 : Webスタジオ ディーライズ（地図）</li>
</ul>
</section>

<section>
<h2>●注意事項</h2>
<ul>
  <li>参加費は無料です。初めての方もお気軽にご参加ください</li>
  <li>おはなしは20分程度です</li>
  <li>ひなちカフェ（茶話会）もございますので、是非ご参加ください</li>
</ul>
</section>

<section>
<h2>●中森祐貴プロフィール</h2>
<p>10歳年下の妻と、3人の子どもたちと田舎でのんびり暮らすクリエイター。出版社で15年間、DTPデザイナーとして経験を積み、その間、独学でWeb制作の技術を取得。2018年、フリーランスとして独立し「Web Studio DeRize」を地元・三重県名張市で立ち上げた。</p>
</section>

</article>

HTMLドキュメントの基礎部分をマークアップ

以上が<body>〜</body>の間に挿入する記事のマークアップの基礎です。HTMLには先ほどの記事のマークアップ以外に、どんなページにも書いておかなければならない基礎の部分があります。基本的にはコピペでOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="「おはなし会」では、そんな悩みが少しでも軽くなり、もっと人生が楽しくなるための「心のつかい方」をお伝えします" />
<title>フッと心が軽くなるおはなし会</title>
</head>
<body>
<article>

・・・

</article>
</body>
</html>

まずはDOCTYPE宣言をします。<!DOCTYPE html>と最初に記述することで、このドキュメントはHTML5の仕様に基づいて書かれていることを示しています。

次に<html>タグにはlang属性を追加します。lang属性は言語の指定です。

そして<head>〜</head>間には、このHTML自体の情報を記述します。これをメタデータといいます。またこのメタデータは、ブラウザに表示されることはありません。<body>〜</body>の部分を正しく表示させるためと、検索エンジンなどにそのページの内容を伝えるために重要なことが書かれているんです。

<meta charset="utf-8">

これは文字コードが「utf-8」であることを示しています。

<meta name="description" content="「おはなし会」では…" />

これはページの概要を記しておく部分です。content=”…”の「…」部分に最大160文字の長さ内で記述します。

<title>〜</title>

このHTMLファイル全体のタイトルを書いておきます。このタイトルの部分は、先ほどの「meta name=”description” 」と共に、検索結果に表示される部分となる可能性が極めて高いので、きちんと考えて書いてください。

<body>〜</body>

ブラウザに表示される部分です。ここでは<body>〜</body>の中に記事であることを示す<article>タグを入れています。HTMLを書くという作業のほとんどが、この部分の記述となります。

いかがでしたか？マークアップといっても、決められたタグで囲う作業ですから、この基本さえ抑えておけば、そんなに難しいものではないと思います。HTMLをマークアップすることで、文章が構造化されてそれぞれの役割が明確になりましたよね。これからのレベルアップのために、是非押さえておいてください。