まずは4つだけ覚えよう!
HTMLにはたくさんのタグがあります。
全部覚える必要はありませんが、まずどれから覚えていけばいいか迷ってしまいますよね。
どれが重要で覚えなくちゃいけないか。どれは覚えなくても構わないか。
ぶっちゃけ最初は「わかんねーよ!!」って感じだと思います。
特に仕事の合間に勉強をしたい!にはひとつずつ必要かを学びながら考える時間もありませんよね。
そこで、これから学び始める人が覚えるべきタグを4つに絞りました!
- hタグ (見出しの作成)
- pタグ (段落の作成)
- ulタグ (リストの作成)
- aタグ (リンクの作成)
この4つを覚えて、まずはコードを書いていきましょう!
それではひとつずつ詳しく解説していきます!
前提として
まず、HTMLやCSSを身に着けていくには自分で考えながら書いてみることがとても重要です。
私はひたすらいろいろなタグを書いてみながら、時間をかけて学んでいます。
そんな中で、「これは最低限知っておけばいろいろ書き進められるな!」って思うコードが何個かあります。
最低限これを覚えれば、工夫や思考をしながらコードを書くことができるはずです!
つまりは練習できるので、効率よく学習が進められるはずです。
HTML最初のおまじない
ここでは詳しく解説しませんが、HTMLには最初に書くべきテンプレがあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル名</title>
</head>
<body>
</body>
</html>
これですね。最初のうちはこれはコピペで構わないと思います。
この<body>と</body>の間にコードを書いてみて練習を進めましょう。
このテンプレについて詳しく知りたい人は、この記事を参考にしてください。
hタグ
hタグはheadingの略で、見出しを作るタグです。
h1~h6までの6段階になっていて、数字が小さいほど大きな見出しになります。
なので、h1タグでそのページのタイトルを書き、その後はセクションごとに中見出しや小見出しを作っていきます。
<h1>ここに見出し</h1>
<h2>ここに見出し</h2>
<h3>ここに見出し</h3>
<h4>ここに見出し</h4>
<h5>ここに見出し</h5>
<h6>ここに見出し</h6>
とHTMLで書くと、ページ上では
ここに見出し
ここに見出し
ここに見出し
ここに見出し
ここに見出し
ここに見出し
と表示されます。見出しの大きさごとに文字の大きさや太さも変化します。
しかし、文字サイズやデザインのためにhタグを使用しないでください。
pタグ
pタグはparagraphの略で、段落を表すタグです。
ひとまとまりの文章をpタグで囲ってあげることで、段落を作成します。
<p>
ここに文章を記入します。
このpタグで囲まれた部分がひとまとまりの文章ということになります。
</p>
とHTMLで書くと、ページ上では
ここに文章を記入します。 このpタグで囲まれた部分がひとまとまりの文章ということになります。
と表示されます。注目するべきは改行が反映されない点です。
HTMLで文章を改行させるためには他のタグを使用する必要があります。(<br>というタグ)
また、HTML上でpタグを使用しなくても文章はページ上で表示されます。
ですが、CSSで文字に色を付けたり、レイアウトを変えたりするときに困ることにもなるので、文章を書く際には必ずpタグで囲むようにしましょう。
ulタグ
ulタグはunorderd listの略で、順序のない箇条書きのリストを作成するタグです。
リストを作成するタグには他にも種類があるのですが、まずはこのulタグを覚えるようにしましょう。
ulタグは単体ではリストを作成できず、liタグも一緒に使用します。
liタグはlistの略で、リスト項目を作成するタグです。
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
<li>リスト項目3</li>
</ul>
のように、ulタグで「ここからリストだよ~」と示し、その中でliタグを使って項目を作成します。
このようにHTMLで書くと、ページ上では
- リスト項目1
- リスト項目2
- リスト項目3
と表示されます。
項目の頭についている点もCSSで消したり変更したりできるので、HTMLの段階では気にしなくて大丈夫です。
olタグ → 順番のあるリストの作成。頭に数字が入る。
dlタグ → 定義リストを作成。dtタグで用語、ddタグでその説明を記入。
aタグ
aタグはanchor(アンカー)の略で、ハイパーリンクを作るタグです。
指定されたサイトやページ上の場所に飛ぶことができます。
<a href="https://g9-codelog.com/">じ-ないんのCodeLog</a>
<a href="#zentei">前提として</a>
<a href="#hTag"/>hタグ</a>
<a href="#pTag"/>pタグ</a>
<a href="#ulTag">ulタグ</a>
<a href="#aTag">aタグ</a>
とHTMLで書くと、ページ上では
と表示されます。
このときのhref=”~”という部分が飛び先を表しています。
URLやページ上につけた印を指定することで、そのWebページやページ上の場所に飛ぶのです。
実は各見出しには、表示上は見えませんが印がつけてあります。
それぞれHTMLでは
<h3 id=""zentei">前提として</h3>
<h3 id=""hTag">hタグ</h3>
<h3 id=""pTag">pタグ</h3>
<h3 id=""ulTag">ulタグ</h3>
<h3 id=""aTag">aタグ</h3>
と書かれています。このid=”~”の部分が印です。
このidが書かれた場所にaタグで飛べるように出来るのです。
まとめ
時間がない中で勉強したい人、手っ取り早く学びたい人。たくさんいると思います。
どんな人も、コードを書かないで身に着けていくことはできません。
自分でコードを書いていくことで出来ることが増えていきます。
この4つのタグを使って、まずは自分でいろいろHTMLを書いていってみましょう!
ちなみに…
ちなみに、私がまず最初に書いてみたのは高校の授業で使っているプリントです。
自分が授業で使っているWordで作成したプリントをHTMLで書いてみました。
それをやってみて、何となくHTMLが理解できてきたと思います。
まずはなんでもいいのです。目についたものをHTMLでどう書けるかな?と試してみることから始めてみてはいかがでしょうか。