HTMLの骨組みを理解しよう

2023年12月25日2024年1月17日

当ページのリンクには広告が含まれています。

今回はHTMLの骨組みについての記事になります。

本記事では以下の点について解説します。

この記事で分かること

HTMLの骨組みについて学べる

基本コピペで問題ありませんが、まったくわからないまま使用するのは危険なので理解出来るように学んでいきましょう！

HTMLの骨組み

今回解説する基本骨格を確認してみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">	
　　<meta name="description" content="">
    <title>ウェブサイトのタイトル</title>
  </head>
  <body>
  </body>
</html>

…意味わかりませんよね。

基本骨格なので一からコーディングする必要はなくコピペで使いまわせますが、意味がわからないまま使うのはとても危険なので、少しずつでも利用できるようにしましょう！

<!doctype html>

<!doctype html>はDoctype（ドックタイプ）宣言と言い、そのページがHTML5で作成されたことを宣言しています。

HTML5とはHTMLのバージョン5のことで、現在最新のHTMLバージョンになります。

現在HTML5が主流で、経験上HTML４使うことは一度もなかったのでこちらに関しては特に指定などがなければHTML5つまり<!doctype html>で問題ありません。

Doctype宣言は必ず<html>タグより先に記述する必要があります。

<html　lang=”ja”></html>

<html>タグはHTMLの文章であることを表しています。

属性のlangはWebページの言語を設定で、値であるjaはjapaneseの略で日本語の文章であることを示しています。

値がen（略：english）であれば英語の文章ということになりますね。

Doctype宣言のすぐ後に記述する必要があります。

<head></head>

<head>（ヘッド）タグは検索エンジンやブラウザにWebページの情報を伝えるタグです。

タイトルや外部ファイルのリンクなどを記述します。

通常<head>タグに記述された情報はブラウザ上には表示されません。（タイトルは表示されるなどの例外はある。）

<meta charset=”utf-8″>

このタグは文字コードを指定するタグです。

utf-8は指定された文字コードです。

世界的にもポピュラーな文字コードでありほとんど文字化けしない為、指定されていない場合はutf-8を利用しましょう。

utfはユーティーエフエイト、charsetはキャラセットと読みます。

補足　meta（メタ）はWebページの情報をブラウザや検索エンジンに向けて伝える情報のことです。

<meta name=”description” content=””>

このタグはユーザーや検索エンジンにwebページの概要を伝える役割があります。

検索エンジンで検索すると、タイトル下に表示される説明部分ですね。

下記の例のようにcontent属性の値にwebページの概要を記述します。

<meta name="description" content="釣り道具レビューサイトです。釣りが大好きなのでたくさん投稿したいと思います">

<title><title>

<title>タグは、WebサイトやWebページのタイトルをユーザーに情報を伝えるタグになります。

検索した時のタイトル、ブラウザのタブにも表示される重要なタグですので忘れないように記述しましょう。

<body></body>

<body>に記述された部分が実際にブラウザ上に記述されます。

最後に

基本骨格はコピペで使いまわせますが、タグの意味は理解しておきましょう！

お疲れさまでした。