Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
HTML5 STRUCTURE &SEMANTIC               by Muktadiur Rahman
Agenda    Structure    Block semantic element    Inline semantic element    Embedded media    Interactivity    Demo
Structure
Structure
Structure    <section>    <header >    <hgroup>    <footer>    <article>    <nav>
<section>   The section element represents a generic section of a    document or application. A section, in this context,...
<header>   A header element is intended to usually contain the    sections heading (an h1–h6 element or an hgroup    elem...
<hgroup>   The hgroup element represents the heading of a    section. The element is used to group a set of h1–h6    elem...
<footer>   The footer element represents a footer for its nearest    ancestor sectioning content or sectioning root eleme...
<article>   The article element represents a self-contained composition in    a document, page, application, or site and ...
<nav>   The nav element represents a section of a page that    links to other pages or to parts within the page: a    sec...
Block semantic element    <aside>    <figure>
<aside>   The aside element represents a section of a page    that consists of content that is tangentially related to   ...
<figure>   Specifies self-contained content, like    illustrations, diagrams, photos, code listings, etc
Inline semantic element    <mark>    <time>    <meter>    <progress>
<mark>   Defines marked/highlighted text
<time>   Defines a date/time
<meter>   Defines a scalar measurement within a known range    (a gauge)
<progress>   The progress element provides a simple and effective    way for a web designer to notify a user of their    ...
Embedded media    <audio>    <video>    <embed>
<audio>   Defines sound, such as music or other audio streams
<video>    Specifies video, such as a movie clip or other video    streams
<embed>   Defines a container for an external application or    interactive content (a plug-in)
Interactivity     <details>     <datalist>     <menu>     <command>
<details>   Defines additional details that the user can view or    hide
<datalist>   Specifies a list of pre-defined options for input    controls. This is used to provide an "auto complete"   ...
<menu>   In HTML 5, a menu contains command elements, each    of which causes an immediate action
<command>   Defines a command button that a user can invoke
demo   Demo on HTML5 Structure & Semantic
Thank You   Q/A
Prochain SlideShare
Chargement dans…5
×

Html5 structure & semantic

1 478 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

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

×