HTML 5 SEMANTIC ELEMENTS HTML INTRO HTMLHypertext Markup

HTML 5 SEMANTIC ELEMENTS

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 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 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

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 therefore making it more readable and easier to maintain.

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 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. ● The <nav> element is intended for major block of navigation links.

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 from the content it is placed in. ● Example: ● (like a sidebar)

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