HTML 5 SEMANTIC ELEMENTS HTML INTRO HTMLHypertext Markup

  • Slides: 14
Download presentation
HTML 5 SEMANTIC ELEMENTS

HTML 5 SEMANTIC ELEMENTS

HTML INTRO HTML(Hypertext Markup Language) is the standard markup language for creating web pages

HTML INTRO HTML(Hypertext Markup Language) is the standard markup language for creating web pages and web applications. ● HTML elements are the building blocks of HTML pages. ● Original HTML had 20 tags and displayed simple text with basic markup formatting.

HTML 5 SEMANTICS ELEMENTS • Semantics is the study of the meanings of words

HTML 5 SEMANTICS ELEMENTS • Semantics is the study of the meanings of words and phrases in a language. i. e. Semantic elements = elements with a meaning. • A semantic element clearly describes its meaning to both the browser and the developer. • Examples of semantic elements : <img> , <form> , <table> i. e. these elements define its contents clearly.

NON-SEMANTICS ELEMENTS ● Non-semantic elements generally tells nothing much about its content. ● Traditionally

NON-SEMANTICS ELEMENTS ● Non-semantic elements generally tells nothing much about its content. ● Traditionally developers have implemented non-semantic elements with a class attribute to define the structure and express the meaning of content. ● Examples of non-semantics elements are : <div> and <span> i. e. these elements tells nothing about its content.

HTML 4 AND HTML 5 COMPARISON

HTML 4 AND HTML 5 COMPARISON

SEMANTIC TAGS Semantic elements are used to clearly define different parts of a web

SEMANTIC TAGS Semantic elements are used to clearly define different parts of a web page: ● ● ● ● <header> <nav> <section> <article> <aside> <footer> Many more. . .

Why Semantic Elements? HTML 5 semantic elements help structure the code we create, and

Why Semantic Elements? HTML 5 semantic elements help structure the code we create, and therefore making it more readable and easier to maintain.

HTML 5 <header> ELEMENT ● The <header> element specifies a header for a document

HTML 5 <header> ELEMENT ● The <header> element specifies a header for a document or a section. ● For introductory content <header> element should be used as container. ● We can have several <header> elements in one document.

HTML 5 <footer> ELEMENT ● The <footer> element specifies a footer for a document

HTML 5 <footer> ELEMENT ● The <footer> element specifies a footer for a document or a section. ● A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. ● We can have several <footer> elements in one document.

HTML 5 <nav> ELEMENT ● The <nav> element define a set of navigation links.

HTML 5 <nav> ELEMENT ● The <nav> element define a set of navigation links. ● The <nav> element is intended for major block of navigation links.

HTML 5 <section> ELEMENT ● "A section is a thematic grouping of content, typically

HTML 5 <section> ELEMENT ● "A section is a thematic grouping of content, typically with a heading. " ● The <section> element defines a section in a document. ● Example: A home page could normally be divided into sections for introduction, content, and contact information.

HTML 5 <aside> ELEMENT ● The <aside> element defines the content which is aside

HTML 5 <aside> ELEMENT ● The <aside> element defines the content which is aside from the content it is placed in. ● Example: ● (like a sidebar)

HTML 5 <article> ELEMENT ● The <article> element specifies independent, self-contained content. ● An

HTML 5 <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. ● Examples of where an <article> element can be used: ● Blog post ● Newspaper article

THANK YOU! For queries & information +91 -9599444523 contactus@dignitasdigital. com

THANK YOU! For queries & information +91 -9599444523 [email protected] com