schooターミナルwebデザイナー１
schooターミナルwebデザイナー１
【HTML入門 -文書構造を形作る】
・HTMLとは？
・エディターの話
Brackets
Coda
SublimeText
の参考リンク↓
新人Webデザイナー／開発者も知っておきたい：Web制作に使えるエディターAtom、Brackets、Coda、Sublime Textの現状まとめ - ＠IT
・HTMLとは？
DOCTYPE宣言
学習したの記述はこちら↓
<!DOCTYPE html>
<html>
<head>
<title>これはHTML文書です</title>
</head>
<body>
<header>
<h1>これはhtml入門</h1>
<p>初心者向けのhtml講座です</p>
</header>
<article>
<h2>本文見出し</h2>
<section>
<h3>章の見出し</h3>
<p>ここが章の文章です。</p>
</section>
</article>
</body>
</html>
<header></header>ヘッダーは本でいうところの表紙
<article></article>アーティクルは本でいうところの本文
<h2></h2>本文のタイトル <h1>以外なら<h2>でも<h3>でも順番は関係ない
<section></section>小説で例えると １章 ２章などの部分
<article>を使わなくても大丈夫だが、使わない場合は本文がないとなる
ネスト構造→正しい入れ子構造のこと
インデントをつけると分かり易いのでつける
（階層を意識してインデントする）
<!DOCTYPE html>ドックタイプ宣言
ブラウザなどにHTML５だと明示するための記述
<head>タグ５回目の授業で詳しく学ぶ
<body>本に例えると分かり易い
header 表紙
h1 大見出し
p 段落 header内のpは大見出しを補足する役割を果たす
h1の次に来るpタグは検索エンジンにかなり重要視される
nav 目次
ul リストタグ 目次は箇条書きなので、リストタグを使用すると検索エンジンに目的が伝え易い（必須ではない）
main メインコンテンツ（本文のまとまり）なかにはarticleなどが入る
article 本文、記事
section 章、節、項など文章の塊につかう sectionは入れ子にできる
aside 本文を補足するコンテンツ 本でいうところの注釈や索引
footer 奥付（本の一番最後の出版年月日や出版社などが書いてある部分）
webサイトでは、コピーライトの部分など、smallやaddressタグが入る
セクショニング構造
ヘッダーの中には見出しがあるなど
正しい構造で記述する
エラーの内文書を作成していこう
W3Cのバリデーション（エラーチェック）を行うとよい
World Wide Web Consortium / Keio Host
<section>の中に<article>が入っていてもよい（逆もよい）
<article>と<section>の違いがわからない
【リファレンス】article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す http://momdo.github.io/html5/sections.html#the-article-element
<div>は使わないのか？
弁当箱の仕切りのような存在、css見た目を整える為にどうしても必要になったら使用する
IE8などの古いブラウザーでは、HTML５のタグは表示されないが
GoogleがIEのためにつくったjavascriptがあるのでそれを導入するなどの方法がある
