![見出し画像](https://assets.st-note.com/production/uploads/images/104699355/rectangle_large_type_2_b7c270e37bf3720855e109766ab3e6fc.png?width=1200)
HTML基本・設計
HTMLの書き方についてメモ程度に記事を投稿しようと思います。
![](https://assets.st-note.com/img/1683197975603-i9d8smLtRp.png?width=1200)
htmlファイルを用意
bodyタグの中にhtmlを書いていきます。
![](https://assets.st-note.com/img/1683198307053-JvjBxQiUHf.png?width=1200)
headerの中にページの見出しとナビゲーションを配置します。
次にmainタグの中にページの内容を書いていきます。codeを見て、どこに何を書いているのかわかりやすいように内容ごとにarticleタグで分けます。
articleの内容の中でもっと分割したいときはsectionタグで分けましょう。
![](https://assets.st-note.com/img/1683199136304-Xlq4mRJ6YV.png?width=1200)
divタグを使うのがあまり好きではないので、このように書いています
最後にfooterを書いて、あとはこの中にページのコンテンツを書いていきます。
HTMLタグについて
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
h1タグはコンテンツのテーマを示す。h1はページの内容を一言で表すときや、タイトルなどに使いましょう。
h2〜h6はページのコンテンツの見出しです。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<dl>
<dt>質問1</dt>
<dd>答え1</dd>
<dt>質問2</dt>
<dd>答え2</dd>
<dt>質問3</dt>
<dd>答え3</dd>
</dl>
ulとliはリストです。dlは項目と内容です。
<a></a>
<img>
aはリンクです。imgは画像の埋め込みです
<form action="">
<label for="textfield" hidden>キーワード入力:</label>
<input type="text" placeholder="SEARCH">
<button type="submit">検索</button>
</form>
最後にフォームです。
以上、HTMLの基本設計について書いてみました。
この記事が気に入ったらサポートをしてみませんか?