作:てつ
ハイパーテキストマークアップ言語です。 ウェブページのコンテンツの記述を担い、安全な言語です。
*埋め込みによる危険性等を除く
マークアップ(記号の付加)をするための、 <と>に囲まれたものです。 <main>等々、用途や意味が定められています。
<
>
<main>
タグによって作成されるものを要素といいます。
タグは通常、開始タグと終了タグで囲むことで、中の要素がそのタグであることを示します。
<html> <p>文章</p> </html>
文章はpタグであり、htmlタグも付与されている。
文章
タグは大文字でも小文字でも許容されています。(HTMLでは) 現在は小文字で書くことが一般的です。(XHTMLの登場等で) なお、古いシステムではすべて大文字であることが一般的でした。 node.jsのフレームワークを触っていると、先頭のみ大文字という場合も見かけるでしょう。 これはJavaScriptの命名規則でコンポーネントはアッパーキャメルケースUpperCamelCaseが採用されているためです。 いろいろややこしいですが、現代では小文字を使っておけば間違えはないです。
UpperCamelCase
<html> このタグの中がHTMLであることを示しています。
<html>
これはページのヘッダーではなく、機械的に処理されるヘッドです。 ページタイトルであったり、そのページのキーワードであったりを示します。
metaタグは記法が特殊です。 <meta charset="UTF-8">や <meta name="author" content="tetsu"> のように使います。終了タグは必要ありません。 終了タグが必要ない要素をvoid要素といいます。
<meta charset="UTF-8">
<meta name="author" content="tetsu">
主にはcssの場所の指定や、アイコンの場所の指定に使います。
<link rel="stylesheet" href="style.css"> <link ref="shortcut icon" href="minerva-juppiter.svg" type="image/png">
<title> title </title>
この要素がページとしてユーザーに表示されるものです。 この中にヘッダーやフッターや本文があります。
おわかりのように、これがページのヘッダーの部分の文字列などを定義するタグです。 このあたりは、別にpで書いて上の方に持っていけば最悪ヘッダーっぽく見えますが、まともな書き方を心がけましょう。 また、footerにも言えますが、各要素の中のヘッダーとフッターを用意するということもありえます。 例えば、カードのヘッダーとフッターが欲しい場合もありますよね。そういう場合もこのタグを使います。
いよいよページメインの要素つまり、ページの中身です。
ひとまとまりの意味を持つ文章をまとめたものがこのarticleです。 使っている人が少ない印象がありますが、積極的に使いましょう。
みんな大好き<div>です。 Node.jsを見ていても非常に積極的に用いられています。 div自体に__意味はない__です。 複数の要素にスタイルを適応するために用いられていることが多いです。 クローラー達が意味を読み取ることが難しくなるので、やむを得ない場合を除き、使わないべきです。
<div>
<body class="vsc-initialized"> <!-- ▼ラッパー▼ --> <div id="wrapper"> <!-- ▼▼ヘッダー▼▼ --> <div id="header"> <div id="title"> <div id="title_front"> </div> <div class="simply-scroll simply-scroll-container"><div class="simply-scroll-clip"><ul id="scroller" class="simply-scroll-list" style="width: 9000px;"> </div> <div id="navi"> </div> </div> <!-- ▲▲ヘッダー▲▲ --> <!-- ▼▼インフォメーション▼▼ --> <div id="info"> </div> <!-- ▲▲インフォメーション▲▲ -->
HTMLを使いこなして、よきウェブページを書きましょう。