HTML学習備忘録・基本
HTMLがまったくわからないので勉強する。
ひとまず備忘録として学んだ事を記事にしようと思う。
当然HTML5。
参考にしたサイト
文書の土台
文書型宣言
DOCTYPE宣言とも。
<!DOCTYPE html>
と最初に書けばよい。
文字
言語コード
日本語のページならば
<html lang="ja"> foobar </html>
のようにhtmlタグに、何の自然言語で書かれているか記述する。
文字エンコーディング
UTF-8が基本。
SHIFT-JISは死ね。
headタグの間に
<meta charset="UTF-8">
を記述。
タイトル
titleタグで囲むだけ。
当然文字エンコーディング指定の後に書くべきだろう。
IE対応等
考えたくない
たとえば
<!--[if lt IE 9]> hoge <![endif]-->
のように書けばブラウザがIE9の時だけhogeが実行される。
後は適当にやる。
コメント
<!-- comment -->
テンプレート的な土台
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> </body> </html>
初歩的タグ
見出し
h1 ~ h6 タグで囲む。
数字が小さいほうから大雑把に。
SEOでも重視されるのできちんと書くべき。
改行
brタグを利用。
段落
pタグを利用。
paragraphの略らしい。
範囲指定
- インライン要素 -> spanタグ
- ブロック要素 -> divタグ
イメージ
imgタグを利用。
主な属性
- src="ソース"
- width="幅"
- heigh="高さ"
- alt="代替テキスト"
例
<img src="image/testimage.png" alt="これは代替のテキストです" width="100" height="100">
リンク
aタグを利用。
主な属性
- href="URL"
- title="タイトル"
例
<a href="https://www.google.co.jp/" title="ぐーぐる">
ページの中の特定の箇所へのリンクはhref属性に#id名を指定。
リスト
- ul(Unordered List) 番号無しリスト
- ol(Ordered List) 番号付きリスト
- dl(Description List) 記述リスト
ul 番号無しリスト
ulタグの中にliタグを入れるだけ。
例
<ul> <li>リスト</li> <li>リスト</li> <li>リスト</li> </ul>
ol 番号付きリスト
ulに同じ。
主な属性
- start 付けると開始番号を指定できる
- reversed 番号が逆順に
- value liタグに付けると途中でカウントを変更できる
dl 記述リスト
dlタグの中にdtタグで定義する用語の記述、ddタグでその説明を書く。
正直いまいちよくわからない。
テーブル
tableタグで囲った範囲がテーブルに。更にその中でtrタグで囲った部分が一行となる。
実際の中身はthタグ囲んだ部分が見出し、tdタグで囲んだ部分が実際のデータになる。
captionタグでタイトルを設定。
<table> <caption>title</caption> <tr> <th>th1</th> <th>th2</th> <th>th3</th> </tr> <tr> <td>td1</td> <td>td2</td> <td>td3</td> </tr> <tr> <td>td4</td> <td>td5</td> <td>td6</td> </tr> </table>
th1 | th2 | th3 |
---|---|---|
td1 | td2 | td3 |
td4 | td5 | td6 |
セクション
セクション要素
- section
- article
- aside
- nav
section
名前の通り。セクション分けしたい際に利用。
あくまで文章構造を示したい際に利用するものであって、デザイン的な指定をしたいのならば基本通りdivで囲う。
あくまで汎用的なものであり、他のタグで適切なものがある場合(記事ではarticleのように)それを使う。
article
記事をこのタグで囲む。例えばこのエントリのようなブログの記事を囲うのに使う。
aside
本文やその記事とは関係のない補助的な内容を記述するのに囲む。
加筆予定