[HTML5] 1. Semantics Tags

1. Semantics Tags

-  Semantics is the study of the meanings of words and phrases in language

-  Semantic elements are elements with a meaning

Example

- A semantic element clearly describes its meaning to both the browser and the developer

1) Non-semantic : <div> - Tells nothing about its content

2) Semantic : <form>, <table> <img> - Clearly defines its content

1_1. <section>

- The <section> elements defines a section in a document

- A section is a thematic grouping of content, typically with a heading

<section> <h1>Hello</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

1_2. <article>

- The element specifies independent, self-contained content

<article> <h1>Title</h1> <p>Contents</p> </article>  

You will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section>elements

also find pages with <section> elements containing <section> elements, and <article> elements containing <article> elements

1_3. <header>

- The element specifies a header for a documents or section

- You can have several <header> elements in one document

<article> <header> <h1>title</h1> <p>contents</p> </header> <p>contents</p> </article>  

1_4. <footer>

- The element specifies a footer for a document or section

- A footer typically contains the author of the document, copyright information, links...

<footer> <p>Posted by: Hee</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer>  

1_5. <address>

- The tag defines the contact information for the author / owner of a document or an article

- The text in the <address> element usually renders in italic

- The tag should not be used to describe a postal address, unless it is a part of the contact info

- The element will typically be included along with other info in a <footer> element

<address> Written by <a href="mailto:webmaster@example.com">Kyle</a>.<br> Visit us at:<br> Example.com<br> Seoul<br> </address>  

1_6. <nav>

- The element defines a set of navigation link

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

1_7. <aside>

- The element defines some content aside from the content it is placed in (like a sidebar)

<aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>  

1_8. <figure> and <figcaption>

- The purpose of caption is to add a visual explanation to an image

<figure> <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption> </figure>