HTMLは、タグと呼ばれるものを使ってWebページを作っていきます。
HTMLタグはただ使えばいいという訳ではなく、文章を正しく意味付けしていくことで、SEO(検索エンジン最適化、集客力)対策になると言われています。
Webページを作っていくときは、「HTMLタグを正しく使う」ということが大事になってきます。
HTMLで文章と関連して使えるタグ
HTMLでテキスト文字と関連するタグの「意味と使い方」をまとめていきます。
<ｐ>タグ
ｐタグは「paragraphの略」で、段落にしたいときに使います。
テキストを記述するときに使っていき、段落間に１行分の改行が入ります。
【コードの書き方】
<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（整形済みテキスト）の略」で、空白や改行のあるソースコードをそのまま表示させたいときに使います。
「<、>、&」などは特殊文字として認識されてしまうので、実体参照の「< 、> 、&」などで置き換えて書く必要がある。
【コードの書き方】
<pre>
<p>
<pre>タグは、<br>
ソースコードを表示させることができます。
</p>
</pre>
【表示される見え方】
<p>
<pre>タグは、<br>
ソースコードを表示させることができます。
</p>
<code>タグ
codeタグは、プログラムのソースコードであることを示すために使います。
一般的なブラウザだと、codeタグで囲んだテキストは等幅フォントで表示されます。
字下げ(インデント)や改行をそのまま表示させたい場合は、<pre>タグとセットで使ってください。
【コードの書き方】
<p>
<code>
<code>
</code>
で囲った部分は、プログラムのソースコードであるという意味。
</p>
【表示される見え方】
<code>で囲った部分は、プログラムのソースコードであるという意味。
<hr>タグ
hrタグは「horizontal rule（罫線）の略」で、水平の横線を引くことができます。
デフォルトでは立体的な線で表示されますが、消すことも出来ます。
使うことができる属性
| 【size】 | 線の太さを変更 |
| 【width】 | 線の長さを変更 |
| 【align】 | 表示位置を変更 |
| 【noshade】 | 線の影を消す |
【コードの書き方】
<p>
hrタグ
<hr>
立体的な線を表示することができる。
</p>
【表示される見え方】
hrタグ
立体的な線を表示することができる。
HTMLのタグは文章の意味を考えて付けていくものなので、装飾のために使はないように注意します。
見た目を装飾したい場合はＣＳＳを使う
基本、HTMLタグを使って見た目のデザイン調整はしないようにします。
見た目のデザイン調整がしたい場合、「CSS」という言語を使って変えていきます。
また、HTMLでタグなどのコードを記述していくときは、「正しく意味付け」をしていかなければSEO的にも良くありません。
HTMLは適切なタグを使って正しく書こう！【まとめ】
HTMLでWebページを作っていくときは、その部分に合う適切なタグを正しく書く必要があります。そのため、HTMLタグを使って「ページのデザインを調整する」ということをしてはSEOに悪影響が出てしまいます。
ページの見た目を整えていく場合はCSS言語を使うようにして、「HTML」と「CSS」を使い分けて行きましょう！
