TodoONada株式会社
技術ブログ

[初心者必読]HTMLでよく使われるタグ一覧

[初心者必読]HTMLでよく使われるタグ一覧

HTMLのタグには多くの種類があり、初心者は何を覚えれば良いかわからないくなります。

この記事を読めばHTMLを書く上で必要なタグを学ぶことが出来ます。

この記事はHTMLを使用してWebページを作成したいIT初心者 を対象に書いていますが、

バックエンドエンジニアなどのWebエンジニア以外 の人も読んで頂ける内容になります。

なお今回の記事はHTML5 を前提に書かれています。

HTMLファイルであることを宣言

ではHTMLを書いてみようと思います。↓が持っても簡単なHTMLになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>初めてのHTML</title>
</head>
<body>
初めてのHTML
</body>
</html>

ではそれぞれのタグの意味を解説していきます。ここで紹介する書き方は

：

HTMLで必須のタグになります。文章のタイプを宣言します。

HTML5で記載されているのか？HTML4.1で記載されているのか？を判別するために使用します。

<html&gtタグ：HTMLファイルのルート要素

HTMLで必須のタグになります。「このファイルはHTMLファイルです。 」ということを宣言しているタブになります。

これのタブを見つけるとブラウザはHTMLとしてファイルを解析します。

サンプルではタグ内に「lang=ja 」と属性を追加しています。

これは日本語でHTMLを解析するようにするための属性になります。

メタデータを記載する

タグ：HTMLのメタ情報全体を記述するフィールド

タグはHTMLで**必須のタグ** になります。

文書のタイトル 、参照している情報 、スタイルシート などメタ情報を記述します。

HTML文書の情報全般を記載するため、GoogleなどのSEO対策のためにとても重要要素になります。

タグ：HTMLファイルのタイトル

HTML文書のタイトルを記入します。

文書にタイトルをつける時に使用するため、

一つの文書に一つだけ記入し、必ず~タグ中に配置させます。

タグ：文書のメタ情報を指定

検索エンジン向けのキーワード ・説明 ・インデックス の指定などメタ情報を記載するためのタグになります。

「name 」要素にメタ情報の属性値を指定して記載します。

< meta>タグはタグ内に複数含めることができます。

HTML文書のスタイル（見栄え・見え方）を表現するのが<style>タグになります。

内に直接HTML文書のスタイルを記入することもできますが、

一般的には タグ内でCSSファイルを外部ファイルとして参照してHTML文書内でスタイルを読み込みます。

タグ：CSS・RSSファイルなどを読み込む

CSS・RSSファイルなどをURLや外部ファイルとして読み込むのがタグです。

タグを指定する場合には、href属性とrel属性が必須ですので注意してください。

内容・意味を持たせてセクション分け

HTMLタグ内で内容・意味で分けることがHTMLの本来の使い方になります。

内容・意味を持たせて記事や補足情報、見出し名などを分けることでSEO対策にも役立つため正しく使えるようになってください。

タグ：HTML文書の本体を

HTMLで必須のタグになります。

実際にブラウザに表示される文書の内容をここに記入します。

つまり表示されるメインコンテンツはすべてタグに記入させます。

この～タグの中に

~

、
、
技術ブログ一覧へ戻る