HTMLの基本構造

HTMLの基本的な構造

SEO対策は含めていません。

<!DOCTYPE html><!-- どのバージョンのHTMLか宣言 -->
<html lang="ja"><!-- html文書の開始(属性で日本語を指定) -->

<!-- ◇---------------------------------------◇ -->
<!-- ↓ head:HTMLの前書き -->
<head>
<!-- 文字コード指定:文字化け防止 --> <meta charset="UTF-8"> <!-- レスポンシブ対応:デバイスの幅を使うことを指定 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- サイトのタイトル --> <title>タイトルを入力</title> <!-- 説明文とキーワード --> <meta name="description" content="説明文を記述"> <meta name="keywords" content="検索ワードを記述"> <!-- リセットCSS --> <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> <!-- 自作CSS --> <link rel="stylesheet" href="css/style.css">
<!-- インラインCSSはここに貼り付け --> <!-- グーグルフォントを使用するならここに貼り付け --> <!-- 指定のリンクをここに貼り付け -->
<!-- フォントオーサムを使用する場合 --> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <!-- ファビコン --> <link rel="#" type="#" href="#"> </head>
<!-- ◇---------------------------------------◇ -->
<!-- ↓ body:HTML本文 -->
<body>  <header>   <!-- ロゴ -->   <h1><a href="index.html"><img src="#" alt="#"></a></h1>   <!-- ナビゲーション:右 -->   <nav>    <ul class="main-nav">     <li><a href="#">Home</a></li>     <li><a href="#">A</a></li>     <li><a href="#">B</a></li>    </ul>   </nav>  </header>  <!-- トップ画像 -->  <div id="main_image"><img src="" alt="メイン画像"></div>  <!-- ■ メイン -->  <main>   <article>    <section>     <h2>見出し</h2>       <p>記事<a href=""></a></p>    </section>    <section>     <h2>見出し</h2>
      <p>記事<a href=""></a></p>    </section>   </article>  </main><!-- メイン終 --> <!-- ■ サイドバー -->  <aside>   <ul>    <li><a href="#">お問い合わせ</a></li>    <li><a href="#">プロフィール</a></li>    <li><a href="#">□□はこちら</a></li>   </ul>  </aside><!-- サイドバー終 --> <!-- ■ フッター -->  <footer>  <small>© コピーライト表記</small>  </footer><!-- フッター終 --> </body> </html><!-- html文書の終了 -->



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です