HTMLタグ2(リスト,hr,a)

WEB基礎

リストタグ(ul,ol,dl)

リストタグは以下の3種類。
見た目はCSSで定義するので、意味を考えて使い分ける。
コードはSEO的に考えよう!

ulタグ

順序性のないリスト(unordered listの頭文字)。menuはulで作る事が殆ど。type属性により、黒丸、白丸、黒い四角を指定することが可能。外にも画像を指定したりできるが、それはCSSでやろう!

<ul>
	<li>赤
		<ul>
			<li>赤+白</li>
			<li>青+白</li>
			<li>黄+白</li>
		</ul>
	</li>
	<li>青</li>
	<li>黄</li>
</ul>

olタグ

順序性のあるリスト(ordered listの頭文字)。ブラウザのデフォルトは数字つく。

<ol>
	<li>ジャガイモを蒸かす
		<ol>
			<li>洗う</li>
			<li>皮をむく</li>
			<li>ラップで包んでレンチン</li>
		</ol>
	</li>
	<li>つぶして味付け</li>
	<li>美味しい!</li>
</ol>

dlタグ

definition listの略で、定義リストを表す。定義する用語(Definition Term)と、用語の説明(Definition Description)からなる。

<dl>
	<dt>設立</dt>
	<dd>2000年12月25日</dd>
	<dt>業務内容</dt>
	<dd>WEBコンサルティング及びサイト作成・運用・保守</dd>
</dl>

hrタグ

区切り線。テーマや話題の区切りを示す。

<hr>

aタグ(リンク)

外部リンクの注意点

rel属性にnoopenerを付ける 新しいタブを別スレッドで開くことができる。元タブと新しいタブで別スレッドになるため、新しいタブから元タブへの操作を制御することができる。 noopenerを付けないと、JavaScriptでwindow.openerというオブジェクトが操作できるようになり、 新しいタブで開いたページから元タブのページの操作が可能となってしまうので注意。

別スレッドになることで、ページの処理も別々になる。 そのため、新しいタブで開いたページでとても重い処理が走ったとしても、元タブのページへの影響を抑えることができる。逆も然り。

rel属性にnoreferrerを付ける 参照先に対して参照元のリンクを渡さない。(電話で例えると非通知電話みたいなもの。)

参照元リンク情報を渡さないことで、渡したくない情報(ユーザーIDなど)がURLリンクに含まれていても大丈夫に。

Googleアナリティクスのレポートの「集客→すべてのトラフィック→参照元/メディア」で参照元が確認できる。

外部サイトへのリンクを張る場合は、セットで書いてもOK!

<a href="URL" target="_blank" rel="noopener noreferrer">

内部リンク

内部リンク張りたいときは、先にリンクさせたいところのタグにIDを振る。

<a href="#ID名">

その他

googleコンソールに登録しなくても、既にあるサイトからリンクを貼ってもらうと検索エンジンが見に来て、3日もすると検索に乗るようになるらしい・・・

タイトルとURLをコピーしました