HTML/CSS

HTMLで表示するための決まり文句のタグの意味を理解しよう

2020年12月16日

HTMLで表示するための決まり文句のタグの意味を理解しようと書かれた画像

 

あなた
HTMLファイルの!doctype...みたいなタグってどのような意味があるのでしょうか?

 

実はHTMLファイルを書くにあたっては「決まり文句」があります。

必ず書くものですね。

 

今回はその決まり文句のタグについて解説します。

 

【この記事でわかること】

HTMLの決まり文句のタグの書き方

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

ではさっそく見ていきましょう。

 

(この記事は連載記事の1つです。最初から見たい方はコチラから見れます。)

>>HTMLとCSSの学習ステップ一覧はコチラ

 

決り文句のタグを解説します

 

前回はHTMLのタグの意味を解説しました。

しかし以前WEBページを表示させたときのindex.htmlには<!doctype html>などのタグもありましたよね。

 

この章ではhtmlファイルを編集するときの決まり文句となっているタグの意味について解説します。

 

意味一覧

 

まず決まり文句のタグは以下の通りです。

index.html

<!doctype html>
<html>

<head>
<title>テストサイト</title>
<metacharset="utf-8">
<linkhref="css/style.css"rel="stylesheet"type="text/css"media="all">
</head>

<body>
</body>

</html>

 

1つ1つ意味を解説していきます。

 

以下のタグはこのファイルが「HTMLファイルだよ」と宣言しているものです。

index.html

<!doctype html>

 

以下のタグはHTML文書の開始と終了を意味しています。

HTML要素は全てこのタグの中に書きます。

index.html

<html>
</html>

 

以下のタグは文書のヘッダ部分を指定するタグです。<head>タグで囲まれた内容はhtmlファイルの情報を知らせてくれます。

書く場所は決まっていて<html>タグのあと、<body>タグの前に書きます。

 

index.html

<head>
</head>

 

以下のタグは表示されるページのタイトルを決めてくれるものです。

chromeなどのブラウザで開いたときのサイト名が普通は表示される部分がこのタグに囲まれた文字になります。

index.html

<title>
</title>

↓ここです↓

 

以下タグは文字エンコーディングを宣言しています。

文字エンコーディングを指定しない文字化けが起きることがありますのでなるべく指定しておきましょう。

index.html

<metacharset="utf-8">

 

以下はcssファイルを読み込むための記述です。

必須ではありません。

index.html

<linkhref="css/style.css"rel="stylesheet"type="text/css"media="all">

 

読み込み方法についてはこちらで解説しています。

>>HTMLでCSSを読み込む方法

 

以下はhtmlのメイン部分です。

通常はこのbodyタグの間に表現したいコードを書いていきます。

index.html

<body>
</body>

 

スラスラっと書けるようにしておこう

 

今回紹介したタグは今後HTMLファイルをあなたが扱う機会があればさも当たり前かのように書かれています。

 

あわてることなく「そういうものだ」と認識しておきましょう。

また、あなたが1からファイルを作成するときはスムーズに書けるようにしておきましょう。

 

今回はここまでです。

 

HTMLのタグには決まり文句となっているタグもある

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

僕も通ったHTMLとCSSを学ぶことができるスクールはコチラ

>>HTML/CSSを習得できるプログラミングスクールランキング

 

 

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

© 2021 エンジニアてんし君ブログ