初めてのHTML！最初に書くこと学ぶこと！

DOCTYPE宣言とは？

DOCTYPE宣言とは、文書の仕様をブラウザに伝えるために必要な宣言文のことです。
「これから書くのはHTMLという文章でバージョンは4.01で識別子はこれで云々」と宣言してブラウザに読み込ませるという仕組みです。
※DOCTYPE DTD(Document Type Difinition　文書の定義)を宣言するための記述

HTML4.01には3つのDOCTYPEがあります。

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

	<!DOCTYPE html>

headタグ

HTML5になって始まりの呪文が短く覚えやすくなりました。次に待ち受けていた挫折ポイントがheadタグでした。

今見てもらっているマークアップブログのHTMLは以下になります。

html

	<!doctype html>
	<html>
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
	<meta charset="utf-8">
	<title>マークアップブログ｜初心者マークアップエンジニアの覚え書き</title>
	<meta name="description" content="初心者マークアップエンジニアによる初心者マークアップエンジニアのためのメモブログです。">
	<meta name="keywords" content="html,css,JavaScript,コーディング,マークアップ">
	<meta property="og:title" content="マークアップブログ｜初心者マークアップエンジニアの覚え書き">
	<meta property="og:description" content="初心者マークアップエンジニアによる初心者マークアップエンジニアのためのメモブログです。">
	<meta property="og:type" content="website">
	<meta property="og:url" content="http://markup.webcrew.co.jp/">
	<meta property="og:site_name" content="マークアップブログ｜初心者マークアップエンジニアの覚え書き">
	<meta property="og:image" content="http://img.phoenix.webcrew.co.jp/91041/images/ogp.gif">
	<meta name="twitter:card" content="summary">
	<meta name="twitter:description" content="初心者マークアップエンジニアによる初心者マークアップエンジニアのためのメモブログです。">
	<!--　-->

	<link rel="stylesheet" type="text/css" href="/css/reset_pc.css" media="all">
	<link rel="stylesheet" type="text/css" href="/css/common_pc.css" media="all">
	<link rel="stylesheet" type="text/css" href="/css/top_pc.css" media="all">
	<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="/js/common.js"></script>
	<script type="text/javascript" src="/js/scrollTop.js"></script>
	<!--[if lt IE 9]><script src="/js/html5shiv-printshiv.js"></script><![endif]-->
	<script type="text/javascript" src="/js/jquery.sidr.min.js"></script>
	<script type="text/javascript" src="/js/paginator.js"></script>

headタグ内にmeta、link、scriptがズラッと並んでいます。これを見た瞬間挫折しかけましたが、headタグ内でとりあえず最初に覚える必要があるのは以下の４行目と５行目の２つだけです。

html

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>タイトル</title>
	</head>

４行目meta charsetは文字のエンコーディングを指定する時に使用しています。
日本語では"utf-8"、"shift_jis"、"euc-jp"などがあげられますが、主に使用されているのは"utf-8"です。
ちなみにHTML4.01では３倍近いもっと長い記述が必要でした。

５行目のtitleタグで挟んだワードは検索エンジンで表示されるタイトルやブラウザのタブに表示されます。

長くなりましたが、とりあえずさっきの６行だけ書けばHTMLの本体部分の記述に入ることができます。

ちなみにプロのWebデサイナー達にとても人気のあるDreamweaverというAdobe製のWebサイト構築ソフトを使うと…。

	DreamWeaverを開いて
	HTMLの作成を選ぶと
	自動的に表示されます。

HTML5になって宣言文や文字エンコーディングが短くなったうえ、Dreamweaverを使うと簡単に作成できるので、これからHTMLを学びたいという人は形から入ってみるのもいいかもしれません！