Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 you can use!

HTML5 you can use!

A brief overview on some of the new tags and features available in HTML5.

Ben Levy

April 02, 2014
Tweet

More Decks by Ben Levy

Other Decks in Programming

Transcript

  1. HTML5 you can use!
    Ben Levy April 2014

    View full-size slide

  2. Background
    HTML was primarily designed as a language for
    semantically describing scientific documents. HTML
    is now used to display all types of documents,
    interactive experiences, as well as audio and visual
    media. Development on HTML5 began in the Web
    Hypertext Application Technology Working Group
    (WHATWG) in 2004. HTML5 attempts to improve
    the language with support for the latest
    multimedia, while maintaining readability by
    humans and consistent rendering across devices.

    View full-size slide

  3. Simplified Doctype
    The doctype declaration for HTML5 has been
    simplified. This new declaration works with
    browsers that don't support HTML5 features too by
    forcing the browsers into strict mode.
    Browsers will interpret features they support and
    ignore anything else. Can I use... is a great resource
    for checking compatibility across browsers.


    View full-size slide

  4. Structure Tags
    Generic div elements are usually used to structure
    content on a page. HTML5 introduces semantic
    elements that more accurately describe the content
    in the element. Div elements can still be used when
    no other suitable element exists or when an
    element is needed only for styling purposes or as a
    convenience for scripting.

    View full-size slide

  5. Structure Tags
    The article element describes a self-contained
    composition in a document. The article element
    could be used for a magazine article, news story,
    blog entry, or any other independent item of
    content. The section element should be used for
    a generic document or application section. Each
    section should be identified with a heading (h1-
    h6) element.

    View full-size slide

  6. Structure Tags
    The header section element defines a page header
    and typically contains the site name, logo, and the
    site's navigation. The nav section element contains
    the navigational links for the page. There can be
    several nav sections in one page. The footer
    section element defines the page's footer and
    typically contains things like a copyright and legal
    notice. An aside section element defines a section
    that doesn't belong to the main flow (ex:
    information boxes and advertisements).

    View full-size slide

  7. Required Input Attribute
    The required Boolean attribute has been added to input
    elements and prevents form submission until the input has
    a value. When a user tries to submit a form without filling
    out a required input, the browser highlights the required
    inputs and instructs the user to fill them out.
    The required property cannot be used with input elements
    with the type of hidden, image, or a button type.

    View full-size slide

  8. Placeholder Input Attribute
    The placeholder attribute allows you to add informative
    text to an input element. The placeholder text appears in the
    input box until a user starts typing. The placeholder text does
    not act as a default and will not be submitted if the user does
    not enter any text.
    The placeholder does not replace a label for an input for
    various reasons. There are cases where the placeholder
    attribute is never displayed to the user and the inputs should
    be clearly identified even when the form is filled out.

    View full-size slide

  9. Autofocus Input Attribute
    The autofocus Boolean attribute specifies which
    form control should have focus when a page loads.
    A common practice is to set this on the form
    control that a user should fill out first.
    Only one form control in a document can have the
    autofocus attribute and the autofocus attribute
    cannot be applied if the type of the input is hidden.


    View full-size slide

  10. List Input Attribute
    The list attribute suggests a list of predefined
    options to the user. The value of the list should
    equal the id of the datalist element in the same
    document. The datalist element contains a set of
    options that will be used in the list.






    View full-size slide

  11. New Input Types
    HTML5 introduces a new set of possible type
    attributes for the input element. The new values for
    type include color, date, datetime, datetime-local,
    email, month, number, range, search, tel, time, url,
    and week. You can read more about these new
    input types here: http://html5doctor.com/html5-forms-input-types/

    View full-size slide

  12. Color Input Type
    The color input is used for specifying a color. This
    input type presents a color picker returns the
    selected the hex value of the selected color.

    View full-size slide

  13. Date Input Type
    The date input works similarly to date pickers that
    use JavaScript. The date type brings date picker
    controls and even supports minimum and maximum
    values.
    min="2014-12-01" max="2014-12-31">

    View full-size slide

  14. Email Input Type
    The email input type does basic validation for
    email addresses and also supports multiple email
    addresses when used with the multiple attribute.

    View full-size slide

  15. Number Input Type
    The number input type adds controls increment
    and decrement the value that is entered. This value
    can also be limited by with min and max values and
    the step can change the increment value.
    min="1" max="9999999">

    View full-size slide

  16. Range Input Type
    The range input type is similar to number type,
    but is useful for when a numeric value is within a
    given range and does not need an exact value.
    Browsers render simple slider controls rather than
    an input box.
    min="0" max="260">

    View full-size slide

  17. Tel Input Type
    The tel input type is for telephone numbers.
    name="phone_number">

    View full-size slide

  18. URL Input Type
    The url input type is for web addresses. Browsers
    do simple validation on this type. If the multiple
    attribute is used, multiple web addresses can be
    entered.

    View full-size slide

  19. Progress
    The progress element is used to show the completion
    progress of a task. The style of the bar varies across
    browsers, but the style can also be customized using
    CSS. The progress element has the optional attributes
    max and value. Max is a floating point number that
    indicates how much of the task must be performed for
    it to be considered complete. The default value for max
    is 1.0. The value attribute is a floating point number
    that indicates the current progress of the task. If the
    value is not present, the progress is considered
    indeterminate.

    View full-size slide

  20. Progress
    The HTML in between the progress tags is the
    fallback for browsers that do not support this
    feature.
    Chrome on Win 7 Firefox on Win 7 Safari on OS X
    75% Complete

    View full-size slide

  21. Audio
    The audio element now allows native audio playback without
    the use of plugins. The src attribute defines the location of
    the content. This location can also be defined in a source
    element. The HTML5 spec allows multiple sources and the
    browser will try each source (in order) until the browser finds
    an audio source it can play.
    The preload attribute can have the value "none",
    "metadata", or "auto". The none value does not preload the
    content, metadata just preloads the metadata, and auto lets
    the browser decide whether or not to preload the content file.

    View full-size slide

  22. Audio
    The controls, autoplay, and loop boolean attributes
    define whether or not the audio should display
    controls, begin playing automatically, and play
    repeatedly, respectively.
    The muted boolean attribute indicates whether or
    not the audio should be initially silenced (default is
    false). The volume attribute indicates the playback
    volume of the audio. The range for volume goes
    from 0.0 (silent) to 1.0 (loudest).

    View full-size slide

  23. Audio



    Your browser does not support native
    audio.

    View full-size slide

  24. Video
    The video element now allows native video
    playback without needing to use plugins (like
    Flash). The video element simplifies the syntax for
    embedding videos and aims to make it easier to
    show videos across many browsers. The src
    attribute defines the location of the content. This
    location can also be defined in a source element
    nested in the video element.

    View full-size slide

  25. Video
    The (optional) height and width attributes define the
    height and width of the video in CSS pixels. The poster
    attribute is a URL indicating a poster frame to show until the
    user plays or seeks. If this attribute isn't specified, nothing
    will be displayed until the first frame of the video is available.
    The preload attribute can have the value "none",
    "metadata", or "auto". The none value does not preload the
    content, metadata just preloads the metadata, and auto lets
    the browser decide whether or not to preload the content file.
    If the preload is not set, the default value is browser-defined.

    View full-size slide

  26. Video
    The controls, autoplay, and loop boolean attributes
    define whether or not the audio should display controls, begin
    playing automatically, and play repeatedly, respectively.
    The muted boolean attribute indicates whether or not the
    audio should be initially silenced (default is false).

    Your browser does not support native video.

    View full-size slide

  27. Demos
    Forms
    http://ben010783.github.io/html5-examples/forms.html
    Multimedia
    http://ben010783.github.io/html5-examples/multimedia.html

    View full-size slide

  28. Tools
    HTML5 Boilerplate
    http://html5boilerplate.com
    I want to use
    http://www.iwanttouse.com
    Modernizr
    http://modernizr.com
    HTML5test
    http://html5test.com

    View full-size slide

  29. Sources
    Mozilla Development Network
    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
    WHATWG
    http://www.whatwg.org
    The World Wide Web Consortium
    http://www.w3.org/TR/html5/
    Dive into HTML5
    http://diveintohtml5.info
    HTML5 Doctor
    http://html5doctor.com

    View full-size slide

  30. Questions?
    @ben010783

    View full-size slide