8/16/2021 CMP3772 Web Design and Programming Lecture 3 – More HTML and Semantic Elements In this session: • Block level vs. inline elements • <span> and <div> elements • Creating a basic web page layout • HTML Semantic Elements • Why use semantic elements Block level vs. inline elements • HTML elements are historically categorized as "block-level" or "inline-level" elements A block-level element: Inline-level elements: • starts on a new line • takes up the full width available • browser places a margin of whitespace between block elements for separation • may contain inline elements and other block-level elements • Examples include: <p>,<div>, <article>,<aside><lists> • • • • • can start anywhere in a line occupy space bounded by the tags defining the element browser allows many inline elements to appear on same line may contain only data and other inline elements Examples include: <a>, <span>, <bold>, <img> 1 8/16/2021 <span> and <div> elements • generic HTML elements that group related parts • serve different functions: • div: • used for block-level organization • styling of page elements • span • inline organization • also widely used for styling <span> and <div> elements What are semantic elements • HTML provides a standard way of describing content of a document • Semantic elements help describe this content better • A semantic element clearly describes its meaning both to the browser and developer • Examples of non-semantic elements: <div> and <span> • These elements do not describe the content – rely on ids or classes for description • E.g. <div id=“nav”>, <div id=“header”>, <div id=“footer”> 2 8/16/2021 Semantic Elements Element type Description <article> specifies independent, self-contained content such as a blogpost, forum post newspaper article <aside> Content other than page content <details> Additional details that the user can view or hide <figcaption> Caption for the <figure> element <figure> Self contained content <footer> Footer for section or document Semantic Elements Element type Description <header> header for a section or document used as a container for introductory content or a set of navigational links <main> Main content of the specified document <mark> Marked and highlighted text <nav> defines a set of navigation links <section> defines a section in a document <summary> Visible heading for the details element <time> Date/time Creating a basic web page layout • Layout considerations: • Various ways to create multi-column style layouts • Each way has its strengths and weaknesses <div id = “header”> <div id = “nav”> <div id = “section”> <div id = “aside”> <div id = “article”> <div id = “article”> <div id = “footer”> • Not all browsers are compatible with HTML5 • Some render HTML5 in limbo state • You may need specific code for backward compatibility • HTML5 is still under development 3 8/16/2021 General Outline of a document <body> <header> <!-- Header of the webpage body (e.g. logo, navigation bar) --> </header> <main> <!-- Main section of the webpage body (where most content is) --> </main> <footer> <!-- Footer of the webpage body (e.g. copyright info) --> </footer> </body> Using HTML5 Semantic Tags to Define Structure <header> <nav> <header> <main> <section> <aside> <main> <section> <footer> <footer> <article> • a self-contained composition in a document • Examples include: • a forum post, a magazine or newspaper article, or a blog entry 4 8/16/2021 <aside> • defines some content indirectly related to the surrounding content • often placed as a sidebar in a document. • does not render as anything special in a browser but can be styled using CSS <details> and <summary> • <summary> tag is used in conjuction with <details> to specify a visible heading for the details. • <details> tag specifies additional details that the user can open and close on demand • often used to create an interactive widget that the user can open and close. • The widget is closed by default but expands and displays the content within when opened Figure and figcaption • <figure> specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. • its position is independent of the main flow, and if removed it should not affect the flow of the document • Used with <figcaption> to add a caption for the <figure> element. 5 8/16/2021 <header> • represents a group of introductory content • typically contains: • • • • • • some heading elements a logo navigational aids a search form an author name, and other elements. <footer> • defines a footer for a document or section. • typically contains: • • • • • • authorship information copyright information contact information sitemap back to top links related documents • You can have several <footer> elements in one document. <main> • represents the dominant content of a document • commands presidential status • contains content directly related to or expands on central topic of a page • There should be no more than one instance • should not be included inside other elements e.g. nav • The content inside should be unique and not contain content that is repeated across pages ( e.g. sidebars, nav link, search bars, etc.) 6 8/16/2021 <nav> • provides navigation links to other documents or sections • Used for links to other pages, menus, tables of contents, and indexes. <section> • defines sections in a document • A section of a bigger whole such as chapters or any other sections of the document. • The <article> tag specifies independent, self-contained content • An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. • Potential sources for the article element: • • • • • Forum post Blog post News story Comment the only real difference between them are readability and design preference. Why use semantic elements? • Aids accessibility • Optimization of Searching • Semantic code is generally shorter • Easy to understand for other developers 7 8/16/2021 End of lecture 8
