demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Shortcuts

html / elements

Estimated reading time: 1 minute, 12 seconds

HTML 5 is somewhat looser in its requirements for markup compared to XHTML, allowing a number of shortcuts:

  • Tags can be written uppercase, lowercase, or in mIxEd case.

  • You can drop a lot of closing tags: </li>, </dt>, </dd>, </tr>, </th>, </td>, </thead>, </tfoot>, </tbody>, </option>, </optgroup>, </p> (in most cases), </head>, </body> and </html> not required.

  • Attribute values only need to be quoted if they contain spaces or some non-alphanumeric characters (such as a question mark). So <div id=wrapper> is legitimate, as is <img src=assets/images/falls.jpg …> but <img alt=Angel Falls …> is not.

  • No type attribute is required on scripts or stylesheets: a link to a file can be written as <link rel=stylesheet href=styles.css>

  • You can eliminate http: at the start of links. <a href="http://www.example.com/index.html"> becomes <a href=//example.com> (This is not specific to HTML5, but it is fun all the same).

You will see these shortcuts used in some code examples on this blog in order to save space. If web development is new to you I strongly suggest that you stick to the basic rules for writing HTML code. (Your web page will continue to work fine, and the code will likely be easier for you to read). Once you’re familiar with HTML, you can start to introduce exceptions. You’ll also find that many text editors and IDEs, such as will fight any attempts at shortcuts, automatically closing tags unless you change their preference settings.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.