HTML 5の新構造

39726 ワード
xhtml Web規格 html5 テキストリンク
*本情報は『実戦プロジェクト反応型Web配信』の内容に基づいて作成されています.

新しい構造


HTML 5には、既存のXHTML構造よりも意味のあるWebドキュメントを作成するための新しい要素が追加されています.
例えば、Webドキュメントの一般的な構成は、ヘッダー(接頭辞)、コンテンツ(コンテンツ)、およびフッター(接尾辞)の形で現れるが、XHTMLにはそのような意味を持つ要素はないので、ドキュメントのヘッダードメインがドキュメントのパケット要素<div>である場合、<div id="header">のような意味をid属性で置き換える.しかし、この方法で処理すると、<div>要素がドキュメントにヘッダの意味を持つことは不可能である.
HTML 5では、これらの問題を解決できる<header>要素、<nav>要素、<section>要素、<article>要素、<footer>要素などの文書構造の要素が新しい要素に追加され、表記がより有意義になる.しかし、文法規則の面ではXHTMLよりずっと柔軟です.
例えば、XHTMLでは小文字しか使用できないが、HTML 5では、従来のHTML 4.0方式のように大文字と小文字を区別しなくても、<br />, <img />, <input />, <hr />などの空の要素を<br>, <img>, <input>, <hr>に処理しても文法的に問題は起こらない.
ここでは、先に学習したXHTML構文規則に従います.

HTMLのデフォルト文書構造

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta vharset>
    <title>HTML5</title>
  </head>
  <body>
    
    내용
    
  </body>
</html>
既存のXHTMLの基本ドキュメント構造に比べて、非常に簡単になります.しかし、これまですべてのブラウザがHTML 5をサポートしていたわけではありません.特にIE 9.HTML 5は、0以降ではサポートされていません.
自分が使用しているブラウザがHTML 5をサポートしている数を知りたい場合は、http://html5test.comのWebサイトで参照してください.また、現在のブラウザがHTML 5を最もサポートしているかどうかも知ることができます.
ここではChromeブラウザを使用して、マークアップの実行画面を表示します.

ヘッダー要素、フッター要素、nav要素

<header>要素は、ドキュメントの接頭辞を表す要素であり、既存の<div id="header">領域内のドキュメントの大きなタイトルやナビゲーション、検索フォームなどの内容を含むことができる.<footer>要素は、文書接尾辞を表す要素でもあり、既存の<div id="header">領域内の著作者または著作権の情報、および関連文書のリンクを含むことができる.<header>要素または<footer>要素は、通常、ドキュメント全体の接頭辞、接尾辞として使用されますが、場合によっては、後で学習するコンテンツ要素の一部の接頭辞または接尾辞として使用することもできます.この部分については、<article>要素においてより詳細に説明する.<nav>要素は、主なナビゲーションの意味を提供するために主に使用され、すべてのリンクグループに<nav>要素としてマークする必要はありません.
以下の例でさらに説明します.
例1
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>header 요소, footer 요소, nav 요소</title>
  </head>
  <body>
    <header>
      <h1><img src="images/icox_logo.gif" alt="icox" ></h1>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About me</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <nav>
        <h2>메인메뉴</h2>
        <ul>
          <li><a href="#">아이콕스</a><li>
          <li><a href="#">신간도서</a><li>
          <li><a href="#">iCox커뮤니티</a><li>
          <li><a href="#">iCox자료실</a><li>
        </ul>
      </nav>
      <form name="sform" action="#" method="get" id="sform">
        <fieldset>
          <legend>
          <label for="sbox">도서 검색어 입력</label><input type="search" id="sbox" />
          <input type="submit" value="검색" />
        </fieldset>
      </form>
    </header>
    <div>
      <h2>메인컨텐츠</h2>
      <p>메인 컨텐츠 내용</p>
    </div>
    <footer>
      <small>COPYRIGHT &copy; iCox. All Rights Reserved</small>
    </footer>
  </body>
</html>
  • 2<header>要素、<footer>要素に一般に含まれることができる内容が表記されている.<header>および<footer>の両方の要素は、ほとんどの要素を含んでもよいが、同じ<header>および<footer>要素を含んではならない.
  • の例1では、2つの要素<ul>がある.一つは「上端メニューリンクグループ」(Home,Aboutus,News,Contact)で、もう一つは「メインメニューリンクグループ」(Icox,新刊書,Icoxコミュニティ,Icox資料室)です.
    • 「メインメニューリンクグループ」にのみ<nav>要素が含まれているため、「メインメニューリンクグループ」をメインナビゲーションとして使用することを意味します.上端メニューリンクグループは<nav>要素を提供することもできるが、ウェブサイトのすべてのページに接続できる「メインメニューリンクグループ」は、より主要なナビゲーションの意味を持つため、「メインメニューリンクグループ」だけが<nav>要素を含む.

    section要素

    <section>要素は、ドキュメント内の同じ意味のコンテンツを組み合わせた意味グループ要素であり、通常はタイトル要素で始まる.既存の<div>要素のように縛られた要素と見なすことはできません.レイアウト、適用スタイル、またはJavaScriptの利便性を目的とする場合は、<div>要素を使用します.
    例2
    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>section 요소</title>
  </head>
  <body>
    <h1>아이콕스</h1>
    <section>
      <h1>아이콕스 소개</h1>
      <p>아이콕스 스토리</p>
      <p>아이콕스 인포</p>
    </section>
    <section>
      <h1>신간소개</h1>
      <p>안드로이드로 용돈벌기</p>
      <p>아이폰으로 용돈벌기</p>
    </section>
    <section>
      <h1>아이콕스 이벤트</h1>
      <p>아이콕스 도서구매 시 커피증정</p>
      <p>제2회 앱 아이디어 공모</p>
    </section>
  </body>
</html>
  • の意味が同じ内容を<section>要素とする.全体的に見ると、「エコックス」は3つの異なるテーマの部分に分かれている.すなわち,レイアウト構造のために組み合わされるのではなく,意味の同じコンテンツを組み合わせて領域を区別することを知る.
  • 2<section>要素にタイトル要素が含まれていないか、意味の異なる内容を組み合わせているわけではありませんが、文法的には間違っています.
    • 重要なことは、<section>要素を作成するときに、その意味上の内容を組み合わせることができ、このグループにタイトルを明確に明記することができる場合、<section>要素を使用しても大きな問題はありません.

    記事要素


    新聞の文章やブログの文章は、ドキュメントの中で独立した内容であることがわかります.また、これらのコンテンツは、修正や加工を必要とせずに他のWebサイトに配布または再利用できるという特徴があります.これらの独立して配置または再使用可能なすべてのコンテンツは、<article>要素に含めることができる.
    例3
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>article 요소</title>
  </head>
  <body>
    <h1>신간소개</h1>
    <article>
      <header>
        <h1>안드로이드로 용돈벌기</h1>
      </header>
      <ul>
        <li><img src="images/newbook.gif" alt="안드로이드로 용돈벌기" /></li>
        <li>
          가히 아이폰, 안드로이드 앱이 "문화를 바꾸었다"고 할 수 있을 정도로, 이제 휴대폰과 앱은 따로 분리해서 생각하기 어려워졌으며...
        </li>
      </ul>
      <footer>작성자 : 아이콕스</footer>
    </article>
  </body>
</html>

  • 例3は、<article>要素の一般的な形態である.しかし、<header>要素または<footer>要素を常に表記する必要はありません.通常、タイトル要素と内容のみを表示する場合が多い.<article>要素は独立して再利用可能な内容であるため、タイトル要素を含むことが望ましい.
  • <section>と<article>の要素の混同がしばしばある.簡単に言えば、<section>要素は、同じ意味のコンテンツを組み合わせた意味グループ要素であり、<article>要素は独立した要素と見なすことができる.
  • <section>要素は、<section>要素または<article>要素を含んでもよく、<article>要素は、<article>要素または<section>要素を含んでもよい.
    例えば、自立、配置、または再利用可能なコンテンツが同じ意味を有する場合、これは<section>要素であり、<article>要素を組み合わせてもよく、<article>要素の中で同じ意味のコンテンツを組み合わせる必要がある場合、<article>要素に<section>要素が含まれる可能性がある.

    • aside要素

    <aside>要素は、周囲のコンテンツに関係なく、主コンテンツから分離可能な独立した要素である.ブログまたはドキュメントでは、メインコンテンツの左側または右側にある「サイドバー」領域とみなすことができます.
    例4
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>aside 요소</title>
  </head>
  <body>
    <h1>아이콕스</h1>
    <div id="content">
      <h2>메인 컨텐츠</h2>
      <p>신간소개</p>
      <p>아이콕스 이벤트</p>
      <p>저자칼럼</p>
    </div>
    <aside>
      <h1>IT 동향</h1>
      <ul>
        <li><a href="#">이제 반응형 웹...</a><li>
        <li><a href="#">HTML5의 새로운...</a><li>
      </ul>
    </aside>
  </body>
</html>
    特定の範囲をトリミングした後に1回だけFFT (Python)
    C++による基本オブジェクト指向プログラミングの理解