HTML5 New Elements







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });




HTML5 New Elements



❮ Previous
Next ❯


New Elements in HTML5


Below is a list of the new HTML5 elements, and a
description of what they are used for.



New Semantic/Structural Elements


HTML5 offers new elements for better document structure:



























































































TagDescription
<article>Defines an article in a document
<aside>Defines content aside from the page content
<bdi>Isolates a part of text that might be formatted in a different direction
from other text outside it
<details>Defines additional details that the user can view or hide
<dialog>Defines a dialog box or window
<figcaption>Defines a caption for a <figure> element
<figure>Defines self-contained content
<footer>Defines a footer for a document or section
<header>Defines a header for a document or section
<main>Defines the main content of a document
<mark>Defines marked/highlighted text
<meter>Defines a scalar measurement within a known range (a gauge)
<nav>Defines navigation links
<progress>Represents the progress of a task
<rp>Defines what to show in browsers that do not support ruby annotations
<rt>Defines an explanation/pronunciation of characters (for East Asian
typography)
<ruby>Defines a ruby annotation (for East Asian typography)
<section>Defines a section in a document
<summary>Defines a visible heading for a <details> element
<time>Defines a date/time
<wbr>Defines a possible line-break

Read more about HTML5 Semantics.








googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





New Form Elements















TagDescription
<datalist>Specifies a list of pre-defined options for input controls
<output>Defines the result of a calculation

Read all about old and new form elements in HTML Form Elements.




New Input Types












New Input TypesNew Input Attributes


  • color

  • date

  • datetime

  • datetime-local

  • email

  • month

  • number

  • range

  • search

  • tel

  • time

  • url

  • week




  • autocomplete

  • autofocus

  • form

  • formaction

  • formenctype

  • formmethod

  • formnovalidate

  • formtarget

  • height and width

  • list

  • min and max

  • multiple

  • pattern (regexp)

  • placeholder

  • required

  • step



Learn all about old and new input types in
HTML Input Types.



Learn all about input attributes in HTML
Input Attributes.




HTML5 - New Attribute Syntax


HTML5 allows four different syntaxes for attributes.


This example demonstrates the different syntaxes used in an <input> tag:























TypeExample
Empty<input type="text" value="John" disabled>
Unquoted<input type="text" value=John>
Double-quoted<input type="text" value="John Doe">
Single-quoted<input type="text" value='John Doe'>

In HTML5, all four syntaxes may be used, depending on what is
needed for the attribute.




HTML5 Graphics















TagDescription
<canvas>Draw graphics, on the fly, via scripting (usually JavaScript)
<svg>Draw scalable vector graphics

Read more about HTML5
Canvas.


Read more about HTML5
SVG.



New Media Elements



























TagDescription
<audio>Defines sound content
<embed>Defines a container for an external (non-HTML) application
<source>Defines multiple media resources for media elements (<video> and <audio>)
<track>Defines text tracks for media elements (<video> and <audio>)
<video>Defines video or movie

Read more about HTML5 Video.


Read more about HTML5 Audio.





❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more