読者です 読者をやめる 読者になる 読者になる

備忘録

自分の為の備忘録

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>
title
th1 th2 th3
td1 td2 td3
td4 td5 td6

セクション

セクション要素

  • section
  • article
  • aside
  • nav

section

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

article

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

aside

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


加筆予定