HTMLの属性タグについて①

こんにちは、GASSYです。

最近本業がかなり立て込んでおり、プログラミングから遠ざかってしまってます。。

改めて、リソース配分が下手というか、リソースの限界値が低いというか。

本業にリソース全振りすると、疲れてそれ以外への余力が一切残らないっていうね。

効率化だの何だのはもちろんですが、

新しいプロジェクトってこともあって自分の中で予測出来ないことが起きまくってて。

それを柔軟にかわすこともできずとりあえず受け止めて打ち返すのに必死、みたいな。

球筋見極めれんけど飛んできたやつはとりあえず振りに行け！って一番あかんやつ。笑

これまた特打と思ってリソース拡張に努めていくしかないです。

あともうひとつは、リソースを自力の拡張だけで行おうとしないこと。

つまりは仲間を引き入れて自分のリソースにしてしまうということですが、これがほんっっっっとうに下手くそで。

ですがこっちの方が明らかに仕事に効くと思いますので、意識的に習得に努めたいと思います。

さて、今日なんですけどフロントエンドのHTMLについて、属性タグの説明をしたいと思います。

自分の復習メモ的要素強いですので初学者の方にはちょっとよくわからないかもしれないですが、

ご容赦頂けたらと思います。

タグって何？

HTMLでコードを書く際、ブラウザ上での「役割を定義づけるもの」がタグだと解釈しています。

ブラウザで普段私たちが見るページは大体がHTMLとCSSで形作られています。

HTMLでブラウザに表示するための骨格を作って、CSSで色を塗って形作っていくような感じです。

その骨格にもいろいろな役割があります。

例えばページのトップに固定表示させるヘッダーとか、コンテンツの見出しとか、コンテンツの種類とか。

その役割を定義づけするのがタグです。

書き方はこんな感じ

↓

＜h１＞GASSYのブログ＜／h１＞

この記述により、「GASSYのブログ」には「h１」という役割が定義づけされます。

ちなみに前の＜h１＞を開始タグ、＜／h１＞を終了タグとよび、

この開始タグから終了タグまでの定義を「h１要素」と呼びます。

主なタグの種類

＜html＞タグ

これからコーディングする文書がHTMLであることを宣言するタグです。

＜html＞＜／html＞の間に様々なコードを書いてページの骨格を作ります。

＜head＞タグ

HTML文書全体の基本情報を書くためのタグです。

サイトにタイトルとか読み込みたいCSSの指定などを、

この<head></head>の中に別のタグを組み合わせて記述していきます。

＜title＞タグ

Chromeのタブに表示させる名称を設定するためのタグです。

<head>タグ内に以下のような形で記述します。

　<head>

　<title>サイトのタイトルです</title>

　</head>

こんな感じで書くと、Chromeのタブに「サイトのタイトルです」と表示されます。

＜link＞タグ

指定した文書を参照するタグです。

今書いているHTMLファイルに反映させたいCSS情報などを指定することが多いです。

みたいな感じです。終了タグはなくて、つけると逆にエラーになります。

＜body＞タグ

<body></body>の間にページの中身を書いていきます。

＜header＞タグ

ページのヘッダーを設定します。Webサイトの一番上にくるやつです。

主にサイトのメインの説明とか、ナビゲーションを表示することが多いです。

＜main＞タグ

ページのメインコンテンツを定義づけします。

この中にサービスなどメインで使ってもらう内容を書いていきます。

＜footer＞タグ

ページのフッターを設定します。フッターはサイトの一番下部ですね。

よくあるのは著作権とか注意事項的なやつが書かれます。

今回は以上になります。主にページ全体の骨格を作るためのタグを紹介しました。

次回はその中身を作るためのタグについてご紹介したいと思います。

ではでは！

GASSY’S BLOG

本業の傍らでプログラミングを習得中の、駆け出しエンジニアのブログです。