【WEB制作の基本】これだけは抑えておくべきHTMLタグ21個

スポンサーリンク

こんにちは、WEBマーケッター山田祐輔@yusuke_6216です。

今回は、「これだけは抑えておくべきHTMLタグ21個」についてお話します。

はじめに

まず、HTMLってなんぞや?という方もいるかもしれないので、簡単にご説明します。

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。 文章の中に記述することでさまざまな機能を記述設定することができる。

引用元:HTML – Wikipedia

つまり、WEBサイトを構成している素(もと)です。

このHTMLの記載がないと、そもそもWEBサイトは構成できません。(ただし、ワードプレスやアメブロ等では、ビジュアル入力という方法でHTMLの知識がなくても記事を作成することができます)

上記の場合、HTMLが使われていないのではなく、入力した文章をHTMLに自動的に置き換えてくれているんですね。

では、これから絶対に覚えておいた方が良いHTMLタグ21個について解説していきます!

これだけは抑えておくべきHTMLタグ21個

タグ

1 、<html></html>

HTML文章を作る場合、必ずHTMLタグで囲む。

必ず必要!

2、 <head></head>

サイトの情報を記述するためのコンテナとなる部分。

必ず必要!

3、<title></title>

タイトルを設定する。headタグ内に記述する。

必ず必要!

4、 <meta />

name description

サイトの説明文を記述する

name keywords

サイトのキーワードを記述する

content

内容それぞれのname値に対する内容を入力する

書き方の例)<meta name=“keywords” content=“NEST,school,web,デザイン”/>

5、 <link />

rel stylesheet

スタイルシートを読み込む

href style.css

type text/css 書き方の例)<link rel=“stylesheet” href=“style.css”type=“text.css”/>

ページのセクショニング(グルーピング)

6、<body></body>

webページの表示に関するコンテナとなる部分。

必ず必要!

7、<header></header>

ヘッダー部分のタグとして使用する

8、<nav></nav>

ナビゲーション部分のタグとして使用する

9、 <div></div>

ある部分をグループ化するためのタグ。タグ自体に意味はなし。

主にレイアウトを作るのに使われる。

10、<footer></footer>

フッター部分のタグとして使用する

11、 <h1>-</h6>

そのセクションに対する見出しを表します。

<h1>に近づくほど重要な見出しであることを意味します。

テキスト

12、 <p></p>

段落を意味する。主に数行に渡る文章を記述するのに使われる。

13、<span></span>

特に意味は持っていない。文章の一部をグループ化する際によく使用される。

14、<br />

強制改行

15、<a></a>

href url リンクであることを示す。href属性の値に、リンク先を記述する

16、 <img />

src url.jpg url に画像へのリンクを記述することで、リンク先の画像を表示する。 

記述方法→<img src=”url”>

alt テキスト画像の内容を意味します。画像の代替テキストです。

画像が表示されない場合や障害者に対応するためにも必要です。

リスト

17、 <ul></ul>

リストのグループを意味する。子には、必ず<li>タグが入る。

18、<li></li>

リストアイテムを意味する。ナビゲーションなど連なるものに主に使用される。

19、 <dl></dl>

定義型リストを作る。複数の連なる何かを説明する場合などに利用する。

20、<dt></dt>

説明するもののタイトルを指定する。

21、 <dd></dd>

真上にある<dt>タグの内容を説明する。

まとめ

いかがでしたでしょうか?

今回は、「これだけは抑えておくべきHTMLタグ21個」について解説しました。

最後に、ほぼ全てのタグに記述できる、属性一覧をご紹介します!

属性一覧

1、width

半角数字長さ(横幅)を指定する

2、height

半角数字高さを指定する

3、class class

名タグに名前を付ける。

同じHTML内に複数使用する場合はidではなくclassを使用する。

4、 id

id名タグに名前を付ける。同じHTML内一つしか使用しない場合はclassではなくidを使用する。

ぜひ、参考にしてみてください!

スポンサーリンク

参考になりましたら、「ツイート」や「シェア」お願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

IT企業でメディア運営を行いながら個人でもWEBデザインやネットビジネス、映像など色んなことを勉強中!(特に海外のマーケティング情報が大好物)このブログでは主に学んだことを中心に、個人や小規模ビジネスを対象にしたコンテンツマーケティングに関する情報を中心に書いています!