Web制作やプログラミングなどの
全ての基本となるMarkup記法(HTML)について
備忘録を残します
基本構造
DOCTYPEタグ
記述例
<!doctype html>
htmlタグ
記述例
<html lang="ja">〜</html>
headタグ
記述例
<head>〜<head/>
metaタグ
記述例１
<meta charset="UTF-8">
記述例２
<meta name="description" content="〜">
titleタグ
記述例
<title>〜</title>
bodyタグ
記述例
<body>〜</body>
コンテンツ内
見出しタグ
記述例
<h1>１番大きな見出し</h1>
<h2>２番目の見出し</h2>
<h3>３番目の見出し</h3>
<h4>４番目の見出し</h4>
<h5>５番目の見出し</h5>
<h6>６番目の見出し</h6>
表示例
１番大きな見出し
２番目の見出し
３番目の見出し
４番目の見出し
５番目の見出し
６番目の見出し
pタグ
記述例
<p>これは段落１です。</p>
<p>これは段落２です。</p>
表示例
これは段落１です。
これは段落２です。
brタグ
記述例
<p>ここで改行<br>前の行で改行しています</p>
表示例
ここで改行
前の行で改行しています
imgタグ
記述例
<img src="画像ファイルパス" alt="画像の説明">
aタグ
記述例
<a href=https://google.co.jp>>> Google</a>
表示例
リストタグ
記述例１
<ul>
<li>卵</li>
<li>牛乳</li>
<li>砂糖</li>
</ul>
表示例２
- 卵
- 牛乳
- 砂糖
記述例２
<ol>
<li>卵を割る</li>
<li>砂糖と牛乳を入れてよく混ぜる</li>
<li>フライパンに流し込み焼く</li>
</ol>
表示例２
- 卵を割る
- 砂糖と牛乳を入れてよく混ぜる
- フライパンに流し込み焼く
表タグ
記述例
<table border="1">
<tr>
<th>プラン名</th>
<th>料金</th>
</tr>
<tr>
<td>わくわくプラン</td>
<td>にこにこプラン</td>
</tr>
<tr>
<td>月額2,980円</td>
<td>月額1,980円</td>
</tr>
</table>
表示例
| プラン名 | 料金 |
|---|---|
| わくわくプラン | にこにこプラン |
| 月額2,980円 | 月額1,980円 |
formタグ
記述例
<form action="example.php" method="post" name="contact-form">
ここにフォームの部品が入ります
</form>
inputタグ
記述例
名前：<input type="text" placeholder="名字 名前">
<br>
性別：
<input type="radio" name="gender" value="男"> 男
<input type="radio" name="gender" value="女" checked> 女
<input type="radio" name="gender" value="その他"> その他
<br>
好きな色：
<input type="checkbox" name="color" value="赤" checked> 赤
<input type="checkbox" name="color" value="青"> 青
<input type="checkbox" name="color" value="黄"> 黄
<input type="checkbox" name="color" value="緑"> 緑
<br>
<input type="submit" value="送信する">
selectタグ
記述例
血液型：
<select name="bloodtype">
<option value="A">A</option>
<option value="B">B</option>
<option value="O">O</option>
<option value="AB">AB</option>
<option value="不明" selected>不明</option>
</select>
textareaタグ
記述例
<textarea name="message" placeholder="メッセージを入力"></textarea>
タグによるグループ分け
headerタグ
記述例
<header>〜</header>
navタグ
記述例
<nav>〜</nav>
articleタグ
記述例
<article>〜</article>
sectionタグ
記述例
<section>〜</section>
mainタグ
記述例
<main>〜</main>
asideタグ
記述例
<aside>〜</aside>
footerタグ
記述例
<footer>〜</footer>
divタグ
記述例
<div>〜</div>
おわりに
以上がMarkup記法(HTML)の基本構文でした
上記を覚えるだけでも
簡単なWebサイトくらいは作れますので
是非一度作成してみてください
またCSSも使用する事で
だいぶ表現の幅も広がりますので
気になる方は調べてみてください