基本構造
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
</body>
</html>
メタデータ部 表示されない部分
・ファイルの文字コード
文字に対して番号が割り振られており、
異なる文字コードでファイルを開くと文字化けが発生する。
HTML、CSSでサイトを作る際はUTE-8で作る決まりになっている。
・Webページタイトル
・CSSファイルのリンク
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
コンテンツ部 表示される部分
<body>
</body>
コメントの書き方
<!-- -->
要素の追加
</head>
<body>
<header>
</header>
<h1>大見出し</h1>
<main>
<p>段落</p>
<div>
<h2>中見出し</h2>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div>
<h2>中見出し</h2>
<table>
<tr>
<th>見出しセル</th>
<tb>通常セル</tb>
</tr>
<tr>
<th>見出しセル</th>
<tb>通常セル</tb>
</tr>
</table>
</div>
</main>
<footer>
</footer>
</body>
</html>
段落
テキスト、テキストを装飾するタグ、リンク、画像のみ含めることができる。
<p></p>
・テキストが横に1行で表示され見にくいとき
ファイルタブ→ユーザー設定→設定→
Editor:Word Wrapをonでテキストが折り返して表示される
箇条書き(番号なしリスト)
<ul>と<li>はセットで使用する。
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>
・あいうえお
・かきくけこ
・さしすせそ
テーブルの作成
<table>：親要素、テーブル１行ごとのセル数は同じにする必要がある
<tr>：テーブルの１行を指す
<th>：見出しセル、セル幅に対して中央揃えになる
<tb>：通常セル
<table>
<tr>
<th>住所</th>
<tb>あいうえお県かきくけこ市</tb>
</tr>
<tr>
<th>営業時間</th>
<tb>10:00-18:00</tb>
</tr>
</table>
住所 あいうえお県かきくけこ市
営業時間 10:00-18:00
グループ化タグ
ヘッダータグ
<header></header>
フッタータグ
<footer></footer>
例：コピーライトのテキスト表示
&;を使用して文字実体参照（HTMLにかけない文字、入力しずらい文字）を使用できる。
<footer>
<p>© あいうえお</p>
</footer>
©あいうえお
メインタグ
ページの中心となる内容をまとめる。原則１回のみ使用できる。
<main></main>
汎用ブロック
意味を持たないタグ。要素をまとめ、CSSをうまく適用するために使用する。
<div></div>
ナビゲーションタグ
主要なページへのリンクを集めたナビゲーションをまとめる。
<nav></nav>
例：ヘッダータグ内で主要なページに飛ぶリンクを集めて表示
<header>
<nav>
<ul>
<li>ホーム</li>
<li>新着情報</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
・ホーム
・新着情報
・お問い合わせ
汎用セクションタグ
<div>タグより意味合いを持たせたいときに使用する。
<section></section>
アサイドタグ
広告やコメント欄など本題とは少し離れるコンテンツをまとめる。
<aside></aside>
アーティクルタグ
１つの話題に関する見出しとテキストをまとめる。
<article></article>
参考書籍
こちらを参考に自分用にまとめさせていただきました。
画像が多くとても分かりやすいのでおすすめです。