HTML(要素一覧)

① 見出し要素 <h1>~<h6>

 見出しの要素には<h1>や、<h2>, <h3>, …<h6>の要素があります。hはheading(見出し)の略です。<h1>が一番大きな見出しで、<h6>が一番小さな見出しになります。

🔸 HTML

<h1>これはh1です。</h1>

<h2>これはh2です。</h2>

<h3>これはh3です。</h3>

<h4>これはh4です。</h4>

<h5>これはh5です。</h5>

<h6>これはh6です。</h6>

表示結果

② 段落要素 <p>

 pはparagraph(段落)の略です。 <p>要素で囲んだテキストは改行されます。

🔸 HTML

<p>牛タンとは</p>

<p>牛の舌部が食用に供される場合に用いられる名称。</p>

表示結果

③ 画像の埋め込み <img>

 画像を挿入するには<img>タグを用います。<img src="url">とすることで、src属性のurlの部分に画像のリンクを指定することでき、画像が表示されます。 <img>要素はテキストを囲むことがないため、終了タグが要りません。

🔸 HTML

<h2>牛タン</h2>

<img src="gyutan.png">

表示結果

④ リスト要素 <li>

 下のようなリスト作るにはを<li>タグを用います。箇条書きにしたいテキストをそれぞれ<li>要素で囲むことによって、リストを作ることができます。

🔸 HTML

<ul>

<li>野球</li>

<li>サッカー</li>

<li>テニス</li>

</ul>

表示結果

⑤ リスト要素 <ul>、<ol>

 <li>要素は、囲む要素によって種類が変わる特徴があります。

<ul>要素で囲むと、黒点が先頭につきます。

<ol>要素で囲むと、数字が連番でつきます。

要素を要素で囲むときは、字下げ(インデント)をします。インデントをすることで入れ子構造が複雑になっても親子関係が分かりやすくなります。行の先頭で「Tab」キーを押すことで簡単にインデントをすることができます。

🔸 HTML

<ul>

<li>野球</li>

<li>サッカー</li>

<li>テニス</li>

</ul>


<ol>

<li>野球</li>

<li>サッカー</li>

<li>テニス</li>

</ol>

表示結果

⑥ テーブル要素 <table>、<tr>、<td>

 下のように表を作成するにはを<table>タグを用います。① <table> 要素で全体を囲み、②<tr>要素で行を定義し、③その中に<td> 要素で中身を記述していきます。

🔸 HTML

<table border="1">

<tr>

<td>好きな食べ物</td>

<td>好きな教科</td>

</tr>

<tr>

<td>メロンパン</td>

<td>情報</td>

</tr>

</table>

表示結果