【HTML】学習メモ（article/section/div/a/list/form/inline/block/SEO）
※注意
従来の「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
<!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>
ヘッダータグ
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="//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 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
<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→改行される要素（p,h1...）
block→改行されず、横並びに続く要素（span,a...）
＊重要＊
インライン要素の内側にブロック要素を置くことはできない
誤 だめだよ。
正
おっけーだよ。
seo対策
htmlの記述がSEOに関係する。
googleさんが「こう書くとSEOの評価高いよ」っていうのを教えてくれているので、参考に↓
検索エンジン最適化（SEO）スターター ガイド
Author And Source
この問題について(【HTML】学習メモ（article/section/div/a/list/form/inline/block/SEO）), 我々は、より多くの情報をここで見つけました https://qiita.com/tomo0314/items/191faa4cc12bf13a3fc6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .