HTMLの基本的な書き方とは？基本文法や要素や属性の意味を詳しくお話していきます。
開始タグと終了タグで囲む
HTMLの基本文法は、開始タグと終了タグで対象となる情報を囲んで記述していきます。
これまでに登場した「<html>～</html」や「<body>～</body>」と同じく、<>は開始タグで</>は終了タグという風に使われます。
開始タグと終了タグの違いは、終了タグには「/」の記述が含まれています。
例えば文章として「ひょーちゃんのWEBデザインを学ぶ」とWEB上に表示させた場合、
<p>ひょーちゃんのWEBデザインを学ぶ</p>と記述します。
※ <p>タグは、文章の段落を表します
入れ子構造（ネスト）という考え方
「入れ子構造（ネスト）」とは、タグの中に異なるタグを含めて記述方法です。
例えば、先ほどの「<p>ひょーちゃんのWEBデザインを学ぶ</p>」とコードを記述すると、WEB上に文字として表示されます。
この文字を “大文字” にしたい場合、「<strong>」を記述してあげることで適用されます。
記述方法としては、
<p><strong>ひょーちゃんのWEBデザインを学ぶ</strong></p>と書きます。
注意点としては、必ず入れ子にする開始タグと終了タグはセットにすることです。入れ子側の終了タグを省略したり、外側に入れ子のタグを記述してしまうと正常に適用されません。
要素
「要素」とは、開始タグ+内容+終了タグのセットのことです。
コード記述する場合は、「<p>ひょーちゃんのWEBデザインを学ぶ</p>」となります。
その為、要素とはHTML文法そのものだとも言えます。
HTMLで使用する要素には、大きく分けて以下のようなグループがあります。
・文書の基本構造
・メタ情報
・セクショニング
・コンテンツ要素
・テキストレベルの意味付け
・リスト要素
・リンク・画像・メディア
・テーブル
・フォーム
・その他の構造・スクリプト系
・セクショニングルート
すべてをここで説明すると、とんでもない文章量になってしまうので次回以降、グループごとに分けながら詳しく解説していきます。
属性
「属性」とは、HTML要素に追加情報を与える為の仕組みです。
例えば要素で画像を扱う場合に、”このファイルにある画像を使います” という指定が属性で指定することが出来ます。
その為、HTMLにおいて要素と属性はセットで使う機会がほとんどです。
HTMLで使用する属性には、大きく分けて以下のようなグループがあります。
・グローバル属性
・文書構造・リンク系属性
・画像・メディア系属性
・テキスト・表示関連
・テーブル関連
・フォーム関連
・script・link系
・iframe・埋め込み系
・SEO・アクセシビリティ関連
・【補足】HTML5で追加された代表的属性
すべてをここで説明すると、とんでもない文章量になってしまうので次回以降、グループごとに分けながら詳しく解説していきます。
コメント