目次一覧
状態:結論(後で見返す用)
閲覧数:2,211
投稿日:2019-10-03
更新日:2020-03-29
タグ内で属性を記述する順番 ／ フォーム要素 ／ hタグ
favicon ／ アフィリエイト
HTML5タグ階層関係。実際の使用例(プロジェクト別)
favicon ／ アフィリエイト
HTML5タグ階層関係。実際の使用例(プロジェクト別)
HTML5タグPRIVATEルール
使用すべきHTML5タグ
header
main
footer
nav
article
サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事などが含まれます
section
HTML 文書の中で単独のセクション (区間) を表します。セクションを表現するより意味的に具体的な要素がない場合に使用します。必ずではありませんが、通常はセクションには見出しがあります
figure
「文書の本文から参照されるようなイラスト・図・写真・ソースコード」であることを示す際に使用
figcaption
・図表のキャプションを示す際に使用
・<figure>～</figure>の中へ配置する
使用しないHTML5タグ
aside
・あまり重要でない部分を示すセクション要素
・見出しを必要としない要素
→ 使用メリットを感じない
使用イメージ
<html>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
<h1>コンテンツ内容見出し</h1>
<p>コンテンツ内容1</p>
</section>
<section>
<h1>コンテンツ内容見出し</h1>
<p>コンテンツ内容2</p>
</section>
<section>
<h1>コンテンツ内容見出し</h1>
<figure>
<img src="..." alt="...">
<figurecaption>画像のキャプション</figurecaption>
</figure>
</section>
</article>
<footer>...</footer>
</body>
</html>
その他
iframe
<?php
$refererUrl = parse_url($_SERVER["HTTP_REFERER"]);
if($refererUrl['host']!=$_SERVER['SERVER_NAME']){
header('location: /');
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
タグ内で属性を記述する順番 ／ フォーム要素 ／ hタグ
favicon ／ アフィリエイト
favicon
favicon.ico
・必ず設置する(表示しなくても良い)
・console.logにおける404エラー回避が目的
サイズ
48×48
作成方法
P7検索結果ページに表示される「identicon.php?size=24」を「48」へ変更後、favicon.icoファイル名として保存
設置方法
・ドキュメントルート直下へ配置
・表示目的ではないため、「<link rel="icon" href="favicon.ico">」を記述しない(記述しても良い)
・<link>: 外部リソースへのリンク要素
Link
・favicon.ico と Webサイトの表示度速度について
・favicon.ico の問題
アフィリエイト
楽天アフィリエイト
deferを付与する
<script>xxxx</script><script src="https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js" defer></script>
・async ／ deferHTML5タグ階層関係。実際の使用例(プロジェクト別)
P41
トップページ
<body>
<nav id="jquery-pop-menu"></nav>
<nav class="switchin"></nav>
<div><!-- 広告 --></div>
<header>
<h1></h1>
<h2></h2>
</header>
<main>
<div class="pager"></div>
<article class="sorted_table">
<section></section>
<section></section>
</article>
<div class="pager"></div>
</main>
<section id="accessrank"></section>
<div><!-- 広告 --></div>
<footer></footer>
</body>
P46
<body>
<header></header>
<main>
<article>
<section>
<!-- トピック -->
</section>
</article>
<article>
<section>
<!-- レス -->
</section>
</article>
<article>
<section>
<!-- レス -->
</section>
</article>
<section><!-- ユーザーコメント表示 --></section>
<section><!-- ユーザーコメント投稿 --></section>
<section><!-- ゲストコメント表示 --></section>
<section><!-- ゲストコメント投稿 --></section>
</main>
<footer></footer>
</body>
・HTML5タグ
・HTML タグ配置階層