html5 - Semantic tags

`<h2>`Heading for Article 1`</h2>`

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

`<h3>`Subheading for Article 1`</h3>`

<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>

`<h4>`Subsection`</h4>`

<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

`<h4>`Another subsection`</h4>`

<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

`<h3>`2nd subheading for Article 1`</h3>`

<p>This is the second subsection of my content. I think is more interesting than the last one.</p>

`<h2>`Heading for Article 2`</h2>`

`<h3>`Text Formatting`</h3>`

`<h4>`HTML headings`</h4>`

`<h2>`Heading 2`</h2>`

`<h3>`Heading 3`</h3>`

`<h4>`Heading 4`</h4>`

`<h5>`Heading 5`</h5>`

`<h6>`Heading 6`</h6>`

`<h4>`Paragraph`</h4>`

<p>I am a paragraph, oh yes I am.</p>

`<h4>`Emphasis and importance`</h4>`

<p>In HTML we use the <code><em></code> (<em>emphasis</em>) element to mark up such instances.</p>

<p>In HTML we use the <code><strong></code> (<strong>strong importance</strong>) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice.</p>

`<h4>`Italic, bold and underline`</h4>`

<p><code><i></code><i>is used: Foreign words, taxonomic designation, technical terms, a thought...</i></p>

<p><code><b></code><b>is used: Key words, product names, lead sentence...</b></p>

<p><code><u></code><u>is used: Proper name, misspelling...</u></p>

`<h4>`Others`</h4>`

<p>Here below is a blockquote..</p>

<p>According to the <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'> <cite>MDN blockquote page</cite></a>: </p>

<blockquote cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote'>
<p>The <strong>HTML <code><blockquote></code> Element </strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code><q></code> — is <q cite='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q'>intended for short quotations that don't require paragraph breaks.</q> -- <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q'> <cite>MDN q page</cite></a>.</p>

<p>Another fairly common element you'll meet when looking around the <abbr title='World Wide Web'>WWW</abbr> is <code><abbr></code> — this is used to wrap around an abbreviation or acronym, and provide a full expansion of the term (included inside a title attribute).</p>

`<h3>`Links`</h3>`

<p>This is a link to <a href='https://www.mozilla.org'>Mozilla.</a></p>

<p>Another link, to the <a href='https://developer.mozilla.org'>Mozilla Developer Network.</a></p>

<p>Another, to <a target='_blank' href='https://www.wikipedia.org/'>Wikipedia (opens in a new window).</a></p>

`<h3>`List`</h3>`

<li>header</li>
<li>Navigation bar</li>
<li>Main content
- <li>Article 1</li>
- <li>Article 2
  - <li>Section 1</li>
  - <li>Section 2</li>
  - <li>Section 3</li>
  - <li>Section 4
    - <li>Section 4.1</li>
    - <li>Section 4.2</li>
    - <li>Section 4.3</li>
    </li>
  - <li>Section 5</li>
  - <li>Section 6</li>
  - <li>Section 7</li>
  - <li>Section 8</li>
  </li>
- <li>Div elements </li>
</li>
<li>Sidebar</li>
<li>Footer</li>

<li>header</li>
<li>Navigation bar</li>
<li>Main content
1. <li>Article 1</li>
2. <li>Article 2
  1. <li>Section 1</li>
  2. <li>Section 2</li>
  3. <li>Section 3</li>
  4. <li>Section 4
    1. <li>Section 4.1</li>
    2. <li>Section 4.2</li>
    3. <li>Section 4.3</li>
    </li>
  5. <li>Section 5</li>
  6. <li>Section 6</li>
  7. <li>Section 7</li>
  8. <li>Section 8</li>
  </li>
3. <li>Div elements </li>
</li>
<li>Sidebar</li>
<li>Footer</li>

`<h3>`Basic Table`</h3>`

`<tr><td>` Name`</td>`	`<td>` Age`</td>`	`<td>` Gender`</td></tr>`
`<tr><td>` Gabriel`</td>`	`<td>` 13`</td>`	`<td>` Male`</td></tr>`
`<tr><td>` Elva`</td>`	`<td>` 8`</td>`	`<td>` Female`</td></tr>`
`<tr><td>` Freida`</td>`	`<td>` 5`</td>`	`<td>` Female`</td></tr>`

`<h3>`Buttons`</h3>`

`<h3>`Basic Form`</h3>`

Personal Information Full Name Email

Credit Card Information Credit Card Number

Please leave your comments or questions here

Can we add you to our email mailing list?

<li> <label> <input> Yes </label> </li>
<li> <label> <input> No </label> </li>

Which topics interest you?

<li> <label> <input> Science </label> </li>
<li> <label> <input> Programs for Children </label> </li>
<li> <label> <input> New Events </label> </li>

Choose from the following:

`<h3>`Figure/Image`</h3>`

Semantic elements laying out a page by w3schools — `<figcaption>`An example of semantic element layout by w3schools. `</figcaption>`

<p>The <figcaption> element tells browsers, and assistive technology that the caption describes the other content of the <figure> element.</p>

`<h3>`SVG`</h3>`

`<h2>`Aside`</h2>`

<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>

<h2>Heading for Article 1</h2>

<h3>Subheading for Article 1</h3>

<h4>Subsection</h4>

<h4>Another subsection</h4>

<h3>2nd subheading for Article 1</h3>

<h2>Heading for Article 2</h2>

<h3>Text Formatting</h3>

<h4>HTML headings</h4>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<h4>Paragraph</h4>

<h4>Emphasis and importance</h4>

<h4>Italic, bold and underline</h4>

<h4>Others</h4>

<h3>Links</h3>

<h3>List</h3>

<h3>Basic Table</h3>

<h3>Buttons</h3>

<h3>Basic Form</h3>

<h3>Figure/Image</h3>

<h3>SVG</h3>