HTML はじめの一歩
はじめの一歩
はじめの一歩はウェブブラウザに文字を表示してみます。
HTML ソースは以下のとおりです。
HTML
の簡素なサンプルです。
<!DOCTYPE html> <meta charset="utf-8"/> <title>文書のタイトル</title> サンプルテキスト
ローカルでちょっと HTML を書いて眺めるだけなら、
!DOCTYPE や meta タグや title タグなどはなくても構いません。
meta charset="utf-8" の行はテキストが文字化けするときに付けてください。
HTML ひな形
ソースの説明
- <!DOCTYPE html> で HTML の文書であることを宣言しています。
- <meta...> や <title> など括弧
<...> で囲まれた文字列を
タグ (tag) と言います。
HTML の用語 - タグ、要素など - <meta charset="utf-8"/>
でこの HTML の文字コードが utf-8 であることを示しています。
2000年代まで HTML の文字コードとしてシフトJIS (Shift_JIS) が使われることも多かったのですが、現在 (2020年代) では使用しません。 - <title>文書のタイトル</title> は、
ブラウザのタブの見出しやブックマークの名前に反映されます。
title タグは <meta charset="utf-8"/> よりも後に入れてください。charset 指定よりも前に title があり、日本語でタイトル名をつけると、 文字コードを認識できないトラブルの原因になることがあります。
title タグの内容がブックマークの名前になります。
もうちょっと無難な HTML にしてみる
上のサンプルでは HTML でよく出てくる html タグや body タグがありません。 ローカルで HTML をちょっと試し書きする場合はこれでも構いませんが、 実際的ではないのでもう少し体裁を整えてみます。 html タグ、head タグ、body タグ を追加します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <title>文書のタイトル</title> </head> <body> サンプルテキスト </body> </html>
ソースの説明
- <!DOCTYPE html> 以外のテキストを
<html> ～ </html> で囲みます。
<html> は htmlタグの開始を表し、</html> は
html タグの終了を表します。
MDN: HTML 文書 / ルート要素 - <head> ～ </head> の間には
ブラウザには表示されない付属の情報を入れます。
文字コード指定や文書のタイトルの他、
CSS や JavaScript などを入れます。
MDN: head: 文書メタデータ (ヘッダー) 要素 - <body> ～ </body> の間に文章や画像など
ブラウザに表示されるコンテンツを記述します。
MDN: body: 文書の本文要素 - html タグに lang="ja" を入れてあります。
lang 属性は文書の言語 (文字コードとは別) に関する設定で、 ja で日本語の文書であることを示しています。 lang もつけた方が無難です。
(参考) lang="ja" がないと Chrome で「翻訳しますか？」のポップアップが出ることがあります。
スマートフォン、タブレットにも対応させる
上のサンプルをそのままスマートフォンで表示させると 問題が起こります。文字がとても小さな表示になります。
そこで、スマートフォンやタブレットでも 普通に表示されるようにするため、 以下のような meta name="viewport" ... のおまじないを追加します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> </head> <body> サンプルテキスト </body> </html>TestJS_edit_intro01.html
文章を入れてみる
<body> ～ </body> の間に見出しや文章を入れてみます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>文書のタイトル</title> </head> <body> <h1>こんにちは Hello World</h1> <p> サンプル文章。リチャード・トレビシックが1804年に鉄製レール上を 走る蒸気機関車の走行に成功した。しかし、この頃は馬車鉄道用の もろい鋳鉄レールを使用していたため本格的な実用化までには至らな かった。 その後、ナポレオン戦争による軍馬の需要の増加で馬の価格が高騰し、 運搬の代替手段としてレールと蒸気機関車を用いた鉄道の研究が一段と 進んだ。 </p> あいうえおかきくけ10さしすてそたちつて20なにぬねのはひふへ30まみむめもやいゆえ40らりるれろわいうえ50<br/> 記号文字：■□●◎○△▲▽▼<br/> </body> </html>
- h1 タグ は見出しを表すタグです。
- p タグ は段落（paragraph:パラグラフ）を表すタグです。
- br タグ は改行を表すタグです。
次に スタイルシート (CSS : Cascading Style Sheets) を使って文書を装飾していきます。
CSS はじめの一歩 (1) に続く。