※注意

従来の「HTML」と、「HTML5」では、記述方法が異なる。以下はHTML５のもの。

タグの記述方法で迷ったら、リファレンスを読む↓
HTMLクイックリファレンス

基本的な構造

sample.html

<!DOCTYPE html>
<html　lang="ja">
<!-ページの設定をするところ->
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<!-ファビコンのアイコン->
<link rel="shortcut icon" href="favicon.ico">
<!-CSSファイルの読み込み->
<link rel="stylesheet" href="CSSファイルのURL">
</head>

<!-ページの中身->
<body>

<!-ヘッダー->
<header>
     <div class="header-logo">ロゴ</div>
     <ul class="header-list">
        <li>メニュー１</li>
        <li>メニュー２</li>
     </ul>
</header>

<!-メインコンテンツ->
<article>

<div class="contents-item">
<!-コンテンツアイテム->

</div>
</article>

<!-フッター->
<footer>
      <div class="footer-logo">ロゴ</div>
      <div class="footer-list">
        <ul>
          <li>メニュー１</li>
          <li>メニュー２</li>
        </ul>
      </div>
</footer>

</body>
</html>

header

ヘッダータグ

footer

フッタータグ

main

メインコンテンツに使うタグ。１回のみ。

article

コンテンツとして独立しているものをくくりたいときに使用する.
ex)会社概要、記事

section

コンテツの中の、ある意味のあるかたまり。基本的にsectionの中にはh1が入る
ex)コンテンツ見出し、コンテンツタイトル

※article>section
例：会社概要>歴史・役員

div

レイアウト目的、くくる必要があるときに使う

マークアップ

p: 段落
hr: 水平線
pre: 改行や字下げを保持
blockquote: 引用

リスト系のタグ~ ol､ul､li､dl､dt､dd ~

ol (ordered list) or ul (unordered list)
li (list item)

dl (定義リスト: definition list)
dt (定義見出し：　definition term)
dd (定義の中身　：definition description)

strong, br, span

strong: 重要（太字）
br：　改行
span：　styleを当てる'

aタグ

ページ内リンクのやり方
<a href ="URL"></a>

form

sample-form.html

<form action="//www-creators.com/rsc/receiver.php" method="post">
  <label class="label" for="name">名前</label>
  <input id="name" type="text" name="name">
  <label class="label" for="e-mail">メール</label>
  <input id="e-mail" type="email" name="email">
  <label class="label" for="message">本文</label>
  <textarea rows="4" id="message" placeholder="ご意見をお寄せ下さい。" name="comment"></textarea>
  <label><input type="checkbox" name="magazine" checked>メルマガを希望する</label>
  <input type="submit">
</form>

formタグ

<form action="mail.php" method="post"> ～ </form>

action: どこに送るか？
method: get / post""

inputタグ

<input type="email" name="email">

size：　横幅
maxlength：　最大文字数
value：　入力欄に何を入れるか
placeholder：　うっすら文字を透けさせる
password：　文字を黒塗り

textarea,buttonタグ
textarea：　テキストエリア
button: ボタン
disabled：　使えなくする（javascript）
input type="submit"　＝サブミットボタン

checkbox,radio,ladioタグ
checkboxタグ: 複数の選択肢から複数選んで良い
属性　'checked': 最初にチェックしてあるもの
radioタグ: 複数の選択肢があるのですが 1 つだけ選ばせたい
labelタグ: 囲んだ範囲を選択可能に

type属性
type="email"=@~がないとエラー
type="number"=数値じゃないとエラー
type="date"=日程じゃないとエラー
required＝入力必須
novalidate＝なくても平気

table

table.html

<table border="1">
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<td>データ3-1</td>
<td>データ3-2</td>
<td>データ3-3</td>
</tr>
</table>

inline/ block

inline→改行される要素（p,h1...）
block→改行されず、横並びに続く要素（span,a...）

＊重要＊
インライン要素の内側にブロック要素を置くことはできない

誤

だめだよ。

正

おっけーだよ。

seo対策

htmlの記述がSEOに関係する。
googleさんが「こう書くとSEOの評価高いよ」っていうのを教えてくれているので、参考に↓
検索エンジン最適化（SEO）スターターガイド

【HTML】学習メモ（article/section/div/a/list/form/inline/block/SEO）

※注意