みなさまお疲れ様です。オオトリです。
こちらの記事はこれからHTMLを勉強してみたいまたはHTMLに興味があるんだけど、どうしたら勉強できるのか分からないという方向けの記事になっております。
HTML-レベル1を読んでいない方は先にレベル1を読んでからこちらの記事を読むことをお勧めします。
それでは前回の続きになります。
前回はhtmlファイルにhello worldを記述し、表示させるところまで進めました。
今回は文書に印をつける、つまりマークアップの作業に入ります。
エディタに下記を記述し保存してください。
ブラウザでの表示はマークアップする前と同じですが、文書がマークアップされましたので機械が文書を理解できるようになりました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ここにホームページのタイトルが入ります。</title> </head> <body> <p>hello World</p> </body> </html>
文書をマークアップする際はタグで囲みます。
タグには<開始タグ>と</終了タグ>があります。
下記にhtmlファイルの内容を一行ずつ解説していきます。
ドックタイプ宣言
| <! DOCTYPE html> |
HTMLにはいくつかのバージョンがあり、バージョンごとにそのバージョンで使用できる要素（タグ）や属性の名前と、配置のしかたを定義しています。 これはDTD（Document Type Definition）と呼ばれるもので、｢文書型の定義｣を意味します。
<! DOCTYPE html>は文書がHTML5で作成されたものであることを宣言します。ドックタイプ宣言は文書の一番始めに記述します。
htmlタグ
| <html lang=”ja”> |
htmlタグは文書がHTML文書であることを宣言します。<! DOCTYPE html>以外の要素は、<html>～</html>の中に配置します。
属性はlang（言語）を表しています、そして値はja（日本語）を表しています。
headタグ
| <head>～</head> |
ここからヘッダと呼ばれる構造が始まります。タグ内には、文書のタイトルや特徴、制作者の情報をはじめとした、文書に関する情報を記述します。
metaタグ
| <meta charset=”utf8″> |
<meta>タグはその文書に関する情報（メタ情報）を指定して、 ブラウザや検索ロボットに知らせるためのタグです。charset属性は、文書の文字エンコーディングを指定する際に使用します。使用している文字はutf8です。
titleタグ
| <title>ここにホームページのタイトルが入ります。</title> |
<title>タグはサイトのタイトルを表します。サイトのタイトルはヘッダ内に記述します。タイトルはブラウザのタイトルバーに表示されます。
headの閉じタグ
| </head> |
ヘッダの終わりを表します。タグはしっかりと / を付けて閉じます。
bodyタグ
| <body>～</body> |
ここからボディと呼ばれる構造が始まります。この部分が実際にブラウザに表示される部分です。
pタグ
| <p>hello world</p> |
<P>タグはParagraphの略で、<p>～</p>で囲まれた部分がひとつの段落であることを表します。<p>タグの中に文章hello worldが書かれています。この部分がブラウザに表示されます。
bodyの閉じタグ
| </body> |
bodyの終了を表します。しっかりとタグを閉じます。
htmlの閉じタグ
| </html> |
htmlの終了を表します。しっかりとタグを閉じます。
以上でHTML-レベル2の内容は終了になります。
今回はHTMLの基本的な構造がどのようになっているのか簡単に解説しました。
HTMLというものがどういうものなのか段々イメージがついて来たでしょうか。
はじめは覚えることが多く難しく感じるかもしれませんがすぐに慣れてきますので、HTMLを学習したいという方はあきらめずにがんばりましょう。
