テキストと画像とリンクの表示

テキストや画像はWEBサイトを作成するうえで欠かせないコンテンツです。今回はその文章や画像に関するタグを紹介します。

文章に関するタグ

タグのない場所でもテキストを入力すれば文字として表示されます。もちろん読むことは可能ですが、大小変化のない文字や羅列された文字というのは読みにくいですよね。

また、ユーザーだけなく検索エンジンやブラウザにとっても文章を認識するのが難しくなります。

なので、文章一つとってもタグを使用してあげることが重要です。では、どのようなタグがあるのか見ていきましょう

pタグ

pタグは段落を指定するときのタグで、Paragraphの頭文字をとりこのように使用します。

<p>テキストを記載することで、この要素は文章として扱われます。</p>
<p>pタグはブロックレベル要素なので、分けて記載すると改行されます。</p>

brタグ

brタグは改行を指定するとタグです。段落は変更しないが改行したいときにこのbrタグを使用します。

<p>テキストを記載することで、<br>この要素は文章として扱われます。</p>

preタグ

preタグは Preformatted Text の略で、整形済みテキストを表します。スペースや改行が記載されたとおりに反映されます。

<pre>pタグはブロックレベル要素なので、
分けて記載すると改行されます。</pre>

pタグはブロックレベル要素なので、
分けて記載すると改行されます。

文字の装飾

段落や改行の他にも文字を装飾したいことがあるかと思います。そのようなときに使用できるタグを一覧で紹介します。

画像の表示

読みやすい記事や、デザイン性の高いサイトにするためには画像は必要不可欠ですよね。ここでは画像の表示方法について説明していきます。
画像の表示にはimgタグを使用します。

<img src="sample.jpg" alt="画像の代替テキスト">

属性について

imgタグで使用できる属性について説明します。

src

画像のURLを記載する属性です。この属性名と属性値を記載しないと画像が表示されない必須の項目となります。

alt

画像の代替テキストを記載する属性です。画像がうまく表示されない時に、画像の代わりに、属性値に記載したテキストが表示されます。SEO対策におけるalt属性の記載は重要とされています。

その他の属性

imgタグで使用できる上記以外の属性を記載いたします。src属性やalt属性の他よりも使用頻度は低いかもしれませんが、念のため

リンクの表示

リンクにはaタグを使用します。早速使い方を見ていきましょう。

<a href="https://webuddy.info/" target="_blank">Webuudy</a>

href 属性

href属性には、リンク先のURLを属性値として入力することでテキストにリンクが貼られます。

target属性

別タブでリンクを開きたいときには、ターゲット属性を使用しtarget=”_blank”という記載をします。どのように開かれるかに関しては、上記の表示例のリンクをクリックしてみてください。

テキストと画像で有益なコンテンツを

テキストと画像は重要なコンテンツですが、マークアップの仕方を間違えると正しくユーザーに届きにくくなります。上記の手法から適したタグを選択し、最適なマークアップを心がけてください。