【html&css実践 #2】タグを使ってhtmlコーディングしよう！

こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！

前回の#1では、htmlの概要説明をしました。
今回の#2では、タグを使ってhtmlコーディングをしていきます。

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

タグとは？
タグを使ってみる
色々なタグを使う
テキストにリンクをつける
最後に

タグとは？

タグについておさらいしておきます。

タグとは<h1></h1>や、<p></p>のような、< >で囲まれているものをタグと言います。

この< >で囲まれているタグは全て決まっていて、自由に書くことはできません。
また、< >は開始タグで、</>は終了タグです。

<h1></h1>は見出しタグで、<p></p>は段落を指定するためのタグになります。

「いやいや、そんなこと言われてもわからないよー！」と思いますが、ここでは< >に囲まれているものをタグと言うんだなと覚えていただければと思います。

タグを使ってみる

それではさっそくタグを使ってコーディングしていきましょう。
前回の#1のソースコードを使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="web, デザイン, xxx">
    <meta name="description" content="xxxxxxx">
    <title>xxxxxxx</title>
</head>
<body>
こんにちは
</body>
</html>

「こんにちは」のところを、<p>タグで囲ってみてください。

<p>こんにちは</p>

囲めたら保存してブラウザで確認します。

前と同じように「こんにちは」と表示されていて、「何も変わらないじゃん！」と思うかもしれませんが、ブラウザはそうは思っていません。

<p>タグで囲むことによって、『「こんにちは」のテキストは文章なんだな』と、ブラウザが判断できるようになります。

「こんにちは」という文字を日本人が見れば、あいさつの言葉（文章）と理解できますが、ブラウザは「これは文章だよ！」と教えてあげないと理解することができません。

なので、文章のまとまりを区切る段落を意味する<p>タグで囲む必要があります。

ここで1つ覚えておいて欲しいことは、どんなものでもタグが必要ということです。
文章以外にも、見出しや画像、リンクなども全てタグが必要になります。

#1の例では、タグを使わず「こんにちは」と記述しましたが、これはNGです。

どんなものでもタグが必要！
覚えておこう！

色々なタグを使う

<p>タグだけだと文章しか書けないので、色々なタグを使ってコーディングしていきます。
例を書いてみます。
※bodyタグ前後のタグは省略します。

<body>
    <h1>タグを使ってhtmlコーディングしよう！</h1>
    <p>
        こんにちは！<br>
        ユウです！
    </p>
    <p>
        前回の#1では、htmlの概要説明をしました。<br>
        今回の#2では、タグを使ってhtmlコーディングをしていきます。
    </p>
</body>

書けたら保存してブラウザで確認してみましょう。
書いたテキストが表示されていると思います。

この例で使用したタグは、先ほどと同じ<p>タグと、<h1>タグ、<br>タグです。

<h1>タグは、見出しを意味するタグです。
<h1>タグで囲むとブラウザが見出しと判断して、文字を大きく表示してくれています。

ちなみにこの見出しタグは、<h1>〜<h6>まであります。
<h1>が1番大きい見出しで、<h6>が1番小さい見出しになります。

<br>タグは、改行させるタグです。
このタグは終了タグはないので、文章の終わりに記述すれば改行させることができます。

このようにちゃんと意味のあるタグでコーディングすると、ブラウザもどんなページなのか理解することができ、SEO（検索エンジン最適化）にも効果があります。

テキストにリンクをつける

もう1つ、テキストにリンクをつけるタグをご紹介します。
リンクをつけるには、<a>タグを使います。

<body>
    <h1>タグを使ってhtmlコーディングしよう！</h1>
    <p>
        こんにちは！<br>
        ユウです！
    </p>
    <p>
        <a href="https://www.good-f-design.com/html-css-practice-01/">前回の#1</a>では、htmlの概要説明をしました。<br>
        今回の#2では、タグを使ってhtmlコーディングをしていきます。
    </p>
</body>

「前回の#1」を<a>タグで囲みました。
href属性に、リンクさせたいURLを記述します。

保存してブラウザで確認してみましょう。

リンクさせたテキストの色が変わり、クリックできるようになっていると思います。
クリックすると、指定したURLに遷移します。

最後に

以上、タグを使ってhtmlコーディングをしてみました。

タグはたくさんあって、最初は覚えるのが大変ですが、「htmlコーディング=タグ」と言っても良いほど重要なので、頑張って覚えていきましょう。

次回は、divタグと、タグの入れ子について解説したいと思います。

最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。