HTML quick review

1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* CSS here. */ </style> </head> <body> HTML here. </body> </html> Always use utf-8 Correct width on mobile What you’ll write What you’ll write Start with this HTML boilerplate HTML is structure : hierarchy of elements HEADER FOOTER CONTENT HEADER FOOTER MAIN S I D E <header>HEADER</header> <div class="content"> <nav> Sidebar... </nav> <main> Article... </main> </div> <footer>FOOTER</footer> <header>HEADER</header> <div class="content"> Content... </div> <footer>FOOTER</footer> vertical divisions horizontal divisions CSS CSS Tags are used to create divisions. But why have so many tags? What you’ll learn Pt1. Language HTML quick review 2 <div> is division <p> Text is flowed into multiple lines. A <span>span of styled</span> text. </p> Text is flowed into multiple lines. A span of styled text. span { font-weight: bold; } <div> <div></div> <div></div> </div> or CSS for layout <div>-like tags <div> Generic division <p> Paragraph <h1>, <h2> Headings, level 1-6 <ol> Ordered list (numbered) <ul> Unordered list <li> List item <pre> Preserve spaces <header> Semantic tag <main> Semantic tag <footer> Semantic tag <nav> Semantic tag ... <span>-like tags <span> Generic span <a> Link to a URL <em> Emphasis <strong> Stronger emphasis <s> Strikethrough <code> Monospaced <sub> Subscript <sup> Superscript TM <b> Bold <i> Italic <marquee> You look ancient ... Why so many tags? ● Obvious functionality, e.g. <ol> , <li> , <a> . They are unavoidable. ● Predefined visual style, e.g. <h1> , <em> . Why use them if we can override? ● Tags with no function or style, e.g. <nav> , <main> . Why are they there? Semantic tags Optional tags with a “meaning” that is invisible to visual users, but that can make it easier for screen readers (for the blind) and keyboard navigation. Pt1. Language HTML quick review <span> is span