- Slides: 14
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 <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 [email protected] com