2. Semantic for IE

- Semantic tags wouldn't work on IE previous version 

1. how well does your browser support html5?

https://html5test.com

2. How to work on IE 

1) To use a javascript

- createElement()

  document.createElement('nav');
  document.createElement('footer');
  document.createElement('header');

 

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>  

To make a tab

1. Simple HTML

- View

2. border-top, height, background

2_1. View

2_2. Source

2_3. border

- border-style : set the style of the border

- border-top : set the top border

- border-top: border-width border-style border-color|initial|inherit;

- View

- Source

3. margin 0 auto

3_1. Source

- You can set the margin property to auto to horizontally center the element within its container

3_2. View

4. overflow : hidden

4_1. Source

4_2. View

4_3. Overflow

1) The overflow property specifies what to do if the content of an element exceeds the size of the element's box.

5. list-style, float

5_1. Source

5_2. View

5_3. list-style

- Specify all the list properties in one declaration

- View

5_4. float

- The float property specifies whether or not a box (an element) should float.

Note: Absolutely positioned elements ignores the float property!

6. background: url, display : block, vertical-align, text-align

6_1. Source

6_2. View

6_3. background: url() repeat-x left bottom

 - repeat-y will repeat a background image only vertically.

 - repeat-x will repeat a background image only horizontally.

 6_4. display: block

- Displays an element as a block element like <p>

7. !important

- First priority

8. background-position : left top

8_1. Source

8_2. View

8_3. background-position

1. Font-weight

ex) <span style="font-weight: bold;">Hello world</span>