HTML5

Introduction

HTML in short

  • Stands for HyperText Markup Language
  • Tim Berners-Lee specified HTML and wrote
    browser & server software late 1990
  • Written in tags, enclosed in angle brackets < >
  • HTML elements form the building blocks of all websites
  • Not all the browsers implement HTML in the same way

How to start

  • Specify DOCTYPE
  • HTML & lang attribute
  • Head
  • Body
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
        </head>
        <body>
        </body>
    </html>

DOCTYPE

  • It defines which version of HTML your document is using
  • It allows you to use tools as the Markup Validator to check the syntax of your HTML
  • It tells the browser how to render the page in standards compliant mode

    <!DOCTYPE html>

HTML & lang attribute

  • HTML5 allows you to put this on every element but isn't useful
  • Best to add it to the HTML tag <html> 
  • Keep it short

    <!DOCTYPE html>
    <html lang="en">
        <head>
        </head>
        <body>
        </body>
    </html>

    <!DOCTYPE html>
    <html lang="en-US">
        <head>
        </head>
        <body>
        </body>
    </html>

Head tag

  • Meta tags e.g. charset, viewport
  • Title
  • Stylesheet
  • JavaScript
    
    <head>
        <meta charset="utf-8">
        <title>Hi all!</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="js/whoop.js"></script>
    </head>

Body tag

  • Defines the document's body
  • Contains all the contents of an HTML document 
    
    <body>
    </body>
  • An ID is a unique identifier
  • Allows us to target a specific element on the page
  • Classes are used when you have the same element more than once on a page.
  • DRY

ID's vs Classes

    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>An ID is unique</title>
        </head>
        <body>
            <div id="unique">
            </div>
        </body>
    </html>
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>A class can be repeated</title>
        </head>
        <body>
            <div class="repeat">
            </div>
            <div class="repeat">
            </div>
        </body>
    </html>
  • A block element is displayed on a new line
  • Default 100% width of the containing element
  • <div></div>
  • <p></p>
  • An inline element is display with no line breaks
  • It starts on the same line with his own width
  • <span></span>
  • <img>

Block vs inline elements

<div></div>

<span></span>

<img>

<a href=""></a>

A few HTML5 elements

  • <header>
  • <main>
  • <section>
  • <article>
  • <nav>
  • <aside>
  • <footer>

<header>

  • Can be used for the header section of a page
  • Usually contains the section's heading
  • Can be used to wrap a section's table of content
    • search form
    • relevant logos

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <header>
                <h1>Hi all!</h1>
            </header>
        </body>
    </html>

<main>

  • Describes the primary content of a page
     
  • It represents its children

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <main>
                <!-- all other sections have to be placed in here -->
            </main>
        </body>
    </html>

<section>

  • Is a thematic grouping of content, with a heading
     
  • Sections would be chapters
    • the tabbed pages in a tabbed dialog box
    • the numbered sections of a thesis

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <section>
                <!-- all the content within this section has to be placed here -->
            </section>
        </body>
    </html>

<article>

  • It's independently distributable or reusable
     
  • Represents a component of a page that consists:
    • a forum post,
    • a magazine or newspaper article,
    • any other independent item of content.

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <article>
                <!-- all the content within this article has to be placed here -->
            </article>
        </body>
    </html>

<nav>

  • Represents a section with navigation links.
  • Not all groups of links on a page need to be in a nav element

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <nav>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                </ul>
            </nav>
        </body>
    </html>

<aside>

  • Consists of content related to the content around the aside element
  • Could be considered separate from that content.
  • If <aside> is placed inside <article> it has to be related
  • Can be used for advertising content
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <section>
                <aside>
                    <img src="images/competa_logo.svg" alt="Competa Logo" width="125" height="75">
                </aside>
            </section>
        </body>
    </html>

<footer>

  • Contains information about its section
  • Footers don’t necessarily have to appear at the end of a section
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <body>
            <footer>
                <!-- Place content of footer in here -->
            </footer>
        </body>
    </html>

How to convert a design into HTML

HTML5 introduction

By Kim Massaro

Made with Slides.com

HTML5 introduction

Introduction to HTML5 elements

  • 759

More from Kim Massaro