Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Html5 semantics

•Download as PPTX, PDF•
•

The document discusses HTML5 semantic and non-semantic elements. It defines semantic elements as those with inherent meaning, like <form> and <table>, while non-semantic elements like <div> and <span> do not convey meaning. New HTML5 semantic elements are introduced, including <section> for sections, <article> for independent content, <header> and <footer> for introductory and footer content, and <nav> for navigation links. Semantic elements are important for search engines and accessibility by clearly defining the meaning of different parts of a web page.

1 of 12
HTML 5 SEMANTICS & NON-SEMANTIC ELEMENTS
HTML5 Semantic Elements • Semantics is the study of the meanings of words and phrases in language. • Semantic elements are elements with a meaning.
What are Semantic Elements? • A semantic element clearly describes its meaning to both the browser ad the developer. • Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. • Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
New Semantic Elements in HTML5 HTML5 offers new semantic elements to define different parts of a web page: • <article> • <aside> • <details> • <figcaption> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time>
HTML5 <section> Element • The <section> element defines a section in a document. • "A section is a thematic grouping of content, typically with a heading." <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
HTML5 <article> Element • The <article> element specifies independent, self-contained content. • An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. <article> <h1>What Does ARTICLE Do?</h1> <p>This is the ARTICLE tag in HTML 5.</p> </article>
HTML5 <header> Element • The <header> element specifies a header for a document or section. • The <header> element should be used as a container for introductory content. • You can have several <header> elements in one document. <article> <header> <h1>What Does HEADER Tag Do?</h1> <p>Headers mission:</p> </header> <p>This is Header tag In HTML 5<p> </article>
HTML5 <footer> Element • The <footer> element specifies a footer for a document or section. • A <footer> element should contain information about its containing element. • You can have several <footer> elements in one document. <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer>
HTML5 <nav> Element • The <nav> element defines a set of navigation links. • The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element! <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
Why Semantic HTML5 Elements? • With HTML4, developers used their own favorite attribute names to style page elements: • header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ... • This made it impossible for search engines to identify the correct web page content.
Why Semantic HTML5 Elements? • With HTML5 elements like: • <header> <footer> <nav> <section> <article>, this will become easier. • "Allows data to be shared and reused across applications, enterprises, and communities."
Html5 semantics

More Related Content

Html5 semantics

  • 1. HTML 5 SEMANTICS & NON-SEMANTIC ELEMENTS
  • 2. HTML5 Semantic Elements • Semantics is the study of the meanings of words and phrases in language. • Semantic elements are elements with a meaning.
  • 3. What are Semantic Elements? • A semantic element clearly describes its meaning to both the browser ad the developer. • Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. • Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
  • 4. New Semantic Elements in HTML5 HTML5 offers new semantic elements to define different parts of a web page: • <article> • <aside> • <details> • <figcaption> • <figure> • <footer> • <header> • <main> • <mark> • <nav> • <section> • <summary> • <time>
  • 5. HTML5 <section> Element • The <section> element defines a section in a document. • "A section is a thematic grouping of content, typically with a heading." <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>
  • 6. HTML5 <article> Element • The <article> element specifies independent, self-contained content. • An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. <article> <h1>What Does ARTICLE Do?</h1> <p>This is the ARTICLE tag in HTML 5.</p> </article>
  • 7. HTML5 <header> Element • The <header> element specifies a header for a document or section. • The <header> element should be used as a container for introductory content. • You can have several <header> elements in one document. <article> <header> <h1>What Does HEADER Tag Do?</h1> <p>Headers mission:</p> </header> <p>This is Header tag In HTML 5<p> </article>
  • 8. HTML5 <footer> Element • The <footer> element specifies a footer for a document or section. • A <footer> element should contain information about its containing element. • You can have several <footer> elements in one document. <footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:someone@example.com"> someone@example.com</a>.</p> </footer>
  • 9. HTML5 <nav> Element • The <nav> element defines a set of navigation links. • The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element! <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>
  • 10. Why Semantic HTML5 Elements? • With HTML4, developers used their own favorite attribute names to style page elements: • header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ... • This made it impossible for search engines to identify the correct web page content.
  • 11. Why Semantic HTML5 Elements? • With HTML5 elements like: • <header> <footer> <nav> <section> <article>, this will become easier. • "Allows data to be shared and reused across applications, enterprises, and communities."