header: ヘッダー(必須ではない)
footer: フッター
main: メイン部分、ヘッダーフッター以外の部分
nav: 所謂メインメニュー。uiを囲むように配置するのが一般的
基本的に一つのページに一つしか表示しない
ul: リスト表示
li: リストの中身
h1~h6: 見出し。数字が小さい方が重要度が高い
p: 文章、段落
br: 改行
img: 画像を表示
a: リンク
div: 装飾用のブロック
article: そのページの核となるようなブロック
このブロックだけで一ページ成立するようなブロック
section: 章分け。articleより小さい分類
aside: 副次的なコンテンツ。広告など。
cssとは：装飾のための言語(HTMLは主に意味づけ)
インライン・styleタグ・別ファイル
基本的にCSSフォルダの中にCSSファイルを作る
パス/ディレクトリという概念
HTMLの要素は実は箱っぽい
セレクタには色々な指定方法がある
クラス、id
ボックスモデル(margin padding borderの関係)
CSSの優先順位
cssを書く方法は、三つある
・styleの要素内に書く
・cssファイルを作成して書く
・styleタグに書く
インライン>styleタグ>cssファイル
結論:cssファイルは、外部ファイルでの記載にする
cssは、一番下のものが優先的に適用される
クラス
<タグ class="任意のクラス名">
・アルファベットのみを使う
・ローマ字表示は避ける
・スペースは使わない(別の意味になってしまう)
・単語は「」や「-」でつなぐ
id
<タグ id="任意のid名">
・基本クラスと一緒
・同じ名前のidはページ内に存在してはいけない
padding
paddingは、箱の中(border)に隙間
・padding:全方向px;
・padding:上下px 左右px;
・padding:上px 左右px 下px;
・padding:上px 右px 下px 左px;
marginは、箱の外(border)の隙間
検証ツールの見方
mac command+option+i
win Ctrl+Alt+i
なぜhtmlで意味を示すのか
機械が理解しやすいようにする為
なぜ機械に理解させるのか
検索エンジンなどで上位に表示される。または検索ワードとの関連性の高さなども示せる。
アクセシビリティ
アクセシビリティとは？
例えば、視覚に障害がある人は、webサイトの文章を読み上げるツールを使っています。適切にhtmlで意味づけをする(マークアップをする)ことで、これらのツールがより解析しやすくなり、わかりやすい形で読み上げを行うことができます。
あとは、開発者側も意味が理解しやすいので、読みやすい・管理がしやすいことや、将来htmlの仕様が変化した時にも、修正がしやすくなる可能性があることなどがあげられる。