HTML5タグの正しい使い方

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

menu
 
  HTML5タグの正しい使い方

HTML5タグの正しい使い方

<!doctype html>
<!--特定のIEだけにスタイルシートを適用するためのコメントアウト-->
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
    <head><!--メタ情報やタイトルなど-->
        <meta charset="utf-8">
        <meta http-equiv="x-dns-prefetch-control" content="on"><!--DNS preftch(SNSボタン等の表示高速化のための設定) の有効化-->
    <link rel="dns-prefetch" href="//connect.facebook.net">
    <link rel="dns-prefetch" href="//s-static.ak.facebook.com">
    <link rel="dns-prefetch" href="//static.ak.fbcdn.net"><!--DNS preftchを設定するドメインを記載-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--IEの利用可能な最新のレンダリングエンジンで表示-->
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="css/main.css">
<script src="/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script><!--様々なブラウザをHTML5とCSS3に対応させる
JavaScriptライブラリ-->
    </head>
    <body>
      <!--[if lt IE 8]>
            <p class="browserupgrade">お使いのブラウザは<strong>古いバージョン</strong>です。<a href="http://browsehappy.com/">ブラウザのバージョンアップ</a>をすることで、最適な環境で本ウェブサイトを閲覧することができます。どうぞお試しください。</p>
        <![endif]-->
      <header><!--サイト全体のヘッダー-->
                <h1 class="title">ページのh1タイトル</h1>
                <nav><!--サイト全体のナビゲーション-->
                    <ul>
                        <li><a href="#">nav1</a></li>
                        <li><a href="#">nav2</a></li>
                        <li><a href="#">nav3</a></li>
                    </ul>
                </nav>
      </header>
        
        <main><!--ページのメインコンテンツ部分-->
            <header><!--メインコンテンツのヘッダー(あってもなくてもOK-->
            </header>
                    <article><!--メインコンテンツの記事部分 H2等のタイトルが必要!単体でも内容が完結する部分-->
                        <h2>H2タイトル</h2>
                        <p>内容</p>
                        <section><!--記事の中のグループ分けなどで使用 H2などのタイトルが必要!-->
                            <h2>グループのH2タイトル</h2>
                            <p>内容</p>
                        </section>
                        <section><!--記事の中のグループ分けなどで使用 H2などのタイトルが必要!-->
                            <h2>グループのH2タイトル</h2>
                            <p>内容</p>
                        </section>
                        <section><!--記事の中のグループ分けなどで使用 H2などのタイトルが必要!-->
                            <h2>グループのH2タイトル</h2>
                            <p>内容</p>
                        </section>
                
                  </article>
            <footer><!--メインコンテンツのフッター(あってもなくてもOK-->
            </footer>
         </main>
                  
         <aside><!--サードバーやフッターなどのメインの記事と直接関係のない内容-->
         </aside>
         <footer class="wrapper"><!--ページ全体のフッター部分-->
               
         </footer>

        
    </body>
</html>

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

記事はありません

お探しの記事は見つかりませんでした。

東京・千葉の中国語教室

中国語教室