CSSについて学ぶ前にHTML(HTML5)の書式をまとめておこうかと思い備忘録代わりに書いています。
結果についてはわかりやすいようにQiita上で同じようなものを表示しているだけなのでブラウザ上では少し表示が違うものもあります。
HTMLの基本書式
HTMLはタグを用いてブラウザ上に表示される文書の構造を指定することができます。
タグによって指定できる構造は異なるというわけです。
基本は開始タグと終了タグでコンテンツを囲む構造で書きます。また、これら3つをまとめて要素といいます。
実際にはそれぞれのタグは次のように書きます。
開始タグ→ <(タグ名) (属性)>
終了タグ→ </(タグ名)>
コンテンツは書式指定する中身、ブラウザに表示される部分のことです。
開始タグにはタグ名の他に属性を書くことができます。これによってタグについての追加情報を付与できます。属性にはそのタグで固有の属性とどのタグでも使えるグローバル属性があります。
属性はないこともありますが複数個あること場合もあります。タグ名と属性の間、または属性と属性の間は半角スペースで区切ります。
属性自体は (属性)="(属性値)" のような書式となっています。
ざっくり用語について書いたところで実際のコードを書いてみます。
リンクを作成できるタグ
リンク作成には<a>タグを用います。
<a href="http://qiita.com/">Quita</a>
結果
と同じようなものがブラウザ上で表示できます。
前述の構造説明を補足すると、この場合
開始タグ→<a href="http://qiita.com/">
終了タグ→</a>
コンテンツ→Quita
属性（タグ固有）→href="http://qiita.com/"
となります。
見出しタグ
一番大きな見出しである大見出し作成するタグは<h1>です。次に大きな見出し中見出しは<h2>で作成できます。それから<h3>,<h4>,<h5>,<h6>と中の数字が大きくなるにつれ小さい見出しになります。ちなみに<h6>までしかありません。
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
結果。（ブラウザ上で表示される場合は見出し1や見出し2の下線はありませんが…）
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
段落を作成するタグ
文章の段落を作成するタグは<p>です。この表示は段落と段落の間に一行の空白が空いてしまうようです。この空白を取り除く対処法はあるようですがとりあえず今回はそのままで。
<p>これは第一段落の文章です。</p>
<p>これは第二段落の文章です。</p>
<p>これは第三段落の文章です。</p>
結果
これは第一段落の文章です。
これは第二段落の文章です。
これは第三段落の文章です。
箇条書きを作るタグ
箇条書きを作るタグは<ul>と<li>です。<ul>で箇条書き全体を囲み、<li>で箇条書きの各項目を囲む形になります。
<ul>
<li>アイテム1</li>
<li>アイテム2</li>
<li>アイテム3</li>
</ul>
結果
- アイテム1
- アイテム2
- アイテム3
文字を目立たせるためのタグ
いくつかあるのでそれぞれ表記を書くと↓
ここの文字を<b>太字</b>で表示する。
結果
ここの文字を太字で表示する。
ここの文字を<i>italic</i>または<em>italic</em>で表示する。
結果
ここの文字をitalicまたはitalicで表示する。
ここの文字に<u>下線</u>を引く。\
結果
ここの文字に下線を引く。
ここの文字が<strong>重要</strong>なのを表現する。
結果
ここの文字が重要なのを表現する。
ここの文字を<mark>マーカー</mark>する。
結果
ここの文字を
マーカーする。
ここの文字に<s>取り消し線</s>と<strike>取り消し線</strike>が表示される。
結果
ここの文字に
取り消し線と取り消し線が表示される。
記事をまとめるタグ
記事全体をまとめるタグとして<article>があります。また、記事の中のセクションをまとめるタグとして<section>があります。
<article>
<h1>記事の見出し</h1>
<section>
<h2>セクション1の見出し</h2>
<p>セクション1の第一段落</p>
<p>セクション1の第二段落</p>
</section>
<section>
<h2>セクション1の見出し</h2>
<p>セクション2の第一段落</p>
</section>
</article>
結果
記事の見出し
セクション1の見出し
セクション1の第一段落
セクション1の第二段落
セクション1の見出し
セクション2の第一段落
HTML文書の一般表記について
html全体では↓のように書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="ページ概要">
<title >サンプルタイトル</title>
</head>
<body>
<article>
<h1>記事の見出し</h1>
<section>
<h2>セクション1の見出し</h2>
<p>セクション1の第一段落</p>
</section>
</article>
</body>
</html>
各要素についてひとつずつ説明していきます。
DOCTYPE宣言
<!DOCTYPE html>
この部分ではHTMLのバージョンを示しています。この場合HTML5を示しています。
使用する言語の宣言
<html lang="ja">
</html>
この部分では文書内で主に使用する言語を表記しています。この場合"ja"ですから日本語を示しています。
メタデータ
<head>
<meta charset="utf-8">
<meta name="description" content="ページ概要">
<title >サンプルタイトル</title>
</head>
この部分はHTML文書についての情報を表すメタデータについて書かれています。メタデータは<head>～</head>の中に書きます。この文書では3つのメタデータが書かれています。
<meta charset="utf-8">
→HTMLの文字コードを示しています。この場合[UTF-8」です。
<meta name="description" content="ページ概要">
→ページ概要を書くところです。
<title >サンプルタイトル</title>
→ブラウザのウィンドウのタイトルとして表示される部分を書くところです。
また、これらの<meta>要素のような開始タグのみで終了タグがない要素を空要素といいます。
ブラウザウィンドウに表示される部分
<body>
<article>
<h1>記事の見出し</h1>
<section>
<h2>セクション1の見出し</h2>
<p>セクション1の第一段落</p>
</section>
</article>
</body>
<body>～</body>の中にはブラウザのウィンドウに表示される部分を書きます。この文書では<article>を中身にしています。
（おまけ）コメントを書く
分量が多いと欲しくなってきたので...
<!-- コメント-->
<!--
複数行の場合の
コメント
-->
参考文献
書籍『いちばんよくわかるHTML５&CSS3デザインきちんと入門』
TAG index HTML&CSS Web制作リファレンス「タグの基本と使い方」
TAG index HTML&CSS Web制作リファレンス「取り消し線を引く」
TAG index HTML&CSS Web制作リファレンス「コメント宣言」
SEO Pack「HTML5とHTML4.01 正しいDOCTYPE宣言で仕様に準拠しよう」