今回はHTMLの基本的なタグの使い方を解説していきます！
前提条件
- HTMLの環境構築が済んでいること
- 「HTMLはタグを使って書く。」の意味が分かる
HTMLの環境構築が済んでいない方はまずこちらの記事を読んでください。
「HTMLはタグを使って書く。」の意味が分からない人はこちらの記事を読んでください。
タグの種類
HTMLには基本構造があることは解説しました。
例えば、
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <h1>HTMLの基礎を学びましょう!</h1> <p>まずはHTMLの概要を知りましょう</p> </body> </html> |
このように
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- <body>
などのタグがあります。
これらはHTMLを書く時に必要なテンプレートのようなもので、<body>タグの中身は書きたいものによって大きく変わります。
bodyの中身はどのように書くのがよいのでしょうか？
それでは今からbodyの中でよく使うタグを見ていきましょう！
<h1>～<h6>
役割：見出しを作る
例えばこんな感じ。
コードは以下の通り
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <h1>h1タグ</h1> <h2>h2タグ</h2> <h3>h3タグ</h3> <h4>h4タグ</h4> <h5>h5タグ</h5> <h6>h6タグ</h6> </body> </html> |
<p>
役割：段落を作る。
例えばこんな感じ。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <p>ここに文章を書く</p> </body> </html> |
<img>
役割：画像を貼り付ける。
例えばこんな感じ。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <img src="https://www.google.com/images/srpr/logo11w.png"> </body> </html> |
<img>は終了タグはいりません。
srcでどの画像を使うのかを指定します。
<a>
役割：リンクを作る
例えば下のようにクリックできる。
自分で書いてみるならこんな感じ
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <a href="https://www.google.com/">Google</a> </body> </html> |
ここで解説してますね。
<ul>, <ol>, <li>
役割：箇条書きができる。
例えば、<ul>だとこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <ul> <li>りんご</li> <li>ばなな</li> <li>みかん</li> </ul> </body> </html> |
<ol>だとこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <ol> <li>りんご</li> <li>ばなな</li> <li>みかん</li> </ol> </body> </html> |
このように箇条書きができるタグがあります。
つまり、
- ul → unordered list
- ol → ordered list
の略です。
<!– –>
役割：ブラウザ上に表示されなくなる
こんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <title>わかるブログ</title> </head> <body> <p>ここに文章を書く。</p> <!-- ここはコメントアウト --> <p>ここに文章を書く。</p> </body> </html> |
「ここはコメントアウト」の文字が表示されていないことが分かります。
このようにコード内にメモ書きができるようになります。
メモ書きをすることで、あとからコードを見直すときや他人が自分のコードを読む時などにわかりやすくなります。
まとめ
いかがでしたか？
今回はHTMLでよく使うタグなどについて解説しました！
始めてみる方は覚えきれないと思うので、こんなのがあるんだなくらいに思っていただいて結構です。
今回紹介したタグ
- <h1>～<h6>
- <p>
- <img>
- <a>
- <ul>,<ol>,<li>
- <!– –>
