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名を指定。

テーブル

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>

title
th1	th2	th3
td1	td2	td3
td4	td5	td6

セクション

セクション要素

section
article
aside
nav

section

名前の通り。セクション分けしたい際に利用。
あくまで文章構造を示したい際に利用するものであって、デザイン的な指定をしたいのならば基本通りdivで囲う。あくまで汎用的なものであり、他のタグで適切なものがある場合(記事ではarticleのように)それを使う。

article

記事をこのタグで囲む。例えばこのエントリのようなブログの記事を囲うのに使う。

aside

本文やその記事とは関係のない補助的な内容を記述するのに囲む。

加筆予定

備忘録

自分の為の備忘録

HTML学習備忘録・基本