Devsketch's Learning Station
HTML5 and CSS3

1. HTML5 and CSS

My Files

Original Student Files

Differences to note in HTML5

  1. The align attribute has been removed, use CSS instead.
  2. No / needed for tags that don't need a closing tag. <br> <hr> <meta>
  3. <blockquote> : Used for a block of quoted text, ONLY!
  4. Use <em> if you are emphasizing something.
  5. Use <strong> if you are stating something important.
  6. Use i for italics or b for bold, only if you just want to do so visually, but then ask yourself, why are you doing that? Is it because of emphasis or importance or perhaps something else.
  7. New phrase elements (similar to em and strong):
    1. abbr: abbreviation
    2. b: bold text, just to style
    3. cite: citation or reference
    4. code: identifies code
    5. dfn: definition of a word or term
    6. em: text to be emphasized
    7. i: italic text, just to style
    8. kbd: identifies keyboard input, like Ctrl+C
    9. mark: highlights text in order to be easily referenced
    10. samp: shows program sample output
    11. small: defines a smaller text, like this should be smaller
    12. strong: shows strong importance
    13. sub: subscript, small text below the baseline
    14. sup: superscript, small text above the baseline
    15. var: identifies and displays a variable output
    16. And many more...
  8. Ordered List "type=" attribute:
    1. 1: Numerals (default)
    2. A: Uppercase Letters
    3. a: Lowercase Letters
    4. I: Uppercase Roman numerals
    5. i: Lowercase Roman numerals
  9. Ordered lists also have a start= attribute, on what number to start. It also has a reversed="reversed" attribute, to indicate a list is in descending order.
  10. Unordered Lists:
    • To change the list marker (bullet) in HTML5, do NOT do so by "type", instead use CSS.
    • The type attribute is obsolete in HTML5 for unordered lists
  11. Description Lists <dl>:
    The Term <dt>
    The definition goes in after the term tag has closed. The definition tag is <dd>.
  12. Anchor tags <a>, can now include divs, h1, paragraphs, etc. inside the anchor tags, you will then be able to click anywhere you want within them to go to the link, including whitespace.
  13. Structural HTML elements
    <header>
    Contains the header of the web page or section or article of the document, often includes a heading level element h1-h6.
    <nav>
    Contains a section of navigational links.
    <main>
    Contains the main content of the web page
    <div>
    Not used as often. The other tags would be used instead, especially section.
    <section>
    Used to divide sections of a document, chapter, or topics.
    <article>
    Presents independent entries, such as blog posting, comment, or e-zine articles that could stand on their own.
    <aside>
    Indicates a sidebar.
    <footer>
    Contains the footer of the page, could be combined with small to display copyright.