プログラミング

【HTML】文章と関連してよく使うタグまとめ【厳選】

【HTML】文章と関連してよく使うタグまとめ【厳選】

 

HTMLは、タグと呼ばれるものを使ってWebページを作っていきます。

HTMLタグはただ使えばいいという訳ではなく、文章を正しく意味付けしていくことで、SEO(検索エンジン最適化、集客力)対策になると言われています。

Webページを作っていくときは、「HTMLタグを正しく使う」ということが大事になってきます。

 

よると
よると
今回は文章と関連してよく使うHTMLタグを厳選してまとめたいと思います。

 

HTMLで文章と関連して使えるタグ

HTMLで文章と関連して使えるタグ

HTMLでテキスト文字と関連するタグの「意味と使い方」をまとめていきます。

 

 

<p>タグ

 

pタグは「paragraphの略」で、段落にしたいときに使います。

テキストを記述するときに使っていき、段落間に1行分の改行が入ります。

 

【コードの書き方】

<p>pタグは、HTMLで段落を表します。</p>
<p>基本はテキストを記述していく際に使います。</p>

【表示される見え方】

pタグは、HTMLで段落を表します。

基本はテキストを記述していく際に使います。

 

<br>タグ

 

brタグは「breakの略」で、文章を改行したいときに使います。

pタグと違い、文章を明示的に改行させたいときに使っていきます。

 

【コードの書き方】

<p>
brは、breakの略です。
</p>

<P>
pタグとの違いは<br>
文章を明示的に改行させたい<br>
ときに使います。
</p>

【表示される見え方】

brは、breakの略です。

pタグとの違いは
文章を明示的に改行させたい
ときに使います。

 

<strong>タグ

 

strongタグは、テキストの意味を強調させたいときに使います。

strongタグを適用した部分の文字は太字になります。

 

【コードの書き方】

<p>
strongタグは、テキストの文字を<strong>強調</strong>したいときに使います。
</p>

【表示される見え方】

strongタグは、テキストの文字を強調したいときに使います。

 

<del>タグ

 

delタグは「deleteの略」で、削除を表しています。

表示のされ方は、「後からテキストが削除された」という意味で打ち消し線が表示されます。

 

【コードの書き方】

<p>
<del>テキストは削除されます。</del>
</p>

【表示される見え方】

テキストは削除されます。

 

<ins>タグ

 

insタグは「insertの略」で、後から追加されたテキストのことを表します。

表示のされ方は、「後からテキストが追加された」という意味で下線が引かれます。

 

使うことができる属性

【cite】 テキストが変更された理由を示すページのURLを指定。
【datetime】 テキストが変更された日時を指定。

 

【コードの書き方】

<p>
insタグはinsertの略です。
 <ins datetime=”2020-2-10″>
  テキストに下線が引かれます。
 </ins>
</p>

【表示される見え方】

insタグはinsertの略です。テキストに下線が引かれます。

 

<blockquote>タグ

 

blockquoteタグは、比較的長いテキストやURLを「引用・転載」したいときに使います。

 

使うことができる属性

【cite】 引用元のURLを指定。

 

【コードの書き方】

<p>
【参考リンク】
</p>
<blockquote cite=”https://yorutolog.com/>
<p>
※このブログで引用タグを使うと、背景色が灰色になります。
</p>
</blockquote>

【表示される見え方】

【参考リンク】

https://yorutolog.com/
※このブログで引用タグを使うと、背景色が灰色になります。

 

<q>タグ

 

qタグは「quotation(引用)の略」で、一部分(短いテキスト)を「引用・転載」したいときに使います。

ブラウザによって、qタグで囲ったテキストの前後に引用符が付きます。

 

【コードの書き方】

<p>名言、<q>学ぶことで才能は開花する。志がなければ、学問の完成はない。</q> は、諸葛孔明の言葉だ。</p>

【表示される見え方】

名言、学ぶことで才能は開花する。志がなければ、学問の完成はない。は、諸葛孔明の言葉だ。

 

<pre>タグ

 

preタグは「preformatted text(整形済みテキスト)の略」で、空白や改行のあるソースコードをそのまま表示させたいときに使います。

「<、>、&」などは特殊文字として認識されてしまうので、実体参照の「&lt; 、&gt; 、&amp;」などで置き換えて書く必要がある。

 

【コードの書き方】

<pre>
&lt;p&gt;
&lt;pre&gt;タグは、&lt;br&gt;
ソースコードを表示させることができます。
&lt;/p&gt;
</pre>

【表示される見え方】

<p>
<pre>タグは、<br>
ソースコードを表示させることができます。
</p>

 

<code>タグ

 

codeタグは、プログラムのソースコードであることを示すために使います。

一般的なブラウザだと、codeタグで囲んだテキストは等幅フォントで表示されます。

字下げ(インデント)や改行をそのまま表示させたい場合は、<pre>タグとセットで使ってください。

 

【コードの書き方】

<p>
<code>
 &lt;code&gt;
</code>
で囲った部分は、プログラムのソースコードであるという意味。
</p>

【表示される見え方】

<code>で囲った部分は、プログラムのソースコードであるという意味。

 

<hr>タグ

 

hrタグは「horizontal rule(罫線)の略」で、水平の横線を引くことができます。

デフォルトでは立体的な線で表示されますが、消すことも出来ます。

 

使うことができる属性

【size】 線の太さを変更
【width】 線の長さを変更
【align】 表示位置を変更
【noshade】 線の影を消す

 

 

【コードの書き方】

<p>
hrタグ
<hr>
立体的な線を表示することができる。
</p>

【表示される見え方】

hrタグ


立体的な線を表示することができる。

 

HTMLのタグは文章の意味を考えて付けていくものなので、装飾のために使はないように注意します。

 

見た目を装飾したい場合はCSSを使う

見た目を装飾したい場合はCSSを使う

 

基本、HTMLタグを使って見た目のデザイン調整はしないようにします。

見た目のデザイン調整がしたい場合、「CSS」という言語を使って変えていきます。

CSSの学習を初心者が体験してみた
CSSとは?初心者が独学で学習してみた【体験談】 前回は、HTML初心者の私が実際に学習をして「疑問に思ったこと・学習のポイント」など、要点をまとめて体験記事にしました。 ...

 

また、HTMLでタグなどのコードを記述していくときは、「正しく意味付け」をしていかなければSEO的にも良くありません。

HTMLの見出しタグはh1~h6で重要度が変わる【正しく使えばSEO効果あり】
HTMLの見出しタグはh1~h6で重要度が変わる!【正しく使えばSEO効果あり】 HTMLでは、タグと呼ばれるものを使ってWebページを作っていきます。 今回はそのタグの中でも重要になって...

 

HTMLは適切なタグを使って正しく書こう!【まとめ】

HTMLは適切なタグを使って正しく書こう!

 

よると
よると
今回は、文章と関連して使うことができるHTMLタグについてまとめていきました。

 

HTMLでWebページを作っていくときは、その部分に合う適切なタグを正しく書く必要があります。そのため、HTMLタグを使って「ページのデザインを調整する」ということをしてはSEOに悪影響が出てしまいます。

ページの見た目を整えていく場合はCSS言語を使うようにして、「HTML」と「CSS」を使い分けて行きましょう!