HTML/CSS

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

2020年12月16日

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

 

前回はHTMLのタグの書き方について説明しました。

前回:HTMLのタグの書き方【だれでもわかるように解説】

 

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

 

しかし上記のような疑問を感じている方もいるかと。

 

実はHTMLファイルを書くにあたっては!doctype...のような「決まり文句」があります。

必ず書くものですね。

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

 

※補足

この記事は連載の1つです。

以下の学習ステップを歩んできていることを想定しています。

>>【完全無料】HTMLとCSSの学習ステップ一覧

 

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

 

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

 

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

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

 

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

 

意味一覧

 

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

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

 

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

 

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

 

<!doctype html>

 

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

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

 

<html>
</html>

 

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

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

 

<head>
</head>

 

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

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

 

<title>
</title>

 

↓ここです↓

 

 

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

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

 

<metacharset="utf-8">

 

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

必須ではありません。

 

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

 

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

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

早い読み込み
HTMLでCSSを読み込む方法

  あなたHTMLでCSSを読み込むにはどうしたら良いのでしょうか?   【この記事でわかること】 ✔ HTMLでCSSを読み込む方法   【この記事の信頼性】 この記事を書いている僕は ...

続きを見る

 

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

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

 

<body>
</body>

 

以上がHTMLに書かれる決り文句の各要素の説明でした。

 

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

 

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

 

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

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

今回はここまでです。

 

次回はCSSで装飾する方法を紹介していきます。

>>次の回:CSSでHTML要素を指定してデザインする方法

 

\ HTMLとCSSについて最初から学びたい方はこちら /

HTMLとCSSの学習ステップ一覧と書かれた画像
【完全無料】HTMLとCSSの学習ステップ一覧

  てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。   ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...

続きを見る

\ Web制作の副業で今すぐ稼ぎたい方はこちら /

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

 

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

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

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

続きを見る

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

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

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

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

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

続きを見る

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

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-HTML/CSS

S