More than 1 year has passed since last update.

【よく使う】見ればすぐ使える！タグ一覧【HTML】

Posted at 2025-02-28

｜【はじめに】そもそも「HTML」ってなに？

　HP作成と切っても切り離せないのが、HTMLの存在。　HTMLとは、

「Webページを作成するためのプログラミング言語」

　これがないとWebサイトは成り立たない！
　文章や見出しなど、中身を構築している部分のこと。

　つまりは、雑にまとめてしまうと…

「Webサイトの目に見えている文章全部」が、
基本はHTMLで構成されている。

　ということになります。

※ 注意 ※
この記事は、文系脳の私が単純化した解釈に基づいて、初心者向けに作成されております。
有識者は、見ても怒らないでください…笑

　以上の注意を踏まえた上で、
　HTMLタグと呼ばれる、文章構成において必要な、
　よく使う要素を、下に一覧で記述しておきます。

①見出し_heading

書き方

<h1>見出し</h1>
<h2>見出し</h2>
...
<h6>見出し</h6>

実行結果：

②段落_paragraph

書き方

<p>段落とは</p>

使用用途：
①の見出し、段落は囲んだ文章の後が改行される。
見出し以外の、本文に当たる部分を段落で囲う。

③コメント

書き方

<!ｰｰ この中の文字はブラウザに表示されません ｰｰ>

使用用途：
プログラムの補足など、自分のメモ代わりに使う。

④リンク先を指定

書き方

<a href = "url">

使用用途：
リンクを作成する「a」に「href」という属性を追加すると、""の中にリンク先URLを指定することで、そのページへ遷移することが出来る。

実行結果：
Qiita

⑤画像表示_images

書き方

<img src = "url">

使用用途：
画像の「img」に「src」という属性を追加すると、""の中に画像リンクを指定することで、画像が表示される。

実行結果：

※ ↑は私のイラストです。興味ある方はこちらもどうぞ～
宣伝用マイページ

⑥リストを作成_list

書き方


<ul>
　<li>これは</li>
　<li>箇条書き</li>
　<li>です</li>
</ul>

使用用途：

を囲む要素で、種類が変化する。

実行結果：
・これは
・箇条書き
・です

⑦強調

書き方


<P><strong>強調</strong></P>

実行結果：
強調

※　随時更新予定