cotd6.pptx
- 1. 1 What are Semantic Elements? ● Clearly describe their meaning in a human- and machine-readable way. ● A semantic Web allows data to be shared and reused across applications, enterprises, and communities.
- 2. 2 Non-semantic elements ● Tells nothing about its content. ● E.g. <div>, <span>
- 3. 3 Non Semantic code ● <div id="nav"> ● <div class="header"> ● <div id="footer">
- 4. 4 Semantic elements ● Clearly define what kind of content is present inside ● E.g. <form>, <table>, and <article>
- 5. 5 HTML <section> Element styles ● Defines a section in a document. ● Typically a container with some content and a heading ● E.g. <section> <h1>About us</h1> <p>At Newton School, we are empowering people to become amazing full-stack developers that allow them to earn 5-40 Lakh per annum salary in top-notch companies in India.</p> </section>
- 6. 6 HTML <article> Element styles ● Defines an independent, self-contained content. ● Something that can exist independently from the rest of the web site. ● E.g. <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article>
- 7. 7 HTML <header> Element styles ● A container for header of a web application ● Usually has a logo, headings, set of navigational links etc. ● E.g. <header> <h1>Newton School</h1> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact us</a></li> </ul> </header>
- 8. 8 HTML <footer> Element styles ● Defines a footer for a document or section ● Usually contains copyright information, contact information, related links, back to top links etc. ● E.g. <footer> <p>Author: Hege Refsnes</p> <p><a href="mailto:hege@example.com">hege@example.com</a></p> <p>©Company A</p> </footer>
- 9. 9 HTML <nav> Element styles ● Defines a set of navigation links. ● Usually the links to different pages/sections of the website. ● E.g. <nav> <a href="/home">Home</a> | <a href="/about">About us</a> | <a href="/pricing">Pricing</a> | <a href="/contact">Contact us</a> </nav>
- 10. 10 HTML <aside> Element styles ● Content that is not part of the flow of the text in which it appears ● However still related in some way ● E.g. <aside> <p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p> </aside>
- 12. 12 HTML <time> Element styles ● Translate the time into a machine-readable format so that ● Browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results. ● E.g. <time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
- 13. Thank You