自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本構造とメタデータを学ぼうの解説になります!こんな方に読んでほしいHTMLを学び始めた方へHTMLの基本構造について学びたい方へ今回はHTMLの基本的な書き方、メタデータや内部構造についての解説になります。HTMLを学び始めた方は、コードを見た際に、「まず、何を書いたら良いのだろうか」思うことがあるとおもいます。HTMLにはルールや記述方法があり、それらを守らないとブラウザ上で反映しません。この記事では簡単に解説していきます。Webサイトの基本構造とメタデータを理解していきましょう!![記事の内容]基本構造、メタデータとはDOCTYPE宣言についてhtml要素についてhead要素についてbody要素についてWebページの基本構造についてheader、nav、footerについてmainについてasideについて有名WordPressテーマの構造についてまとめ基本構造、メタデータとはHTML文書は、DOCTYPE宣言から始まり、様々な情報やファイルを指定し、一つのホームページが生まれます。ここでは、最新のバージョンであるHTML5を学び、理解していきましょう。基本的な書き方は以下になります。charset="UTF-8"><title></title></head><body></body></html>基本構造の解説DOCTYPE宣言ドキュメントタイプを宣言しますhtml〜/htmlhtml〜/htmlの中身に要素が入ります。HTML文書において基点となります。lang=”ja”とは、日本語に対応したHTMLファイルの意味を示します。head〜/headヘッダ情報を示します。「metaタグ」、「titleタグ」、「cssファイル」、「scriptファイル」などbody〜/bodyHTML文書の本文を示します。コンテンツが入る場所になります。DOCTYPE宣言についてDOCTYPE(ドキュメントタイプ)宣言とは、その文書のバージョンを宣言する、メタ情報になります。現在の、最新バージョンはHTML5になります。どちらでも問題はありません。html>html要素についてhtml要素とは、その文章がHTMLであることを宣言し、すべての要素は、htmlの中に含まれます。HTML文書には、htmlは1つしか含まれません。※ただし、DOCTYPE宣言だけは、「html」よりも前に記述します。lang="ja"とは、日本語に対応したHTMLファイルの意味を示します。※「en」は英語、「ko」は韓国語、「zh」は中国語になります。lang="ja"></html>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文字程度が良いと言われております。type="text/javascript"></script></head>body要素についてbody要素とは、主に、中身は主にコンテンツ要素が入ります。body〜/bodyの中身はブラウザーに表示されます。<body><!--この中身は表示されます--></body>括弧の閉じ忘れや、スペルミスには注意しましょう!Webページの基本構造について上記で解説した、body〜/bodyの中に記述した、コードはブラウザ上で表示されます。今回は一般的な構造について解説していきます。解説するタグは、「header、main、aside、footer」の4つになります。これはら、HTML5からレイアウトを表すタグになっております。header、nav、footerについてheader要素とは「ロゴ」や「サイトのメインタイトル」、「ナビゲーション(目次)」、「検索フォーム」など関連する内容を記述できます。nav要素とは主要なナビゲーションを示すことになります。footer要素とは「お問い合わせ先」や「ナビゲーション(サブ)」、「コピーライト」など関連する内容を記述できますすることができます。詳しい解説(使い方、注意点)は下記の関連記事からheader、nav、footerについてheader・nav・footer要素の正しい使い方を分かりやすく解説!使い方、注意点をまとめております。mainについてmainタグとはHTML文書のメインコンテンツを示します。mainタグは、HTML文書中に1つだけ配置ができます。詳しい解説(使い方、注意点)は下記の関連記事からmainについて【HTML】mainタグの正しい使い方を分かりやすく解説!使い方、注意点をまとめております。サイドバーのカテゴリ一覧」など余談・補足の情報を示します。asideの他に、サイドバーと言ったりもします。サイドバーを使用しないWebサイトもあります。詳しい解説(使い方、注意点)は下記の関連記事からasideについて【HTML】aside要素の正しい使い方を分かりやすく解説!使い方、注意点をまとめております。関連記事の詳細から更に「sectionタグ」の使い方、注意点についても解説しております。Avenue」、「OPENCAGE」、「JIN」の構造を調べ、簡単にPOINTをまとめてみました。Avenue」、「OPENCAGE」、「JIN」まとめ今回はこれで以上です。今後は、よく使われる、HTMLのタグの解説をおこなっていきます。現在の、最新バージョンはHTML5になります。lang="ja"とは、日本語に対応したHTMLファイルの意味を示します。charset="utf-8"とは、ファイルで使用する文字コードを示します。head〜/headの中身はブラウザーには表示されません。name="description"は、文字数は100字〜120文字程度が良いと言われております。titleは、文字数は30字〜33文字程度が良いと言われております。body〜/bodyの中身はブラウザーに表示されます。bodyの中には、header、main、aside、footerなどのレイアウトを表すタグが入ります。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。