HTML5タグ

HTMLHTML5

目次一覧

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

<article>

<section>

figure / figcaption


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

 閲覧数:211 投稿日: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>

 閲覧数:137 投稿日: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>

 閲覧数:151 投稿日: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

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

内容


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


figurecaptionではない


→ figcaption


問題発生


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

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

原因
・不明

headingタグ

 閲覧数:78 投稿日: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">



週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新