※本ページではアフィリエイトリンク(PR)が含まれています※

HTML入門

2章.HTMLを構成する基本構文

この記事ではHTMLファイルを作成する際に必要となる基本構文について説明していきます。

HTMLでは、主にelementやタグと呼ばれる<>に書こうような書き方で実装していきます。今回はこのエレメントの中でも入門的なものをご紹介します。

見出し

見出しを設定します。

<h1>見出し(h1)</h1>
<h2>見出し(h2)</h2>
<h3>見出し(h3)</h3>
<h4>見出し(h4)</h4>
<h5>見出し(h5)</h5>
<h6>見出し(h6)</h6>

リスト

文字列をリスト表示します。

<h1>リスト(ol)</h1>
<ol>
<li>要素1</li>
<li>要素2</li>
</ol>

<h1>リスト(ul)</h1>
<ul>
<li>要素1</li>
<li>要素2</li>
</ul>

段落文章

段落文章を表示します。

<p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p>

太字

文字列を太字にします。

<p>これで<strong>太字</strong>になります。</p>

属性の設定

各elementにはidでの名前付けや、スタイルなどの適応ができます。

<h1>属性の設定</h1>
<p id="Attributes" style="color: red;">注意!!</p>

リンク

文字列に対してリンクを設定できます。

target属性を設定することで、新しいタブで開くよう設定することが可能です。

<h1>リンク</h1>
<p>リンクは<a href="https://kimuralog.com/">こちら</a></p>
<p>新しいタブで開きたい場合は<a href="https://kimuralog.com/" target="_blank">こちら</a></p>

ビデオの表示

.mp4などの動画メディアを表示することができます。

<video width="300" height="200" src="test.mp4" controls>
    Video not supported
</video>

画像の表示

.pngや.jpgなどの画像を表示することができます。

<img width="300" height="200" src="test.jpg">

複数のelementをひとまとめにする

複数のelementを一つにまとめることが可能です。

これにより、複数のエレメントに対し一括でスタイルを当てるなどの対応をすることが可能です。

<h1>Div</h1>
<div>
    <h1>見出し1</h1>
    <p>本文本文本文本文本文本文本文本文</p>
  </div>
<div>
    <h1>見出し2</h1>
    <p>本文本文本文本文本文本文本文本文</p>
</div>

ページ内リンク

ページ内の特定の場所へリンクすることが可能です。

<div>
<p id="id-of-element-to-link-to">リンクの飛び先</p>
</div>
   
<a href="#id-of-element-to-link-to">ページ内リンク</a>