SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】基本的な書き方! 基本構造とメタデータを学ぼう

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【HTML】基本的な書き方! 基本構造とメタデータを学ぼうの解説になります!

こんな方に読んでほしい

  • HTMLを学び始めた方へ
  • HTMLの基本構造について学びたい方へ
  • 今回はHTMLの基本的な書き方、メタデータや内部構造についての解説になります。

HTMLを学び始めた方は、コードを見た際に、「まず、何を書いたら良いのだろうか」思うことがあるとおもいます。
HTMLにはルール記述方法があり、それらを守らないとブラウザ上で反映しません。
この記事では簡単に解説していきます。

Webサイトの基本構造とメタデータを理解していきましょう!!

基本構造、メタデータとは

基本構造、メタデータとは

HTML文書は、DOCTYPE宣言から始まり、様々な情報やファイルを指定し、一つのホームページが生まれます。ここでは、最新のバージョンであるHTML5を学び、理解していきましょう。
基本的な書き方は以下になります。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>
</body>
</html>
基本構造の解説
  • DOCTYPE宣言
    ドキュメントタイプを宣言します
  • html〜/html
    html〜/htmlの中身に要素が入ります。HTML文書において基点となります。
    lang=”ja”とは、日本語に対応したHTMLファイルの意味を示します。
  • head〜/head
    ヘッダ情報を示します。「metaタグ」、「titleタグ」、「cssファイル」、「scriptファイル」など
  • body〜/body
    HTML文書の本文を示します。コンテンツが入る場所になります。

DOCTYPE宣言について

DOCTYPE宣言について

DOCTYPE(ドキュメントタイプ)宣言とは、その文書のバージョンを宣言する、メタ情報になります。
現在の、最新バージョンはHTML5になります。
バージョンにつきましては、「HTML4.01」などがありますが、書き方を覚える必要はありません。
※大文字、小文字どちらでも問題はありません。

<!doctype html>
または
<!DOCTYPE html>

html要素について

html要素について

html要素とは、その文章がHTMLであることを宣言し、すべての要素は、htmlの中に含まれます。
HTML文書には、htmlは1つしか含まれません。
※ただし、DOCTYPE宣言だけは、「html」よりも前に記述します。

また、lang="ja"とは、日本語に対応したHTMLファイルの意味を示します。
※「en」は英語、「ko」は韓国語、「zh」は中国語になります。

<html lang="ja">

</html>

head要素について

head要素について

head要素とは、主に、「metaタグ」、「titleタグ」、「cssファイル」、「scriptファイル」などを記述します。
head〜/head中身はブラウザーには表示されません。

metaタグ
charset="utf-8"とは、ファイルで使用する文字コードを示します。
「utf-8」以外にも「Shift_JIS」、「EUC-JP」などがあります。
基本的には「utf-8」が推奨文字コードとなっています。

name="description"とは、「content」内にサイトの概要(説明)を記載します。
検索エンジンの検索結果に反映されるため、SEOにかなり重要なタグになってきます。
文字数は100字〜120文字程度が良いと言われております。

titleタグ
titleとは、ページのタイトルを表します。
ブラウザのタブに表示され、SEOにも大きな影響を与えます。
文字数は長くなっても問題はありませんが、文字数は30字〜33文字程度が良いと言われております。

titleタグの出力例
<head>
 <meta charset="UTF-8">
 <meta name="description" content="サイトの概要を記載">
 <title>サイトのタイトルが入ります</title>

 <!--CSS-->
 <link href="...css" rel="stylesheet" type="text/css">
 <!--JS-->
 <script src="...js" type="text/javascript"></script>

</head>

body要素について

body要素について

body要素とは、主に、中身は主にコンテンツ要素が入ります。
body〜/body中身はブラウザーに表示されます。

<body>

<!--この中身は表示されます-->

</body>
括弧の閉じ忘れや、スペルミスには注意しましょう!

Webページの基本構造について

Webページの基本構造について

上記で解説した、body〜/bodyの中に記述した、コードはブラウザ上で表示されます。
今回は一般的な構造について解説していきます。
主に解説するタグは、「header、main、aside、footer」の4つになります。
これはら、HTML5からレイアウトを表すタグになっております。

Webページの基本構造

header、nav、footerについて

header要素とは「ロゴ」や「サイトのメインタイトル」、「ナビゲーション(目次)」、「検索フォーム」など
関連する内容を記述できます。

nav要素とは主要なナビゲーションを示すことになります。

footer要素とは「お問い合わせ先」や「ナビゲーション(サブ)」、「コピーライト」など関連する内容を
記述できますすることができます。
詳しい解説(使い方、注意点)は下記の関連記事から

header、nav、footerについて
header、nav、footerについて

使い方、注意点をまとめております。

mainについて

mainタグとはHTML文書のメインコンテンツを示します。
mainタグは、HTML文書中に1つだけ配置ができます。
詳しい解説(使い方、注意点)は下記の関連記事から

mainについて
mainタグの正しい使い方について

使い方、注意点をまとめております。

asideについて

aside要素とは「バナー広告」や「関連記事」、「補足情報」、「サイドバーのカテゴリ一覧」など
余談・補足の情報を示します。
asideの他に、サイドバーと言ったりもします。また、サイドバーを使用しないWebサイトもあります。
詳しい解説(使い方、注意点)は下記の関連記事から

asideについて
asideタグの正しい使い方について

使い方、注意点をまとめております。

関連記事の詳細から更に「sectionタグ」の使い方、注意点についても
解説しております。

有名WordPressテーマの構造について

有名WordPressテーマの構造

5つのWordpressテーマ「THE THOR」、「AFFINGER」、「WP Avenue」、「OPENCAGE」、「JIN」の構造を調べ、簡単にPOINTをまとめてみました。

有名WordPressテーマの構造について
名WordPressテーマの構造

5つのWordpressテーマ「THE THOR」、「AFFINGER」、「WP Avenue」、「OPENCAGE」、「JIN」

まとめ

今回はこれで以上です。
今後は、よく使われる、HTMLのタグの解説をおこなっていきます。

POINT
  • DOCTYPE宣言とは、その文書のバージョンを宣言します、
    現在の、最新バージョンはHTML5になります。
  • lang="ja"とは、日本語に対応したHTMLファイルの意味を示します。
  • charset="utf-8"とは、ファイルで使用する文字コードを示します。
  • head〜/head中身はブラウザーには表示されません。
  • name="description"は、文字数は100字〜120文字程度が良いと言われております。
  • titleは、文字数は30字〜33文字程度が良いと言われております。
  • body〜/body中身はブラウザーに表示されます。
  • bodyの中には、header、main、aside、footerなどのレイアウトを表すタグが入ります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top