[HTML講座] HTMLについて

Data

2019/06/17

Tag

HTML,CSS講座

HTMLはhyper text markup language（ハイパーテキストマークアップランゲージ）の略です。

HTMLで大事なのはその言葉が表しているものを意味付けすることが大事です。見た目を調整するのはCSSに任せましょう。

見出し
文章
リスト
文書構造

などの意味付けをするマークアップを心がけましょう。

hタグとは

h1からh6まで見出しを表すタグ

pとは

文章、段落を表すタグ

<p>文章文章文章文章文章</p>

ul,ol,liとは

リストを表すタグ

ul

順番が関係ないリスト

リスト1
リスト2
リスト3

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

ol

順番つきのリスト

リスト1
リスト2
リスト3

<ol>
  <li>リスト1</li>
  <li>リスト3</li>
</ol>

dlとは

定義付きリスト

<dl>
  <dt>タイトル1</dt>
  <dd>タイトル1に対しての定義・説明</dd>
  <dt>タイトル2</dt>
  <dd>タイトル2に対しての定義・説明</dd>
  <dd>タイトル2に対しての定義・説明 複数かける</dd>
  <dd>タイトル2に対しての定義・説明 複数かける</dd>
</dl>

figure,figucaptionとは

写真や図などをいれるタグ

<figure>
  <img src="http://www.htmq.com/images/kaeru.gif" width="100" height="100">
  <figucaption>画像の説明</figucaption>
</figure>

em, strongとは

emが強調を表す strongが強い重要性を表す

<p>emは<em>強調</em>を表す</p>
<p>emは<strong>重要性</strong>を表す</p>

smallとは

責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使う

<p><small>&copy; copyright</small></p>

div,spanとは

特に意味をもたないタグ

div

タグをグループ化したいときなどに使う

<div>
  <p>文章</p>
  <ul>
    <li>リスト1</li>
    <li>リスト2</li>
  </ul>
</div>

span

divとは違い改行されない。 em、strongなどとは違い特に意味がないがデザイン的に囲う必要がある場合などに使う

<p><span>特に意味</span>がないけど囲いたい</p>

header,main,footerについて

ページのタイトルや、グローバルナビゲーションなど、ページのheaderとなる部分を囲う

<header>
  <h1>タイトル</h1>
</header>

mainとは

ページのmainとなる部分を囲う

<main>
  <h2>メインタイトル</h2>
  <p>メインのコンテンツの内容</p>
</main>

コピーライトなどページのfooterとなる部分を囲う

<footer>
  <p><small>&copy; copyright kame</small></p>
</footer>

section,articleについて

sectionとは

見出しタグが表している範囲を囲う

<section>
  <h2>section,articleについて</h2>

  <section>
    <h3>sectionとは</h3>
    <p>見出しタグが表している範囲を囲う</p>
  </section>
</section>

articleについて

記事部分を囲う

<main>
  <article>
    <h1>HTMLとは</h1>

    <section>
      <h2>section,articleについて</h2>

      <section>
        <h3>sectionとは</h3>
        <p>見出しタグが表している範囲を囲う</p>
      </section>
    </section>
  </article>
</main>

clover.blue