HTML5の基礎文法5選!!

初めに

こんにちは！
この記事ではタイトルにもあるように初心者向けのHTML5の基礎文法を紹介していきますそれと自己紹介についてはプロフィールをご覧ください！！ではどうぞよろしくお願いいたします！

HTML5基礎文法一覧

1. H1,2,3,4,5,6タグ

例

...
<h1>見出し</h1>
...

使い方

<h1></h1>とは、<h1>と</h1>で挟んだ内容をホームページに表示する記述方法です！！ですがこれだけではよくわからないと思いますので以下に書かれたコードをコピーして「変更」と書かれた部分を表示したい文章に編集してご利用ください!!

<h1> 変更 </h1>

追加知識

<h1>の 「1の部分を2,3,4,5,6に変更すると見出しの重要性と大きさを変更することができます！！」実際に試してみてください!!

2. img タグ

例

<img src="test.png" alt="これはテスト画像です!!">

使い方

このimgタグは、「イメージタグ」と読み、「ホームページ内に画像を表示」します！！
使い方は<img>タグの中に,srcとaltを記述します!!(これらを「属性」という!! )ただし、このままだとまだわからないと思うので、それぞれ解説していきます!!

まずはsrc属性についてです!!src属性では、「画像のパス（場所 例: test.png）」を指定します！！
そしてalt属性についてです!!alt属性では、「画像の説明」を指定します!!この属性の役割は「もし何らかの理由で画像が表示されない場合にその代わりのテキストを表示する属性」です!!

3. div タグ

例

<div>

    <h1> divタグ </h1>

</div>

使い方

このタグは「プログラムのまとまりを作るためのタグ」です!!

例えば<h1>タグが大量にあってタイトル,メニュー、コピーライト表記に分かれていたとします！！以下が悪い例です!!

<h1> test title </h1>
<h1> test menu </h1>
<h1> copyright ~~~~　</h1>

これらのコードをきれいにしたものがこちらです!!

...

<div class="title">
    <h1> test title </h1>
</div>

<div class="menu">
    <h1> test menu </h1>
</div>

<div class="copyright">
    <h1> copyright ~~~~　</h1>
</div>

...

ここのdivタグに書いてある属性は、「class属性というもので、まとまりを管理する商品タグのようなものです！！」

4. p タグ

例

...

    <h1> title </h1>
    <p> SNS follow!! </p>

...

使い方

<p>タグはH1タグのタイトルと似たようなタグで、 「タイトルの次に来る内容」のようなタグです
前のH1タグのように「SNS follow!!」と書かれた部分を表示したい文章に変更してお使いください!!

5. mainタグ

例

main_tags_file

...

<header>

    <h1> title </h1>
    <h1> SNS follow!! </h1>

</header>

<main>

    <h1>hello world!!</h1>
    

</main>

...

最後に

いかかだったでしょうか！！
この記事で使用したコードは自由に使って大丈夫です！！それでは！！