HTML5 is sure to be a big hit this year as far as web design trends
go, and rightfully so. It’s new, exciting, easy to understand and better
than anything that has come before it. Up until recently, we have had
to navigate a grey area in terms of compatibility and definition, and as
a result, many of the early adoptions of HTML5 have been partial or
complete disasters.
The first thing to understand is where HTML5 ends and CSS3 begins. HTML5 is just the markup – a set of standards that define how a document should be structured and how browsers should interpret it. Rather than shouldering all the responsibility for presentation and functionality, HTML5 gets back to basics, allowing us to tap into APIs and native browser functionality, while looking to CSS to create the visual look and feel. In the end we are left with a straight-forward and simplified language for creating websites and applications.
Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade.
Another option is to use an HTML5 design application to build valid websites without worrying about coding it yourself. Unfortunately there are only a few tools available such as Adobe’s Muse and Edge previews (which won’t be fully released for some time yet) and single-purpose web generators. To answer the call of front-end designers everywhere, Wix had launched the very first, full-featured HTML5 website building application on March 26th that allows you to create complete websites online. This tool can significantly change how you design, giving you a visual editor for creating and styling elements, using drag and drop for arranging layouts and adding widgets. You will also get access to a library of interactive canvas elements and animations, CSS3 effects and add-ins such as HTML5 audio, video, slideshows, forms and more. Visit the Wix website to learn more and sign up to be the first to explore this new technology.
The benefit of using a framework or HTML5 application is a more efficient workflow and consistent results. It is still important to understand the semantics, limitations and possibilities of HTML5, but as a front-end designer there is no shame in keeping your focus on what you do best.
<header>
Not to be confused with <head>, this element designates the header, or top part, of an element or layout and can be used independently or within other elements.
<hgroup>
Used inside the <header>, the <hgroup> designates a grouping of header tags to help preserve typographical hierarchy and allow the browser to prioritize them as a group rather than individually. For example, you may have an H2 element as a page heading, then use another H2 for post titles, followed by an H3 for the author. The second H2 and H3 should be wrapped in an <hgroup> within a <header>.
<nav>
This element indicates a navigation menu, and should encapsulate an unordered list in most cases. The <nav> element can be used independently or within other elements, such as <aside>. A group of links grouped together in your content isn’t enough reason to use the nav element. Site-wide navigation, or sub-navigation does belong in a nav element.
<section>
Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”
<article>
This tag represents an independent piece of content , such as a blog post or news article. It is almost always placed inside a <section>, but it isn’t required..
<aside>
The <aside> is most easily compared to a sidebar or any area containing content that is not directly related to the <article> or primary content displayed on the page. How your site is structured will depend on how you use the <aside>, but common practice either uses it to contain an unordered list of secondary elements, or places it inside a <section>, using the <aside> to contain each "block" of content. However,just because some content appears to the left or right of the main content isn’t enough reason to use the <aside> element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content.
<footer>
Like the header, the
<figure> & <figcaption>
Not well understood and under-used,
All of these elements are styled in CSS as base classes, and only
require an additional ID or class if used repeatedly within a document,
or specific styles need to be applied to one element.
When used properly, HTML5 elements greatly reduce the need for DIVs and other unnecessary elements. To build the most efficient markup possible, avoid using the
Here is an example of a basic HTML5 document structure:
The CSS would look something like this:
…and you get the idea. Not all CSS features are supported in all
browsers with HTML5 yet, so it is important to get familiar with common
issues and verify anything you’re not sure of before implementing it
into your design.
Best practices from HTML4 can still be carried over into the HTML5 world when writing your markup. Even though HTML5 is more forgiving of case, quotes and tag closing, continue to:
In addition to the script, providing conditional statements for Internet Explorer is smart, as plenty of web users are still confined to these older browser versions. By separating special styles and fixes for IE versions, you can easily remove them later as the versions become obsolete.
Example:
Unless you use a CSS reset, ensure you include a line in your stylesheet that applies a
HTML5 has none of the presentational attributes that were in HTML4 such as
HTML5 has also removed, changed or depreciated over 50 attributes.
The following attributes are allowed but it is best to use an
alternative solution:
The WAI ARIA specification defines a set of specialised “landmark” roles that can be combined with HTML elements to help assistive technologies provide users with features they can use to identify and navigate between sections of page content more easily. To implement roles, you simply add the role attribute and the element’s appropriate value.
Here is a list of common elements used with HTML5 web design and the corresponding roles:
Here is how transitions look in CSS3:
By adding the toggling the classes of totheleft and totheright,
you can move the box around. Compare this amount of code with that of a
JavaScript animation library. There is also an added performance
increase in terms of how the animation rendering in the browser affects
your hardware’s graphic processing capabilities.
HTML5 also gives us extended power over the draggable attribute.
This attribute can be added to any element, and when combined with CSS, allows us to create native drag and drop functionality without depending on JavaScript plugins or APIs.
CSS3 brings a new way of creating visual information for the web that can replace a large percentage of elements used in design including buttons, sprites, vectors and virtually any interface element. Here are a few of the things you can do with CSS3 in HTML5 that you needed JavaScript or plugins for in the past:
Opera’s Bruce Lawson explains,"In this example, Opera, Firefox and Chrome will download the Ogg version of Master Bieber’s latest toe-tappin’ masterpiece, while Safari and IE will grab the MP3 version. Chrome can play both Ogg and MP3, but browsers will download the first source file that they understand.
The fallback content between the opening and closing tags is a link to download the content to the desktop and play it via a separate media player, and it is only shown in browsers that can’t play native multimedia:"
The same concept should be applied to the <video> element as
well so that users of older browsers such as IE7 will see a YouTube
video, while those using the newest Opera, Firefox or Chrome will get
the native player and content streamed directly from the website:
Here is a quick overview of what is new to forms in HTML5:
New form attributes:
The first step to better performance is to minimize and combine your code into as few files as you can. Since this process makes it absolutely maddening to do updates later on, always keep an "unminizmied" copy of your site and combine things down as the last step before publication. Minimizing includes the combining of all stylesheets and Javascripts into one file, or the removal of unneeded characters and spaces.
In the case of JavaScript in particular, optimizing the files and load order will gain the best results, since browsers can’t do anything while JavaScript is being downloaded. All scripts should be loaded from the footer of the document rather than the traditional place in the head under your stylesheets, with the exception of the HTML5 Shiv. You should also avoid linking to external scripts, even though it has become common practice to do this with Google libraries, for example.
This strategy isn’t always possible with all scripts, depending on their compatibility with one another, but the more you can get loading last and fast, the better.
The first thing to understand is where HTML5 ends and CSS3 begins. HTML5 is just the markup – a set of standards that define how a document should be structured and how browsers should interpret it. Rather than shouldering all the responsibility for presentation and functionality, HTML5 gets back to basics, allowing us to tap into APIs and native browser functionality, while looking to CSS to create the visual look and feel. In the end we are left with a straight-forward and simplified language for creating websites and applications.
Learning as much as you can about HTML5 and following these basic practices will help you produce websites with high quality markup and improve your overall design and development process without running into the common pitfalls that have plagued the web for over a decade.
1. Use a Framework
As someone that designs visually and doesn’t have a huge arsenal of coding know-how, frameworks and "boilerplates" give you the opportunity to build a project using a consistently formatted code base that has been tested, validated and in most cases, developed by an industry leader. These pre-packaged starter templates do not prescribe a specific design philosophy or force you into one layout or another, they simply give you a valid HTML5 document and associated CSS3 stylesheet with all required JavaScript libraries already included.Another option is to use an HTML5 design application to build valid websites without worrying about coding it yourself. Unfortunately there are only a few tools available such as Adobe’s Muse and Edge previews (which won’t be fully released for some time yet) and single-purpose web generators. To answer the call of front-end designers everywhere, Wix had launched the very first, full-featured HTML5 website building application on March 26th that allows you to create complete websites online. This tool can significantly change how you design, giving you a visual editor for creating and styling elements, using drag and drop for arranging layouts and adding widgets. You will also get access to a library of interactive canvas elements and animations, CSS3 effects and add-ins such as HTML5 audio, video, slideshows, forms and more. Visit the Wix website to learn more and sign up to be the first to explore this new technology.
The benefit of using a framework or HTML5 application is a more efficient workflow and consistent results. It is still important to understand the semantics, limitations and possibilities of HTML5, but as a front-end designer there is no shame in keeping your focus on what you do best.
2. Understand the Doctype
If you choose to code your own document, or convert an existing site to HTML 5, it is extremely important to understand the dependencies and requirements of the HTML5 doctype. Simply changing the <!DOCTYPE> tag from<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> to <!DOCTYPE html>will
not magically transform your markup, it will only allow the browser to
detect the document as HTML5 and expect HTML5 markup. It also should not
be confused with the opening <html> tag. Other element commonly found in the document head have changed as well, including character encoding,<script> and <link> elements. The core of a basic HTML5 document head should look like this:1 | <!DOCTYPE html> |
2 | <html> |
3 | <head> |
4 | <meta charset="utf-8"> |
5 | <title>...</title> |
6 | <link rel="stylesheet" href="style.css"> |
7 | </head> |
3. Use Elements Responsibly
Before diving into building a site with HTML5, ensure you understand what each new element is intended for and where it belongs in your layout. These are the primary elements introduced in HTML5 that should be used, almost exclusively, when building a layout:<header>
Not to be confused with <head>, this element designates the header, or top part, of an element or layout and can be used independently or within other elements.
<hgroup>
Used inside the <header>, the <hgroup> designates a grouping of header tags to help preserve typographical hierarchy and allow the browser to prioritize them as a group rather than individually. For example, you may have an H2 element as a page heading, then use another H2 for post titles, followed by an H3 for the author. The second H2 and H3 should be wrapped in an <hgroup> within a <header>.
<nav>
This element indicates a navigation menu, and should encapsulate an unordered list in most cases. The <nav> element can be used independently or within other elements, such as <aside>. A group of links grouped together in your content isn’t enough reason to use the nav element. Site-wide navigation, or sub-navigation does belong in a nav element.
<section>
Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”
<article>
This tag represents an independent piece of content , such as a blog post or news article. It is almost always placed inside a <section>, but it isn’t required..
<aside>
The <aside> is most easily compared to a sidebar or any area containing content that is not directly related to the <article> or primary content displayed on the page. How your site is structured will depend on how you use the <aside>, but common practice either uses it to contain an unordered list of secondary elements, or places it inside a <section>, using the <aside> to contain each "block" of content. However,just because some content appears to the left or right of the main content isn’t enough reason to use the <aside> element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content.
<footer>
Like the header, the
<footer> is used to designate
the foot or bottom part of an element or layout. It can be used
independently, as seen in most web layouts for copyright information, or
within other elements to designate "footer" content such as author,
date, category and so on.<figure> & <figcaption>
Not well understood and under-used,
<figure> essentially replaces the need for a <div class="caption"> element used to wrap a video or image in a padded, styled box containing a description. Example:1 | <figure> |
2 | <img src="pic.jpeg"> |
3 | <figcaption> |
4 | <p>This is a caption.</p> |
5 | </figcaption> |
6 | </figure> |
When used properly, HTML5 elements greatly reduce the need for DIVs and other unnecessary elements. To build the most efficient markup possible, avoid using the
<div>as much as possible,
and only fall back to it when no other element is appropriate. Remember
that spans and tables are completely valid structural elements in HTML5
and that using them in favor of floating elements is preferred for
mobile compatibility.Here is an example of a basic HTML5 document structure:
1 | <header> |
2 | <h1>My Site</h1> |
3 | <nav id="menu"> |
4 | <ul> |
5 | <li><a href="#" title="link1">Link1</a></li> |
6 | <li><a href="#" title="link2">Link2</a></li> |
7 | <li><a href="#" title="link3">Link3</a></li> |
8 | </ul> |
9 | </nav> |
10 | </header> |
11 | <div id="main"> |
12 | <section id="content"> |
13 | <article> |
14 | <header class="post"> |
15 | <hgroup> |
16 | <h2>Title</h2> |
17 | <h3>by Author</h3> |
18 | </hgroup> |
19 | </header> |
20 | <p>Article content...</p> |
21 | </article> |
22 | </section> |
23 | <aside> |
24 | <ul> |
25 | <li>...</li> |
26 | <li>...</li> |
27 | <li>...</li |
28 | </ul> |
29 | </aside> |
30 | </div> |
31 | <nav id="paged">...</nav> |
32 | <footer>...</footer> |
1 | header {...} |
2 | h1{...} |
3 | h2{...} |
4 | h3{...} |
5 | nav {...} |
6 | #menu {...} |
7 | #menu ul {...} |
8 | #menu ul li{...} |
Best practices from HTML4 can still be carried over into the HTML5 world when writing your markup. Even though HTML5 is more forgiving of case, quotes and tag closing, continue to:
- Use lower-case markup
- Close all tags
- Enclose attributes in quotes
- Use the "alt" attribute in the
<image>tag - Use the "title" attribute in
<a>links
4. Plan for Backwards Compatibility
All current webkit browsers (such as Firefox, Chrome and Opera), mobile browsers and Internet Explorer 9 support most HTML5 features in the existing spec. HTML5 itself is designed to be as backwards compatible as possible, building upon existing features and allowing for graceful degradation. It is still a good idea to provide a measure of fallback support in the form of an HTML5 Shiv, which is a small JavaScript that helps older browsers interpret some of the newer rules and elements properly. The shiv is added to the document head, just after your stylesheet declaration.In addition to the script, providing conditional statements for Internet Explorer is smart, as plenty of web users are still confined to these older browser versions. By separating special styles and fixes for IE versions, you can easily remove them later as the versions become obsolete.
Example:
1 | <!--[if IE 7]> |
2 | <link rel="stylesheet" href="css/ie-7.css" media="all"> |
3 | <![endif]--> |
4 | <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
display:blockstyle to your HTML5 elements, like so:1 | header, hgroup,nav,section,article,aside,footer {display:block;} |
5. Separate Content from Presentation
Whether you decide to use a framework or not, keep 99% of the design in your stylesheets. Essentially, without your stylesheet, the page should collapse into a completely unformatted mess when viewed in a browser. It sounds dire, but this separation is important to maintain ongoing development and ensure your code has the best chance of validating. It is significantly easier to maintain a site with markup written to be style-independent. For example, changing the color of a site that uses<font color=""> in the markup
requires multiple tedious changes. By using CSS exclusively, these
changes are reduced to one file with few instances.HTML5 has none of the presentational attributes that were in HTML4 such as
<frame> or <font> and has changed the way several tags are interpreted.
Additionally, a number of tags have been removed completely from HTML5,
so it is important to keep a reference of the differences. Here are a
few things to avoid:- Never use inline styles. Example
<div style="border: 1px"> - Use paragraphs
<p>instead of</br>to arrange content on new lines. - Avoid using
<em>and<strong>when styling text elements in the design and use a heading tag or class. Never use<i>and<b>which have been depreciated from HTML5. For theme developers, this can be applied to content created in editing tools by using Post Formats instead of relying on the legacy editing actions like B and I. - Use a paragraph class that contains ample padding to indent text and reserve the
<blockquote>tag for actual quotes.
| Tag | What it did |
| <acronym> | Defines an acronym. Removed because it creates confusion. Use abbr instead. |
| <applet> | Defined an applet. Use object instead. |
| <basefont> | Use CSS to define main body font. Use CSS to define font size. |
| <big> | Use CSS to set font size. |
| <center> | Use CSS to align text or elements. |
| <dir> | Defined a directory list. Use ul. |
| <font> | Use CSS classes |
| <frame> | Defined a frame. Damages usability and accessibility. |
| <frameset> | Defines a set of frames. Damages usability and accessibility. |
| <isindex> | Defines a single-line input field. Use HTML5 form controls instead. |
| <noframes> | Damages usability and accessibility. |
| <s> | Defines strikethrough text. Use CSS. |
| <strike> | Defines strikethrough text. Use CSS. |
| <tt> | Defines teletype text. Use CSS. |
| <u> | Defines underlined text. Use CSS. |
- border attribute on <img> is required to have the value "0" when present. This is another form of inline styling, so use CSS instead.
- language attribute on <script> is required to have the value "javascript" if used, and cannot conflict with the type attribute. It is best to just remove these attributes.
- name attribute on <a> should be changed to an id attribute instead.
- summary attribute on <table> is depreciated. The HTML5 draft defines several alternative solutions.
- width and height attributes on <img> and other elements are no longer allowed to contain percentages. It is best to use CSS here also.
- rev and charset attributes on <link> and <a>.
- shape and coords attributes on <a>.
- longdesc attribute on <img> and <iframe>.
- target attribute on <link>.
- nohref attribute on <area>.
- profile attribute on <head>.
- version attribute on <html>.
- scheme attribute on <meta>.
- archive, classid, codebase, codetype, declare and standby attributes on <object>.
- valuetype and type attributes on <param>.
- axis and abbr attributes on <td> and <th>.
- scope attribute on <td>.
- summary attribute on <table>.
| Attribute | Used with Tag |
| align | caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr. |
| alink | body |
| link | body |
| vlink | body |
| text | body |
| background | body |
| bgcolor | table, tr, td, th and body. |
| border | table and object. |
| cellpadding | table |
| cellspacing | table |
| char | col, colgroup, tbody, td, tfoot, th, thead and tr. |
| charoff | col, colgroup, tbody, td, tfoot, th, thead and tr. |
| clear | br |
| compact | dl, menu, ol and ul. |
| frame | table |
| compact | dl, menu, ol and ul. |
| frame | table |
| frameborder | iframe |
| hspace | img and object. |
| vspace | img and object. |
| marginheight | iframe |
| marginwidth | iframe |
| noshade | hr |
| nowrap | td and th |
| rules | table |
| scrolling | iframe |
| size | hr |
| type | li, ol and ul. |
| valign | col, colgroup, tbody, td, tfoot, th, thead and tr |
| width | hr, table, td, th, col, colgroup and pre. |
6. Design for Accessibility
While it is possible to use presentational markup in a way that provides users of assistive technologies (ATs) with a good user experience, doing so is significantly more difficult than simply using semantic markup.The WAI ARIA specification defines a set of specialised “landmark” roles that can be combined with HTML elements to help assistive technologies provide users with features they can use to identify and navigate between sections of page content more easily. To implement roles, you simply add the role attribute and the element’s appropriate value.
Here is a list of common elements used with HTML5 web design and the corresponding roles:
| Language feature | Recommended role value | Restrictions |
a |
link |
Role must be either link, button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab, or treeitem |
address |
No role | If specified, role must be contentinfo |
article |
article |
Role must be either article, document, application, or main |
aside |
note |
Role must be either note, complementary, or search |
audio |
No role | If specified, role must be application |
button |
button |
Role must be either button, link, menuitem, menuitemcheckbox, menuitemradio, radio |
details |
group |
Role must be a role that supports aria-expanded |
embed |
No role | If specified, role must be either application, document, or img |
footer |
No role | If specified, role must be contentinfo |
h1-h6 element that isn’t inside hgroup |
heading role, with the aria-level property set to the element’s outline depth |
Role must be either heading or tab |
header element |
No role | If specified, role must be banner |
iframe element |
No role | If specified, role must be either application, document, or img |
img element whose alt attribute’s value is present and not empty |
img role |
No restrictions |
li element whose parent is an ol or ul element |
listitem role |
Role must be either listitem, menuitemcheckbox, menuitemradio, option, tab, or treeitem |
object element |
No role | If specified, role must be either application, document, or img |
ol element |
list role |
Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree |
output element |
status role |
No restrictions |
section element |
region role |
Role must be either alert, alertdialog, application, contentinfo, dialog, document, log, main, marquee, region, search, or status |
ul element |
list role |
Role must be either directory, list, listbox, menu, menubar, tablist, toolbar, tree |
video element |
No role | If specified, role must be application |
| body element | document role |
Role must be either document or application |
7. Use CSS in Place of JavaScript and Sprites
One of the primary aims of HTML5 is to provide native browser support for components, effects and techniques that have been achieved through JavaScript. With the introduction of CSS3, much of the day-to-day tricks in standard web design can now be created without JavaScript at all. This tip from HTML5 expert Paul Irish explains how to blend CSS3 transitions with HTML5: "CSS Transitions give you an attractive visual transition between two states. Most style properties can be transitioned, like manipulating the text-shadow, position, background or color. You can use transitions into pseudo-selector states like :hover or from HTML5 forms, :invalid and :valid (example with form validation states). But they’re much more powerful and can be triggered when you add any class to an element."Here is how transitions look in CSS3:
1 | div.box { |
2 | left: 40px; |
3 | -webkit-transition: all 0.3s ease-out; |
4 | -moz-transition: all 0.3s ease-out; |
5 | -o-transition: all 0.3s ease-out; |
6 | transition: all 0.3s ease-out; |
7 | } |
8 | div.box.totheleft { left: 0px; } |
9 | div.box.totheright { left: 80px; } |
HTML5 also gives us extended power over the draggable attribute.
This attribute can be added to any element, and when combined with CSS, allows us to create native drag and drop functionality without depending on JavaScript plugins or APIs.
CSS3 brings a new way of creating visual information for the web that can replace a large percentage of elements used in design including buttons, sprites, vectors and virtually any interface element. Here are a few of the things you can do with CSS3 in HTML5 that you needed JavaScript or plugins for in the past:
- Linear and radial gradients
- Border-radius for rounded corners
- Box-shadow for drop shadows and glow
- RGBA for alpha opacity
- Transforms for rotation
- CSS masks
8. Provide Fallbacks for Multimedia
The <audio>,<video> and <canvas> tags were some of the first HTML5 elements to become wildly popular, mainly due to the increasing need for mobile-friendly media to replace Flash and other content. Even though these elements simplfy the process of embedding media, they depend on the browser’s native ability to playback the content since there is no plugin such as Flash or Java being invoked. Each browser (currently) has it’s own limitations on what kind of media it can handle and how. Thankfully, HTML5 allows for fallbacks with these elements through the <source> tag.Opera’s Bruce Lawson explains,"In this example, Opera, Firefox and Chrome will download the Ogg version of Master Bieber’s latest toe-tappin’ masterpiece, while Safari and IE will grab the MP3 version. Chrome can play both Ogg and MP3, but browsers will download the first source file that they understand.
The fallback content between the opening and closing tags is a link to download the content to the desktop and play it via a separate media player, and it is only shown in browsers that can’t play native multimedia:"
1 | <audio controls> |
2 | <source src=bieber.ogg type=audio/ogg> |
3 | <source src=bieber.mp3 type=audio/mp3> |
4 | <!-- fallback content: --> |
5 | <a href=bieber.ogg>Ogg</a> |
6 | <a href=bieber.mp3>MP3</a> |
7 | </audio> |
1 | <video controls> |
2 | <source src=video.webm type=video/webm> |
3 | <source src=video.mp4 type=video/mp4> |
4 | <!-- fallback content: --> |
5 | <iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen> |
6 | </iframe> |
7 | </video> |
9. Simplfy Your Forms
Extensive and wll-written resources already exist which document the elements and attributes new to forms in HTML5, so there is no reason to repeat them here. The essential part of HTML5 forms is, again, their ability to use native browser functionality for processing and validation, rather than depending on scripts or plugins. HTML5 also streamlines the way forms can be coded, removing the need for a closing slash on input fields, and adding semantic attributes to help form fields make more sense to the browser. At a minimum, an HTML5 form should follow these rules:- Enclose all label names with the <label> tag.
- Use the new
emailandurlinput types to define these common fields. - Use the
placeholderattribute to provide input hints. - Use the
requiredattribute to request validation. - Drop the
nameattribute in favor of anidwhere needed.
1 | <form method="post" action="index.php"> |
2 | <form method="post" action="index.php"> |
3 | <label>Name:</label> |
4 | <input id="name" autofocus placeholder="Your name here"> |
5 | <label>Email:</label> |
6 | <input id="emailaddy" type="email" placeholder="Your email here" required> |
7 | <label>Message:</label> |
8 | <textarea id="message" placeholder="Your comments here"></textarea> |
9 | <input id="submit" type="submit" value="Submit"> |
10 | </form> | | |
Here is a quick overview of what is new to forms in HTML5:
New form attributes:
- autocomplete
- novalidate
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height and width
- list
- min, max and step
- multiple
- pattern (regexp)
- placeholder
- required
10. Design for Performance
87% of Planet Earth has a mobile phone, and more than 60% use it to browse the web. If you’re not creating a mobile website, you need to consider the load time and compatibility of your site with the rendering and processing capabilities of a mobile device.The first step to better performance is to minimize and combine your code into as few files as you can. Since this process makes it absolutely maddening to do updates later on, always keep an "unminizmied" copy of your site and combine things down as the last step before publication. Minimizing includes the combining of all stylesheets and Javascripts into one file, or the removal of unneeded characters and spaces.
In the case of JavaScript in particular, optimizing the files and load order will gain the best results, since browsers can’t do anything while JavaScript is being downloaded. All scripts should be loaded from the footer of the document rather than the traditional place in the head under your stylesheets, with the exception of the HTML5 Shiv. You should also avoid linking to external scripts, even though it has become common practice to do this with Google libraries, for example.
This strategy isn’t always possible with all scripts, depending on their compatibility with one another, but the more you can get loading last and fast, the better.
No comments:
Post a Comment