One Step
Takeshi Blog

【入門】HTMLの基本構造について

html structure

勉強方法を考える

HTMLを書く上で絶対に必要な要素をご紹介します!

うん?要素・・・とは??

要素とは「<p>文章</p>」や「<h>題名</h>」のようにタグ<h>で囲んだ物をです。

ちなみに、<p>とか<h>の’p’や’h’にも意味があり、Pragraph(段落)の頭文字の'p'だったり、header(題)の頭文字の'h'で作られています。

とういう事は?!文字を太くしたいなと思えば、英語でいうとboldだから、<b>になるのではって、予想が出来たり?!

と言っても、英語でなんてわからないよって最初は思うかもしれませんが、よく使うようになってくれば、自然と覚えていくもんですので、今は、タグは英語で出来ているんだって思う程度で大丈夫です!

基本構造を知る

この下の図がHTMLを書く上で、絶対になくなることのない要素になります。

HTML structure

まず最初に、お使いのエディタに、これはHTMLについて書いてますよって宣言をしてあげます。それをDocumentType宣言といい、<!doctype html>を書きます。こうすることで、パソコンがこのファイルは、HTMLについて書いてあるファイルであると認識してくれるようになります。

次に、<html lang=ja></html>で囲み、<head></head>要素と<body></body>要素をそれぞれ入れ子にします。lang=jaは、language = japaneseの略で、このHTMLの文章に使っている文字は、日本語です。と表すためのコードなので、これも一緒に覚えておきましょう!

head要素内には、このファイルの情報を書き込んで行きます。例えば、外部リンクしているCSSやJavascriptなどのファイルの位置情報だったり、検索エンジンにヒットさせるためのキーワードだったりと、普段みなさんがみているサイトには表示されない必要情報を書く所になります!!そして、body要素内には、皆さんが見ているサイトを作るためのコードを書いていくスペースになります。

bodyの基本構造について

body structure map

bodyの中身は大きく分けて、headermainfooterの3つに分かれます。headerはロゴやブログタイトルとメインメニューバー(ナビゲーション)が入り、mainには記事の内容などが入り、footerには、ナビゲーションや、利用規約やポリシーなどが入ります。考え方として、それぞれの役割ごとにボックスを用意して、大きな箱に入れていく感じをイメージしてもらえればいいと思います。

mainの中も大きく分けて、articleasideに分かれます。articleの中には、sectionが入りますが、articleは絶対に使わなければ行けないというわけでは、ないですが、articlesectionの使い分けとして、articleはそれのみで意味をなす記事になり、sectionは、一つのまとまりであるけれど、それ一つでは、独立出来ない物を言います。そして、asideは、記事やコンテンツなどから切り離して、関係のないもので、サブナビゲーションや、広告等に当たります。

最後にfooterですが、headerと対になるもので、ナビゲーションやコピーライトなどが入ることが一般的に多いかと思います。簡単な会社情報や、自己PR的なものを入れる場合もあります。

こちらの記事もどうぞ!!