WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5マークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。

webサイトを作る上でアウトライン構造は最も重要なポイントの1つです。自身の伝えたい内容が正しくアウトライン構造化されているか、外部ツールなどを使い必ず確認しましょう。


f:id:yachin29:20160601140359p:plain

HTML5 Outliner

https://gsnedders.html5.org/outliner/



以下の文章を使って正しいアウトライン構造を作ってみましょう。

HTMLについて
HTML(HyperText Markup Language)とは、ウェブ上の文書を記述するためのマークアップ言語である。

HTML5
HTML5は、HTML4に代わる次世代のHTMLとして2008年1月に草案が発表され、2014年10月に勧告された新しいHTML仕様。

HTML5の新要素
header、nav、footerなどが新しい要素して加わりました。

header要素
header要素とは…です。

nav要素
nav要素とは…です。

XHTML
HTML 4.01をXMLにて再定義したもので、その仕様はHTMLと同じくW3Cによって勧告されている。

XHTMLで使われていた要素
div要素やp要素などが使われていました。

div要素
div要素とは…です。

p要素
p要素とは…です。


今度はsection、h1、pの3つの要素のみを使って正しいアウトライン構造を作りましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTML5のアウトライン</title>
</head>

<body>
<div id="container">
<header>
<h1>HTMLについて</h1>
<p>HTML(HyperText Markup Language)とは、ウェブ上の文書を記述するためのマークアップ言語である。</p>
</header>

<section>
<h1>HTML5</h1>
<p>HTML5は、HTML4に代わる次世代のHTMLとして2008年に草案が発表され、2014年10月に勧告された新しいHTML仕様。</p>
<section>
<h1>HTML5の新要素</h1>
<p>header、nav、footerなどが新しい要素して加わりました。</p>
<section>
<h1>header要素</h1>
<p>header要素とは…です。</p>
</section>
<section>
<h1>nav要素</h1>
<p>nav要素とは…です。</p>
</section>
</section>
</section>

<section>
<h1>XHTML</h1>
<p>HTML 4.01をXMLにて再定義したもので、その仕様はHTMLと同じくW3Cによって勧告されている。</p>
<section>
<h1>XHTMLで使われていた要素</h1>
<p>div要素やp要素などが使われていました。</p>
<section>
<h1>div要素</h1>
<p>div要素とは…です。</p>
</section>
<section>
<h1>p要素</h1>
<p>p要素とは…です。</p>
</section>
</section>
</section>

</div>
</body>
</html>