navとliを比較してみたら面白かった。

<nav> element

navとliを比較してみたら面白かった。

HTML| JavaScript| jQuery

• HTML|
• JavaScript|
• jQuery

同じことを表現出来ていますが、上のは<nav>を用いており、コードで表現すると、

<nav>
<a href="/html">HTML</a>|
<a href="js">JavaScript</a>|
<a href="jquery">jQuery</a>
</nav>

• HTML|
• JavaScript|
• jQuery

ちょっとズレた方のコードは

<ul>
 <li style="display: inline;"><a href="/html/">HTML</a>|</li>
 <li style="display: inline;"><a href="js">JavaScript</a>|</li>
 <li style="display: inline;"><a href="jquery">jQuery</a></li>
</ul>

こんな感じに。書く量が圧倒的にnavの方が少ないですね。

ちなみに、下のは<div>で囲っただけの<li>です。

HTML

JavaScript

jQuery

<div>
 <li><a href="/html/">HTML</a></li>
 <li><a href="js">JavaScript</a></li>
 <li><a href="jquery">jQuery</a></li>
 </div>

同じようなのを<nav>を使って表現しようとすると、

HTML

JavaScript

jQuery

<nav>
 <li><a href="/html/">HTML</a></li>
 <li><a href="js">JavaScript</a></li>
 <li><a href="jquery">jQuery</a></li>
</nav>

<li>を<nav>でかこってやるだけで縦型の表現が出来ました。面白い。

でも、<li>にはリスト表示という役割があって、<nav>にはHTML5から導入された主要項目へのジャンプリストと言う役割があり、いつでも<nav>を使っていいという訳ではないようです。

<ruby> ルビのこと

1| <ruby>
2| 漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp>
3| </ruby>

<rp>の前にルビを振りたい”漢字”を置き、
(</rp><rt>の後に（読みがなである）”かんじ”を置く。<rt>でくくったから</rt>で閉じ、
一度閉じてしまっているからもう一度</rp>で閉じる。

summary tag

summary tag defines a visible heading for th <details> element.
The <summary> shows and hides the details by user's mouse click.

Copyright 1999-2014.

- by Refsnes Data. All Right Reverved.

All content and graphics on w3schools.com are the property of the company Refsens Data.

<article> , or <secton>

Example of a newspaper or magazine:
The sprot<artile> has about baseboll and football, etc and each <artilce> has <section> has about what team did, who did what.
Or each team/genre's <section> have <article>.

<figure> and <figcapution>

<figure>
<img src="URL" alt="imgの名前など" style="width: 80%;">
<figcaption>imgの詳細</figcaption>
</figure>