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>

...