この記事は3分で読めます

HTMLに必須の要素

  • 投稿日
  • 更新日

あとで読む

HTMLに必須の要素

HTMLの必須要素には何があるのでしょう。これからHTMLを学びたい、最近学び始めた、という方はこの記事でホームページ作成に役立ててみてください!

イッパイアッテナ

はじめまして、イッパイアッテナです。

ITと教養で、優秀なネコの手となり、あなたのあらゆる問題を解決します。あなたの相談役だったり、デザイナーだったり、広報だったり、わたしたちは”イッパイ”の顔をあなたに見せることができます。

トップページのファイル名

まず、コーディングを始める際、テキストエディタを開いたらページごとにファイル名をつけます。
しかし、トップページのファイル名はなんでもいいというわけではありません。必ずindex.htmlを用いなければ読み込まれません。

HTMLを書き始める前に、まずはファイル名を正しく設定してから書き始めましょう。

HTMLに必須の要素

次に、テキストエディタを起動し、新規ドキュメントを開くと、下記のようなHTMLが元から書かれた状態になっています。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>

<body>
</body>
</html>

こちらに書かれているものが、HTMLに欠かせない要素です。

ここからそれぞれの要素について説明していきます。

DOCTYPE宣言

<!doctype html>

HTMLには、新旧のバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがDOCTYPEです。DOCTYPEは、必ず1行目に書く必要があります DOCTYPE宣言が無いと、ブラウザ側がどの形式で記述しているのかがわからず、CSSが実装される以前のWebサイト/ブラウザとの互換のための「互換モード」でHTMLを表示させてしまいます。 互換モードではCSSの記述がうまく読み込まれず、レイアウトが崩れてしまう場合があります。

html要素

<!doctype html>

HTMLには、新旧のバージョンがあり、どのバージョンでHTMLを記述しているかを宣言するのがDOCTYPEです。DOCTYPEは、必ず1行目に書く必要があります DOCTYPE宣言が無いと、ブラウザ側がどの形式で記述しているのかがわからず、CSSが実装される以前のWebサイト/ブラウザとの互換のための「互換モード」でHTMLを表示させてしまいます。 互換モードではCSSの記述がうまく読み込まれず、レイアウトが崩れてしまう場合があります。

head要素

<head>
</head>

head要素は、HTML文書に関する情報(メタデータ)を記述します。head要素の中には1つだけ、必ず明記することが義務づけられている要素があります。それがtitle要素ですheadタグ内に記述した内容は、ブラウザに表示されませんが、titleタグのテキストは、タブ名やブックマークで表示されます。

title要素

<title>無題ドキュメント</title>

headタグ内に記述します。ページのタイトルを記述します。

meta charset =”UTF-8″

<title>無題ドキュメント</title>

headタグ内に記述します。ページのタイトルを記述します。

body要素

<title>無題ドキュメント</title>

headタグ内に記述します。ページのタイトルを記述します。

まとめ

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

今回の記事では、HTMLファイルに必須の構成要素について、それぞれの意味を解説していきました。

HTMLの勉強を進めるときは、それぞれのタグやコードの意味を理解しながら実際のテキストエディタで練習することがおすすめです。こちらの記事を参考にしながら、一緒に勉強していきましょう!

この記事を書いた人

ほなみ
ほなみ

ほなみと申します😊現在は社会人1年目でシステムエンジニアとして働いています。 WEBデザイナーを目指してデジリグで勉強中です!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Web制作について相談してみませんか?

必須は必須項目です。弊社へお問い合わせいただく方は、下記の「個人情報の取り扱いについて」を必ずお読みください。

会社名

任意

お名前

必須

メールアドレス

必須

電話番号

任意

お問い合わせ内容

必須