ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

文書構造要素の一覧

よく利用される文書構造要素

文書構造を明確化する際に利用する、代表的な要素をまとめてみました。

ちなみに今はまだ、これらの要素を全て理解できなくても問題ありません。なんとなく、こんなものがあるんだな~程度でOKです。

<section>要素

見出し、段落、章など、文章の塊を示す要素です。
セクション名を表すh1~h6の見出しが必ず必要となります。
また、文書構造のための要素なのでレイアウト目的に使用することはできません。

[使用例]
<section>
<h1>h1テキスト</h1>
<p>テキストテキストテキストテキストテキスト</p>
</section>

<article>要素

例えばブログの記事のように、その文章だけが独立していても意味が通るような箇所に使用する要素です。

[使用例]

<article>
<h1>h1テキスト</h1>
<p>テキストテキスト</p>

<section>
<h2>h2テキスト</h2>
<p>テキストテキストテキストテキストテキスト</p>
</section>

</article>

<nav>要素

ナビゲーションを示す要素です。例えば<li>タグを使って表示されているページのメニューや他ページへのリンクなどに使用します。主なリンクに必要であり、すべてのリンクを<nav>で囲む必要はありません。

また、セクションタイトル名(h1やh2など)は必ず必要ではありません。

[使用例]
<nav>
<ul>
<li>リンクメニュー</li>
<li>リンクメニュー</li>
<li>リンクメニュー</li>
</ul>
</nav>

<aside>要素

メインコンテンツとはあまり関係のない、もしくは重要ではない箇所を示す要素です。
例えば、サイドナビに配置した他サイトへのリンクやバナー、広告などが該当します。

[使用例]
<aside>
<p>ページの内容とはあまり関係のない、もしくは重要でない内容。バナーや広告、リンク、補足文などが該当します。</p>
</aside>

その他いろいろ

その他にも様々な要素がありますが、ここでは代表的なものだけをピックアップしてみました。
それでは、次のページでそれぞれの要素の具体的な使用方法について学習していきましょう。

覚えておきたいポイント

メリットが沢山

文書構造がキチンと構築されていると、GoogleやYahooなどの検索エンジンから好まれやすく、またソースコードを編集する際にもメンテナンスしやすくなります。

section要素
« 前のページへ HTML文章の構造を明確化する

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。