Tagのお話

KOUSUKE (seven) INAMOTOGeneralasahi

Hello!• 稲本浩介（稲本せぶん）• 30• 株式会社ゼネラルアサヒ

www.generalasahi.co.jp• Webディレクター、マークアップエンジニア

• IA(Information Architect)• @sevenina• sevenstyleweb.com/blog

Tagタグとは、荷札、付箋といった意味の英単語。

あらかじめ定められた特殊な記法により文書に埋め込む形で記述される付加情報。地の文とは別のレベルで解釈され、付加情報を埋め込む特殊な文字列などのことをタグと言う。

Tag has the meaning.

<hx>　見出しであることを表す

<p> 段落であることを表す<img> 画像であることを表す<ul> 順不同のリストであることを表す<ol> 順序リストであることを表す<li> リストであることを表す<a> アンカーリンクであることを表す

<article> 内容が単体で完結しているセクションを表す<aside> 補足的な説明を表す<nav> Webサイトのナビゲーションリンクを配置するためのセクション

<section> 汎用的なセクション<hgroup> 複数の見出しをひとまとまりにする<header> セクションのヘッダ<footer> セクションのフッタ<address> article/bodyに関する問い合わせ先アドレス

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

NO ANSWER

THINK

Tag has the meaning.

?

<article> 内容が単体で完結しているセクションを表す<aside> 補足的な説明を表す<nav> Webサイトのナビゲーションリンクを配置するためのセクション

<section> 汎用的なセクション<hgroup> 複数の見出しをひとまとまりにする<header> セクションのヘッダ<footer> セクションのフッタ<address> article/bodyに関する問い合わせ先アドレス

<article>

<aside>

<nav>

<section>

<hgroup>

<header>

<footer>

<address>

!

EASY!!

Example

But…

a piece of source

Multi Source

Multi Source

Multi Use

Multi SourceYour filterMulti Use

THINK

Think about

InformationArchitecture

Sample

<header> <h1> <nav>

<section> <header> <section><div> <div>

<footer><div>

Multi SourceYour filterMulti Used