【超初心者向け】まずはこれだけ覚えようhtmlタグ

HTML 2020年02月15日

htmlを始めるのにすごくハードルが高い。
周りにホームページの作り方教えてと言われるけど、htmlのタグを覚えるので挫折する人も多いです。

でも実は、基礎タグを覚えれば、簡単なサイトであれば作れます。
簡単なサイトが作れるとは言っても、画面に表示するよってレベルのものです。

ここではあくまで初心者向けの内容で、中級者以降の方には読み飛ばしてもらってよい内容になります。

ざっくりした説明になるので、厳密にプロが読んで役に立つ内容ではございません。

タグで指示した内容が表示されるのは嬉しい

htmlで画面に『Hello』と表示させるだけでも、何もしたことがない人からすると感動します。

ホームページ制作の学習に置いて、画面に表示させるだけなのですが、この先なかなか味わえないくらいの感動を起こします。

僕自身も例も違わず、何も知らない自分でもプログラムっぽいもので画面上に表示できたことが、モチベーションをあげるきっかけになりました。

基本的には、html5のルールで説明させていただきます。以前のXHTMLなどは例外です。
実際にプロのようなサイトを制作するには、これ以外のたくさんのタグを使用します。

ただし、これから紹介するタグは、必ずと言ってもサイト内で使うタグです。

細かい説明はしませんが、こういうものなんだと覚えてもらったらいいです。
余裕ができれば、また新しいタグを覚えていくと良いでしょう。

<h1></h1>

hとはheading（見出し）の略です。
主にタイトルとかをつける際に使用します。

<p></p>

pとはparagraph（文章）の略です。
本文を書くときに使用します。

<img src=”ファイル名” alt=””>

imgとはimage（画像）の略です。
画像を表示させていときに、使用します。
srcはsource（ソース）の略で、どこの画像を使うかを指定します。

imgタグには、閉じタグが存在しないのが特徴ですが、これについては後ほどお話しします。

<h1>タイトル</h1>のように、反映させる文字をタグで囲みます。
</ >は閉じタグといわれるものになります。

ここまでで気がついた方がいるように、<h1>の後に</h1>という閉じタグが必要になります。

主に<img>などは、閉じタグが不要です。
考えてみてください。囲うものがないですよね。閉じようにも閉じることができません。ざっくりと判断で閉じタグが必要か必要でないか判断してもらったらいいです。（もちろん例外もありますが、一旦は基本を押さえて、例外は後から覚えてください。）

<h1>の次に<h2>を使うなど、見出しタグには使う順番があります。

<h1>の後に<h2>を使わず<h3>や<h4>を使うことはルール違反になります。
本に例えるとわかりやすいですが、

h1 本のタイトル
h2 本の章
h3 本の節

など目次をイメージしてもらうと、h１の次にh3が出てくるのがおかしいことに気がつきます。

pの中に、h1やh2が入ってはいけません。
h1の中にh2やh3、pなどが入ってもいけません。

<html>
<head></head>
<body>
ここにネット上で表示させたいものをタグを使って記載してください。
</body>
</html>

上記の内容をWindowsならメモ帳で入力後、index.htmlという名前で保存してください。

保存したファイルをダブルクリックすると、デフォルトのブラウザが起動して、作ったページが表示されます。