Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 structure & semantic


Published on

Published in: Technology
  • Be the first to comment

Html5 structure & semantic

  1. 1. HTML5 STRUCTURE &SEMANTIC by Muktadiur Rahman
  2. 2. Agenda  Structure  Block semantic element  Inline semantic element  Embedded media  Interactivity  Demo
  3. 3. Structure
  4. 4. Structure
  5. 5. Structure  <section>  <header >  <hgroup>  <footer>  <article>  <nav>
  6. 6. <section> The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading
  7. 7. <header> A header element is intended to usually contain the sections heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a sections table of contents, a search form, or any relevant logos
  8. 8. <hgroup> The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines
  9. 9. <footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like
  10. 10. <article> The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content..
  11. 11. <nav> The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links
  12. 12. Block semantic element  <aside>  <figure>
  13. 13. <aside> The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
  14. 14. <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc
  15. 15. Inline semantic element  <mark>  <time>  <meter>  <progress>
  16. 16. <mark> Defines marked/highlighted text
  17. 17. <time> Defines a date/time
  18. 18. <meter> Defines a scalar measurement within a known range (a gauge)
  19. 19. <progress> The progress element provides a simple and effective way for a web designer to notify a user of their progress regarding a specified task
  20. 20. Embedded media  <audio>  <video>  <embed>
  21. 21. <audio> Defines sound, such as music or other audio streams
  22. 22. <video> Specifies video, such as a movie clip or other video streams
  23. 23. <embed> Defines a container for an external application or interactive content (a plug-in)
  24. 24. Interactivity  <details>  <datalist>  <menu>  <command>
  25. 25. <details> Defines additional details that the user can view or hide
  26. 26. <datalist> Specifies a list of pre-defined options for input controls. This is used to provide an "auto complete" feature on <input> elements. Users will see a drop- down list of pre-defined options as they input data
  27. 27. <menu> In HTML 5, a menu contains command elements, each of which causes an immediate action
  28. 28. <command> Defines a command button that a user can invoke
  29. 29. demo Demo on HTML5 Structure & Semantic
  30. 30. Thank You Q/A