You are currently viewing 【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの要素」【入門編】

【HTML】Webサイトの基本のHTMLを学ぼう!「HTMLの要素」【入門編】

こんにちは、Ka-Chanです。

こちらの記事は、私のメモのようなものです。
HTMLを取得するにつれて学んだことを記事にしてまとめています。

参考になったらと思います。

下記のような手順で学んでいきました。
それでは、今回は「HTMLの基本」についてです!

これから紹介するタグについては今後詳しく説明していくよていです。
なので、「このようなものがあるんだぁ~」という風に考えていただければと思います。






  • HTMLの開発環境を用意しよう!
  • HTMLとは?
  • HTMLの基本
  • HTMLの要素
  • HTMLの属性
  • HTMLの見出し
  • HTMLの段落
  • HTMLのスタイル
  • HTMLの書式
  • HTMLの引用
  • HTMLのコメント
  • HTMLの色
  • HTMLの要素

    HTML要素について

    HTML要素は通常、開始タグと終了タグで構成されていて、その間にコンテンツが挿入されます。

    <tagname>ここにコンテンツが入ります</tagname>

    HTML要素は、開始タグと終了タグは同じ単語です。下記のように

     

    <p>最初の段落</p>

    コンテンツのないHTML要素が存在します。それは空の要素と呼ばれます。
    空の要素には、<br>要素(改行を示す)など終了タグを必要としません。

    ネストされたHTML要素

    ※ネストとは、「入れ子」という意味であるものの中に、それと同じ形や種類の(一回り小さい)ものが入っている状態や構造のこと。ITの分野では、コンピュータープログラムやデータ構造において、ある構造の内部に同じ構造が含まれている状態のことをします。
    By IT用語辞典 e-words

    HTML要素はネストすることができます(要素には要素を含めることができます)。

    全てのHTMLドキュメントは、ネストされたHTML要素で構成されています。

    下記の例では、5つのHTML要素が含まれています。

    上記の例の説明

    <html>要素は、コンテンツ全体を定義するためのもの

    開始タグは<html>で、終了タグ</html>

    <html>要素内には<body>要素があります。

    <body>要素は、実際にweb上に表示されているコンテンツを定義します。

    <h1>要素は見出しを意味しています。

    <p>要素は段落を意味しています。






    終了タグを忘れないでね!

    終了タグを忘れると予期しない結果やエラーが発生する可能性が高まります。

    しかし、終了タグを忘れても下記のように一部のHTML要素は正しく表示されます。

    </p>の終了タグを忘れていてもちゃんと表示されているのが確認できると思います。

    なぜかというと終了タグがオプションとみなされているため、すべてのブラウザーでちゃんと機能致します。

    しかし、先ほどもいいましたが
    「終了タグを忘れると、予期しないエラーや結果が発生する可能性があります。」

    空のHTML要素

    コンテンツのないHTML要素は、空の要素と呼ばれています。

    <br>空の要素は、終了タグのない要素です(<br>タグは改行ができます)。

    上記のように終了タグはないのですが、次のように開始タグ<br>を閉じることができます。

    <br />これをすれば一応閉じましたよのようになります。

    HTML5では、空の要素を閉じる必要はありません。ただし、より厳密な検証が必要な場合、またはXMLパーサーでドキュメントを読み取りを可能にする必要がある場合は、すべてのHTML要素を適切に閉じる必要があります。

    最後に、

     

    HTMLは大文字と小文字を区別しません

    他の言語を学んだことがある方は、わかる人がいるかと思いますが他の言語では、大文字と小文字を区別するものもあります。しかし、大文字と小文字を区別しないHTMLはある意味楽なのかなぁと思います。

    なので<P>と<p>は同じ意味になります。

    HTML5標準では小文字のタグは必要ありませんが、W3CではHTMLで小文字を推奨しており、XHTMLなどのより厳密はドキュメントタイプでは小文字を要求します。

    なので、大文字と小文字は区別はしないのですが、小文字を使いましょう!

     

    それでは、こちらの記事はこれで終わりです。

    次の記事はこちらです。






    コメントを残す