前回はHTMLのタグの書き方について説明しました。
しかし上記のような疑問を感じている方もいるかと。
実はHTMLファイルを書くにあたっては!doctype...のような「決まり文句」があります。
必ず書くものですね。
今回はその決まり文句のタグについて解説します。
-
【完全無料】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のメイン部分です。
通常はこのbodyタグの間に表現したいコードを書いていきます。
<body>
</body>
以上がHTMLに書かれる決り文句の各要素の説明でした。
スラスラっと書けるようにしておこう
今回紹介したタグは今後HTMLファイルをあなたが扱う機会があればさも当たり前かのように書かれています。
あわてることなく「そういうものだ」と認識しておきましょう。
また、あなたが1からファイルを作成するときはスムーズに書けるようにしておきましょう。
今回はここまでです。
次回はCSSで装飾する方法を紹介していきます。
\ HTMLとCSSについて最初から学びたい方はこちら /
-
【完全無料】HTMLとCSSの学習ステップ一覧
てんし君こちらはプログラミング初心者の方向けのHTMLとCSSの基本的な学習用ページです。 ここで紹介している学習カリキュラムをやりきれば、最終的にこちらのようなWebサイトを作成可能です。 ...
続きを見る
\ Web制作の副業で今すぐ稼ぎたい方はこちら /
-
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】
あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの？ スクール選びで失敗はしたくないです。 ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...
続きを見る
