HTML5タグ

HTMLHTML5

目次一覧

 状態:-  閲覧数:2,643  投稿日:2015-10-13  更新日:2020-03-31
使用した方が良いと思われる HTML5タグ / <nav> / <main>

<article>

<section>

figure / figcaption


使用した方が良いと思われる HTML5タグ / <nav> / <main>

 閲覧数:542 投稿日:2015-10-13 更新日:2020-03-31

使用した方が良いと思われる HTML5タグ


header
nav
main
article
section
figure
figcaption

<nav>


要点
・<header>に入れても入れなくても良い
・複数設置可

コード例
<!DOCTYPE html>
<html lang="en">
 <head>
   <title></title>
 </head>
 <body>

   <header>The Lawson Academy:
   <nav>
     <ul>
       <li><a href="courses.html">Courses</a></li>
     </ul>
   </nav>
   </header>

   <main>

     <h1>Graduation</h1>

     <nav>
       <ul>
         <li><a href="#ceremony">Ceremony</a></li>
       </ul>
     </nav>

     <h2 id="ceremony">Ceremony</h2>
     <p>Opening Procession</p>

     <h2 id="graduates">Graduates</h2>
     <ul>
       <li>Eileen Williams</li>
     </ul>

     <h2 id="awards">Awards</h2>
     <ul>
       <li>Clara Faulkner</li>
     </ul>

   </main>

   <footer></footer>

 </body>
</html>


4.4. Grouping content

<main>


main要素
body 要素(<body>)の主な内容を表す

具体的には?
「トピックの主なコンテンツ」や「アプリケーションの中心的な機能に直接関連する内容」で構成

入れ子
・NG
※そもそも<main>タグは複数使用不可
<main></main>

常に親要素
・<article>, <aside>, <footer>, <header>,<nav> これら要素の子孫に含めることは出来ない

常に1つ
・ドキュメントに main 要素を 1 つしか入れてはいけない
・複数の main 要素を含めることはできない

コード例
<main>
   <h1>リンゴ</h1>
   <p>リンゴはりんごの木の果実です。</p>
  
   <article>
     <h2>レッドデリシャス</h2>
     <p>海外では有名なりんご</p>
     <p>発色がかなり強い</p>
     <p>暗い赤色</p>
   </article>

   <article>
     <h2>ゴールデンデリシャス</h2>
     <p>実が黄色い</p>
     <p>味はとても甘い</p>
     <p>皮や実が柔らかい</p>
   </article>

</main>



<main>

<article>

 閲覧数:452 投稿日:2017-01-25 更新日:2020-03-31

article要素


ドキュメント、ページ、アプリケーション、あるいはサイトの中で自己完結した構成物を表す
・独立して配布可能なもの
・ブログやニュース記事のように、それ単体で意味をなすもの

<article>の子要素
・見出し (<h1>-<h6> element) を含む

入れ子
・OK
<article><article></article></article>


コード例


<article class = "cartoon_review">
   <header>
     <h2>はじめの一歩</h2>
   </header>
   <section class = "main_review">
     <p>はじめの一歩見た今ならデンプシーロール打てそうな気がする✊</p>
   </section>
   <section class = "user_reviews">
     <article class = "user_review">
       <p>ドラゴンボール読み終わったあとにかめはめ波撃てそうな錯覚に陥る奴か</p>
       <footer>
         <p>
           宇野さんによって<time datetime = "2015-05-16 19:00"> 5月16日</time>に投稿されました。
         </p>
       </footer>
     </article>
     <article class = "user_review">
       <p>えっ かめはめ波とデンプシーロールとフリッカーはみんなするよね?!</p>
       <footer>
         <p>
           美空さんによって<time datetime = "2015-05-17 19:00"> 5月17日</time>に投稿されました。
         </p>
       </footer>
     </article>
   </section>
   <footer>
     <p>
       スタッフによって<time datetime = "2015-05-15 19:00"> 5月15日</time>に投稿されました。
     </p>
   </footer>
</article>

article

<section>

 閲覧数:458 投稿日:2017-01-25 更新日:2020-03-31

section要素


見出しを伴う意味的なグループ化が可能な、文書の一般的なセクションを表す
コンテンツをまとめる

簡単に言えば?
・内容を分割する際に使用

<section> の子要素
・見出し (<h1>-<h6> 要素) を含めるべき

入れ子
・OK
<section><section></section></section>


注意


<section> 要素の内容が単独で意味を成す集合の場合
・section 要素より <article> 要素の使用がより適している

単なる汎用コンテナとして使用するのは誤り
・汎用コンテナは、従来通り<div>


コード例


<section>
 <h1>Heading</h1>
 <p>Bunch of awesome content</p>
</section>


<section>
 <h2>Heading</h2>
 <img>some image</img>
</section>


section 要素
HTML Standard 日本語訳

figure / figcaption

 閲覧数:465 投稿日:2017-01-25 更新日:2017-01-25

内容


画像/動画やコードなどのコンテンツとキャプションをまとめる


figurecaptionではない


→ figcaption


問題発生


記述
<p><figure><figcaption></figcaption></figure></p>

コンソール表示
<p></p><figure><figcaption></figcaption></figure><p></p>

原因
・不明

headingタグ

 閲覧数:373 投稿日:2020-04-28 更新日:2020-04-28
<!DOCTYPE html>
<html lang="en">
<title>RPG System 17</title>
<style>
header, nav, aside, main, footer {
margin: 0.5em; border: thin solid; padding: 0.5em;
background: #EFF; color: black; box-shadow: 0 0 0.25em #033;
}
h1, h2, p { margin: 0; }
nav, main { float: left; }
aside { float: right; }
footer { clear: both; }
</style>
<header>
<h1>System Eighteen</h1>
</header>
<nav>
<a href="../16/">← System 17</a>
<a href="../18/">RPXIX →</a>
</nav>
<aside>
<p>This system has no HP mechanic, so there's no healing.
</aside>
<main>
<h2>Character creation</h2>
<p>Attributes (magic, strength, agility) are purchased at the cost of one point per level.</p>
<h2>Rolls</h2>
<p>Each encounter, roll the dice for all your skills. If you roll more than the opponent, you win.</p>
</main>
<footer>
<p>Copyright © 2013
</footer>
</html>

HTML Standard 日本語訳


iframe経由で読み込んでいるページへ直接アクセスした場合は、トップページへリダイレクト

HTML5は<input multiple>、XHTMLは<input multiple="multiple">



週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新