こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は、HTMLがあまり分かっていない【初心者の方向け】に、HTMLの基本の書き方についてご紹介します！

こんなお悩みありませんか？

・HTMLの書き方がわからない…
・HTMLをマークアップするってどういう意味？

そもそもHTMLとマークアップって？！

HTMLとは、『 Hyper Text Markup Language 』の略で、Webページを作るためのマークアップ言語のひとつです。「Webページを作るための言語がHTMLなんだな。」と覚えておきましょう。

また、マークアップとは、テキストが何を示すか（例えば、見出し・段落・箇条書きなど）コンピュータに分かるように目印をつけるのがマークアップの役割となります。
適切なHTMLタグを使って、マークアップすることを心がけるのが大切です。

それでは、次でHTMLタグの使い方と書き方をみていきましょう！

まずは基本のタグを使ってマークアップしよう！

HTMLタグはたくさんありますが、最初にこれだけは覚えておきたいよく使うHTMLタグを6つご紹介します。

HTMLタグ6選

【1】h1~h6タグ(見出し)

h1~h6タグは見出しとして使われます。
見出し部分を<h1> ～ </h1>で囲みます。

<h1>が一番大きい見出し、<h2> → <h6>となるほどに小さな見出しになります。

・h1→h2→h3…h6と小さい数字から順番につけるのがルールです。
・h1タグは、1ページに1回だけ使うようにしましょう。

【2】pタグ(段落分け)

pタグは、段落分けに使われます。
ひとつの段落としたい部分を<p> ～ </p>で囲みます。pタグの前後には改行が入ります。
画像なども囲めますが、基本的にはテキストのみに使用します。

【3】brタグ(改行)

改行にはbrタグを使用します。
一つの段落内でテキストを改行したい時、<br>と書くだけで改行してくれます。

【4】divタグ(ブロック分け)

ひと固まりのブロックとして分ける場合divタグを使用します。
ひと固まりとしたい部分を<div> ～ </div>で囲みます。

・divタグの中にはあらゆるタグを入れて、大きなまとまりを作ることができます。
　（h1～h6、p、imgなどや、別のdivも入れることができます）

・divタグは単体では固まりを作るタグですが、idやclassをつけることで役立ちます。

【5】aタグ(リンク)

テキストなどをクリックして、特定のページを開くことをリンクと言います。
リンクを設定したい場合は、<a>タグを使用します。
リンクしたい箇所を<a> ～ </a>で囲みます。href属性でURLを指定します。

▼別タブでリンク先ページを開きたい場合は「target="_blank"」を追加します。

【6】imgタグ(画像)

画像を表示したい場合<img>タグを使用します。src属性で画像を指定して表示します。
alt属性は、画像の代わりとなるテキストを指定することができます。

・画像は、「100MBサーバー/ギガプラス10」にアップロードして表示できます。
・参考記事「画像やCSSファイルをアップロードしたい」をご参照ください。

上記のHTMLタグを使ってマークアップしてみよう！

ここでは、例としてショップの利用案内ページの「お支払いについて」を、divでひと固まりとして書いてみます。

▼HTML例

↓このように表示されます。

お支払いについて

・テキストはpで、ひと固まりのコンテンツは、divで囲んで書くようにしましょう！

これで、コンピュータに分かるようにマークアップすることができました！

文字の大きさや色を変えたりと、デザインしたい場合は、CSSで装飾することができます。
CSSについては、また別ページでご紹介します！

完了！

いかがでしたでしょうか。
WebページでHTMLは、骨組みとなる箇所です。
土台となる骨組みを正しく書いて、運用しやすいサイトを作りましょう。

それではまた！