❶<h1~h6> – 見出しの作成
<h>タグで囲んだ要素は見出しなります。
- <h1>～<h6>タグは見出しを意味する
- 数字が小さいものほど大きい見出しとなる
- 囲んだ要素の前後には改行が入り、文字のサイズと太さが変わる
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>見出しの作成</title>
</head>
<body>
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
</body>
<html>❷<p> – 段落の作成
<p>タグは段落を意味します。
HTMLで段落を表すタグは<p>タグです。これは「paragraph（パラグラフ）」の略で、文章を段落として区切るために使用します。<p>と</p>で囲まれた範囲が1つの段落として認識されます。
文章を段落ごとに区切り、視覚的に読みやすくするために使用します。ブラウザは通常、段落の前後に余白を追加して表示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>heading.html</title>
</head>
<body>
<p>最初の段落を構成します</p>
<p>２番目の段落です。pはpharagraphの略です。<br/>段落の途中で改行します。</p>
</body>
<html>❸<br> – 文章の改行
<br>タグは文章を改行する際に使います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改行</title>
</head>
<body>
文章を<br>
改行してみましょう。<br>
<br>
できましたか？
</body>
<html>❹<a> – リンクを埋め込む
<a>タグはリンクを埋め込む際に使います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>a_tag</title>
</head>
<body>
<p>検索デスクへは<a href="https://www.searchdesk.com">コチラ<a>から</p>
</body>
<html>- リンクを埋め込むために使用するタグ
- href属性にリンク先を指定する
❺<img> – 画像の挿入
<img>タグは画像を貼る際に使用します。
基本的な使い方としては、src属性に画像のファイル名（PNGやGIF、JPEG形式など）、alt属性には代替テキストを与えます。
代替テキストとは、画像が表示できない環境下で代わりに表示されるテキストを指します。
alt属性に関しては必須の属性ではありませんが、もしものことを考えるとしっかりと記載しておくことが無難でしょう。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>画像表示「</title>
</head>
<body>
<img src="https://blog.canpan.info/toincenter/img/toinmasukotto.PNG" alt="東員市民活動センターマスコット">
</body>
<html>❻<hr> – 水平方向の罫線を引く
<hr>タグは水平方向に罫線を引く際に使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>水変遷を引く</title>
</head>
<body>
サンプル1
<hr>
サンプル2
<hr width="500">
サンプル3
<hr width="500" align="right">
サンプル4
<hr size="5" width="30%">
サンプル5
<hr size="5" noshade>
</body>
</html>❼<ol>, <ul>, <li> – リストの作成
<ol>タグは順序ありリスト、<ul>タグは順序なしリストを作成します。
リストの各項目は<li>タグを使って記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>番号付きリスト</title>
</head>
<body><h2>番号付きリスト</h2>
<ol>
<li>北海道</li>
<li>青森県</li>
<li>群馬県</li>
</ol><h2>番号無しリスト</h2> <ul>
<li>トマト</li>
<li>ナス</li>
<li>キューリ</li>
</ul>
</body>
<html>❽<dl>, <dt>, <dd> – 定義・説明リストの作成
用語の説明や言葉の定義をリスト化する際には<dl>タグを使います。
リスト化したい要素を<dl>タグで囲み、<dt>タグで用語、<dd>タグで用語に対応する定義や説明を囲みます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定義説明リスト</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>マークアップ言語</dd>
<dd>Webページの開発に使う</dd>
<dt>CSS</dt>
<dd>Webページのスタイルを指定する</dd>
<dd>HTMLと組み合わせて使う</dd> </dl>
</body>
</html>