HTML+CSS munehiro

HTMLとは？HTML5の基本構成とは

たぶんこの記事を読まれる方はこれからWEBサイトを作ってみたいと思う方ではないでしょうか。

それくらいHTMLというのはWEBサイトにおいて基本中の基本だということです。

そのHTMLの基礎と、学ぶにあたりどこから手をつけるかについて説明します。

HTMLとは

HTMLはHyper Text Markup Language(ハイパー テキスト マークアップ ランゲージ)の略です。

ハイパー テキストとかちょっと厨二病っぽいネーミングですが、出来ることはすごいです。

HTMLというプログラミング言語は<html> </html> のようなタグと言われるものを活用し、WEBサイトの骨組みを作っていきます。

それをGoogle chrome などのWEBブラウザで表示すると定義した通りの画面を表示出来るということです。

 

ちなみに、WEBサイトを開くときにURLの頭は http://～で始まります。

これは「HTTP通信をしますよ」ということを示しています。

HTTPとは、Hypertext Transfer Protocol（ハイパーテキスト トランスファー プロトコル）の略です。

Transferは転送という意味で、Protocolは通信手段のことです。

つまり、Hypertextを転送する為の通信手段ということになります。

HTTPで通信する内容は、HTMLというプログラミング言語で書かれたプログラムコードだということです。

HTMLの基本構成

すごくざっくりですが、これがHTMLの基本中の基本構造です。

 

まず、全体を <html> と </html> で囲みます。これでHTMLだということを定義するのです。

 

<head> ～ </head> 部分は、画面には表示されないがどういうページなのかという情報を定義します。

ここに <title>ページのタイトル</title> のようにページのタイトルを追加したり、<meta charset=”UTF-8“> のように文字コードを定義したりします。

 

<body> ～ </body> 部分は、実際にWEBブラウザで表示される部分になります。

ここに様々なHTMLタグを用いて画像や文字を入れてWEBページを作成していきます。

 

上のコードをコピーしてメモ帳などのエキストエディタでに貼り付け、拡張子をhtmlにして保存し、ダブルクリックで開くとお使いのWEBブラウザで表示することが出来ます。

拡張子の表示方法はこちらから

 

しかし、上記で書かれたコードはあくまでHTMLの基本で、現在ではHTML5が標準になっているので、次にHTML5の基本構造を説明します。

HTML5の基本構成

HTML5の基本構成はこんな感じです。
書き出しを上記のようにすることでHTML5だということを宣言します。

<head> ～ </head> 部分はそれほど変更はありません。

 

HTML5にはBodyタグ内に記載するタグが大幅に増えました。

それぞれ役割を持っており、Googleなどのクローラーがまわってきたときにどういうページかを認識しやすくする為のタグです。

正直僕は全てを把握していません。というか全てを把握して使いこなせるような量ではありません。

 

<header>要素は、ページのヘッダ部分のことです。

<article>タグの中に書くと、コンテンツヘッダとしての役割になります。

<nav>要素は、サイト全体のナビゲーションを行う要素です。

グローバルメニューとかヘッダメニューとか色んな呼ばれ方をしますが、メニューのことです。

<header>要素内に書いても問題ありません。

<main>要素は、ページのメインコンテンツ部分はどこになるのかを表します。

<footer>要素は、ページのフッター部分のことです。

ここにメニューを追加しても良いですし、カテゴリー一覧を表示したり、SNSボタンを入れたりします。

<article>タグの中に書くと、コンテンツのフッター部分になります。

<article>要素は、ブログの記事ページなどで使われます。

 

他にもまだまだありますが、基本構成ということで一般的なものをご紹介しました。

他の人のサイトのHTMLを見てみる

HTMLはSEOのうち、技術的な部分に大きく関わってきます。

とは言っても、<header>や<article>を使わなかったからと言って突然上位表示されなくなるようなことは無いと思います。

（はっきりしたことはGoogleが公表していないので誰も分かりません）

 

しかし、やっぱりちょっとでも上位表示させたいと思う人も多いでしょうし、プログラマーならば正しくマークアップしてお客様に納品したいと思うはずです。

「あなたにWEBサイトを作ってもらうと上位表示されやすくなりました！」とか言われたら他と大きく差別化できます。

 

ではどうすればきれいにHTMLタグを使えるのでしょうか。

僕が思う一番良い勉強方法は、他人のサイトをのぞき見ることです。

例えばライバルの強そうなキーワードで検索します。日本だと車産業がすごいから「自動車 燃費」とかで検索します。

そして検索結果の上位3サイトを開きます。GoogleやYouTube、Facebookなどのポータルサイトや、国土交通省などの国や地方自治体などのサイトは参考にならないので省きます。

そして、ページを開いている上体で「右クリック」→「ページのソースを表示」をクリックします。

これでそのページのHTMLやCSS、JavaScriptを見ることが出来ます。

コピーすると著作権違反になるので、勉強の対象として見てください。

ソースを見る方法は「Ctrl＋U」でも出来ます。

 

まだ勉強を始めて間もない頃はまだまだ分からないと思いますが、後々はこういう方法で勉強も出来ると覚えておいてください。

1から書かなくても無料テンプレートを活用できる

僕はWEBデザイナーでは無いのであまりHTMLを書きません。

とは言っても書くこともありますのでしっかり勉強して基礎は把握していますし、1から作り上げることも出来ます。

 

しかし、今は1から作り上げなくても「HTML テンプレート」などで検索するとHTMLがある程度出来上がったページを無料でダウンロードして使うことが出来ます。

勉強するにはこういったものを活用するのも良いです。

きれいなデザインのものが欲しければ、有料で購入すれば比較的安くしっかりしたものも手に入ります。

 

WordPressを使う場合ならばなおさらHTMLを意識することは少なくなりますし、1から作成することはほぼ無いでしょう。

しかし、HTMLやCSSをいじってより良いページを作成するためにHTMLを勉強しておく必要があります。

まとめ

HTMLはWEBブラウザでWEBサイトを開いたときにページを構築するためのプログラム言語。

現在はHTML5が標準となっているため、1から書く場合にはHTML5の定義をして書き始める。

他の人の綺麗なサイトを見て綺麗なコーディング方法を勉強する。

これでHTMLはだいたい出来るようになります。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


RECOMMENDこちらの記事も人気です。