1 / 12

New Semantic Elements (Part 1)

Learn the importance of semantic elements in HTML for improved website organization and accessibility. Explore the benefits of using semantic tags like <header>, <footer>, and <nav> to create well-structured web pages.

jtia
Download Presentation

New Semantic Elements (Part 1)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New Semantic Elements(Part 1)

  2. Semantics Explained The textbook definition of "semantics" is the study of the relationship between words and their meanings. In the context of HTML, a semantic element is one whose name describes its actual purpose. Think about the <div> element that we used extensively in XHTML. It's useful for defining a section of a web page but it does not indicate anything about the nature of the section itself. The new semantic elements in HTML5 better define and organize web documents.

  3. Benefits of Semantic Elements Pages become much easier to understand when it comes time to edit them in the future. This is especially true if someone other than the original programmer is doing the editing. Search engines can better understand our website's content. The better Google, Yahoo, and Bing can pinpoint what our pages are all about, the higher our pages will likely appear in the search results. Screen readers and assistive devices can more easily interpret the organization of a page, therefore presenting site content more effectively to disabled visitors.

  4. The Header Section in XHTML Remember how a typical XHTML web page defined the header section? <div class="header"> <h1>My Super Cool Website</h1> </div> And here's the CSS styling to define the height, width, and background color of the header section, as well as the text color and size of the <h1> heading: .header { height: 100px; width: 800px; background-color: #0033FF; } .header h1 { text-size: 24px; color: #CCCCCC; }

  5. The HTML5 <header> Element HTML5 now gives us a new semantic element for the header section: <header> <h1>My Super Cool Website</h1> </header> In the CSS style sheet, adding styling to the header section is done using the element itself, rather than via a <div> class. Notice there is no preceding dot: header { height: 100px; width: 800px; background-color: #0033FF; } header h1 { text-size: 24px; color: #CCCCCC; } The HTML5 page still looks identical to the XHTML page.

  6. The Footer Section in XHTML In XHTML, defining the footer section was done in a similar fashion: <div class="footer"> <p>&copy; 2013 SuperCool LLC</p> </div> Here is the corresponding CSS styling to the footer section and text: .footer { height: 40px; width: 800px; background-color: #0033FF; } .footer p { text-size: 16px; color: #CCCCCC; text-align: center; }

  7. The HTML5 <footer> Element HTML5 now provides us with a dedicated <footer> element: <footer> <p>&copy; 2013 SuperCool LLC</p> </footer> The CSS styling remains the same, but we are now styling the element directly, rather than a class: footer { height: 40px; width: 800px; background-color: #0033FF; } footer p { text-size: 16px; color: #CCCCCC; text-align: center; } Again, the two pages (XHTML and HTML5) look the same when rendered by a browser.

  8. Navigation in XHTML In XHTML, defining the navigation menu followed a similar path: <div class="nav"> <div class="navlink"> <a href="index.html">Home</a> </div> <div class="navlink"> <a href="page2.html">Page 2</a> ... </div> The CSS styled the <nav> class: .nav { border: 1px solid black; width: 798px; height: 35px; ... } .navlink { width: 199px; ... }

  9. The HTML5 <nav> Element HTML5 now provides us with the semantic <nav> element: <nav> <div class="navlink"> <a href="index.html">Home</a> </div> <div class="navlink"> <a href="page2.html">Page 2</a> ... </nav> The CSS now styles the <nav> element: nav { border: 1px solid black; width: 798px; height: 35px; ... } .navlink { width: 199px; ... }

  10. Revisiting the Header Element Since the header section often includes site navigation menus, let's go back to our simple site and move the <nav> within the <header>. The official W3C specification for the <header> element says that it "represents a group of introductory or navigational aids." The specification further states that, "A header element is intended to usually contain the section's heading (an h1–h6 element) but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos."

  11. Nesting <nav> Within <header> Here we have moved the navigation menu to be inside the <header> section: <header> <h1>My Super Cool Website</h1> <nav> <div class="navlink"> <a href="index.html">Home</a> </div> <div class="navlink"> <a href="page2.html">Page 2</a> ... </nav> </header> Many HTML5 web designers prefer to place the main site menu within the top header section, as we just did.

  12. Summary of Semantic Elements In the coming days, we will be learning about and using several more of the new semantic elements in HTML5. The new semantic elements in HTML5 add meaning to sections of a web document, assisting other programmers, search engines, and screen readers for the visually impaired. Just like the <div> elements they replace, the new semantic elements do not actually do anything that is visible on the web page. That is accomplished completely with CSS styling.

More Related