HTML5の基本

ウェブサイト作成時に於けるJIS X 8341-3:2016(日本工業規格)に基づいたHTML(=ハイパーテキスト マークアップ ランゲージ=HyperText Markup Language)コーディングの在り方とウェブページ上の文書を記述するマークアップ言語である為の過去から現在迄の経緯や将来的な可能性を考え乍ら致します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<base href="https://lodge0.org" />
<title>現役女子大生(女子高生起業家)社長が経営する会社のICT事業部 - ホームページ</title>
<meta name="description" 文章形式にする必要はなく、タグで区別して記述する等、全角120文字程度でページの明確な情報を説明。">
<link rel="stylesheet" href="/css/default_style.css" />
<link rel="icon" href="/assets/icon.png" />
<link rel="apple-touch-icon" href="/assets/icon.png" />
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/js/default_jquery-2.0.2.min.js"></script>
<script src="/js/default.js"></script>
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-61809908-1', 'auto'); ga('send', 'pageview'); </script>
</head>
<body>
<!-- ヘッダー情報にはheader要素を使用 -->
<header>
<hgroup>
<h1>ウェブサイト名</h1>
<h2>ウェブページタイトル</h2>
</hgroup>
<nav>
<ul>
<li><a href="/">ホームページ</a></li>
<li><a href="/wiki/">知恵袋</a></li>
<li><a href="/blog/">お知らせ</a></li>
<li><a href="/about/">独り言</a></li>
<li><a href="/contact/">お問合せ</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>タイトル</h2>
<time datetime="2017-02-25">2017年2月25日</time>
</header>
<section>
<h3>タイトル</h3>
<p>記事情報にはarticle要素を使用。</p>
</section>
<section>
<h4>タイトル</h4>
<p>階層構造を明確にしたい箇所にはsection要素を使用。</p>
</section>
</article>
<aside><img src="ad.png" alt="広告"></aside>
<footer><p class="copyright">&copy; 2014-2017 Mineral Japan Co.,Ltd.</p></footer>
</body>
</html>

見出しが隣接して関連性があればhgroup要素で囲む

ナビ情報にはnav要素を使用

本文とは関係が浅い箇所にはaside要素を使用

フッター情報にはfooter要素を使用

#000033 #000000

Link a #0099ff #0099cc #000066

Link a hoffcc33 #ff9900 #ff6600 #ff3300

ウェブセーフカラー216色から利用する色を見付けて見ましょう。

次のページへ : 静的なウェブサイトを作る方法 →