Click here to Skip to main content
13,349,997 members (48,157 online)
Click here to Skip to main content
Add your own
alternative version

Stats

65.7K views
21 bookmarked
Posted 10 Oct 2013

HTML5 (and Some CSS) Best Practice

, 11 Oct 2013
Rate this:
Please Sign up or sign in to vote.
A short guide on best practices

Introduction

These tips are meant for beginners and those who wish to freshen up on HTML best practices. I tried to list here many things that, although simple, make a huge difference on code readability. Hopefully everyone who reads this will be able to learn something new. Enjoy!

  1. Declare the DocType

    This is not an HTML tag, it is an instruction to the web browser about your page's HTML version. Always add the !DOCTYPE tag declaration to your HTML documents, so that the browser knows what type of document to expect.

    <!-- HTML 5 -->>
    <!DOCTYPE html>
    
    <!-- HTML 4.01 Strict -->>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    
    <!-- XHTML 1.0 Strict -->>
    <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">           
  2. Tags

    Although it may not present problems, always close your tags. You will never know how your site will always behave under different browsers, conditions, technologies; and if the standards are not followed, it will be that much easier for problems to occur.

    HTML is case insensitive, but that doesn't mean we should be... LOL... Personally, I suggest the use of lower case, but if you must use upper case, try to make it your standard and avoid changing throughout the site.

    "Some closing tags are optional, however. The tags are optional because it’s implied that a new tag would not be able to be started without closing it. These are the following:html, head, body, p, dt, dd, li, option, thead, th, tbody, tr, td, tfoot, colgroup. There are also tags that are forbidden to be closed: img, input, br, hr, meta, etc. The question is: should tags that are optional be closed? Code with closing tags is much more readable and easy to follow. It is much easier to visually inspect a page with well laid out markup. Working with this markup is easier for developers."http://blog.teamtreehouse.com/to-close-or-not-to-close-tags-in-html5
    <!-- Good -->
    <h1> Heading</h1>
    <p>some text.....</p>
    
    <!-- Not so Good -->
    <H1>Heading</h1>
    <p>some text.....            
  3. Descriptive Meta Tags:

    Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata and makes your web page more meaningful for user agents like search engine spiders.

    <head>
        ...
        <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    </head>
  4. Avoid Inline Styles

    HTML is not HyperText Styling language, CSS is there for a reason which leaves the inline styles as a resource when required.

    <h1 style="color:blue;">Is is really necessary?</h1>
  5. Have CSS Links in the HEAD Tag

    It has been tested and it seems that pages render faster when moving stylesheet tags to the document head:

    <head>  
        <title>My Title</title>  
        <link rel="stylesheet" type="text/css" 
    
        media="screen" href="file.css" />  
        <link rel="stylesheet" type="text/css" 
    
        media="screen" href="anotherFile.css" />  
    </head>            
  6. Placing JavaScript Files

    If you have JavaScript files that are exclusively to add functionality to a page, it's better to place it at the end of the HTML file, right before the closing body tag. This will allows the page to load faster.

    <body>
        ....
        ....
        <script type="text/javascript" src="path/to/file.js"></script>
    </body>            
  7. Use CSS in Place of JavaScript and Sprites

    With just HTML5 and CSS3, it is possible to give native support for many compoents, effects and techniques that previously could only be achieved through JavaScript. An example is the "css transition", which provides a nice visual transition between 2 states.

    div.box {
    left: 40px;
    -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
            -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
    }
    div.box.totheleft { left: 0px; }
    div.box.totheright { left: 80px; }            
  8. Text Alternatives

    Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language:

    <img src="imageX.jpg" alt="A image of X." />
  9. Style All Elements

    This is especially useful when working in a group or designing for clients. The fact that you wouldn't use something in a specific way or that something is not required at the moment doesn't mean it will not be implemented at some point which will end up causing layout problems.

  10. Choice of Colors

    Make it easier for users to see and hear content including separating foreground from background.

    Try it yourself, have a very dark text display on a black background or a light yellow text on a white background.

  11. Learn the HTML5 Block Level Elements

    Instead of staying with divs for everything, take some time to learn the new HTML 5 elements like <header>, <footer>, <article> and others. They work the same way but improve readability with less writing.

    Before HTML5

    <body>
        <div id="header">
            ...
        </div>
        <div id="main">
            ...
            <div id="subitem">
                ...
            </div>
            ...
        </div>
        <div id="footer">
            ...
        </div>
    </body>  

    After

    <body>
        <header>
            ...
        </header>
        <article>
            ...
            <section>
                ...
            </section>
            ...
        </article>
        <footer>
            ...
        </footer>
    </body>            
  12. Browser Support

    Support is great for most of the new HTML5 tags, especially the block level ones. All you have to do to enable all the modern browsers to understand them, is to include the code below in your CSS file.

    article, aside, figcaption, figure, footer, header, nav, section
    {
        display: block;
    }            

    For Internet Explorer 9 or less, it is also required to do the following:

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->            
  13. Provide Fallbacks for Multimedia

    All browser have their own limitations on what kind of media it can handle and how. That is why HTML5 allows for fallbacks with these elements through the <source>.

    • Audio

      <audio controls>    
          <source src=sound.ogg type=audio/ogg>    
          <source src=sound.mp3 type=audio/mp3>      
          <!-- fallback content: -->      
          <a href=sound.ogg>Ogg</a>
          <a href=sound.mp3>MP3</a>  
      </audio>
    • Video

      <video controls>    
          <source src=video.webm type=video/webm>    
          <source src=video.mp4 type=video/mp4>      
          <!-- fallback content: -->      
          <iframe width="480" height="360" src="#" frameborder="0" allowfullscreen>/<iframe>  
      </video>
  14. Simplify Your Forms

    HTML5 also simplifies forms by removing the need for a closing slash on any input field and also by 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 email and url input types to define these common fields.
    • Use the placeholder attribute to provide input hints.
    • Use the required attribute to request validation.
    • Drop the name attribute in favor of an id where needed.
  15. In-page editors:

    WYSIWYG editors are not good in handling default HTML whitespace and the line wrapping will not function correctly in some cases if 'white-space' is left at its default value. That is why it is encouraged to set the 'white-space' property on editing hosts and on markup that was originally created through these editing mechanisms to the value 'pre-wrap'.

  16. Device Limitations

    This is mainly for mobile web. If you are aiming to get your website seen on smartphones and tablets, be careful choosing to use a particular Web technology, consider that mobile devices vary greatly in capability.

    • Do not rely on cookies being available
    • Do not use tables unless the device is known to support them.
    • Organize documents so that if necessary they may be read without style sheets.
    • Do not rely on embedded objects or script.
    • Where possible, use an alternative to tabular presentation.
  17. The Most Important:

    Technologies are always changing, improving and being replaced.
    So you must study, study, study and study. The moment you can say that you know this stuff is when you have to study twice as hard, because it is a sign that you really don't know this stuff...

Sources

All knowledge and inspiration presented in this tip came from the following sites:

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Paulo Augusto Kunzel
Software Developer
Brazil Brazil
I work from home as a business owner and Front-end developer of a company whose main revenue comes from a SaaS we created to help people manage their online sales on a website called Mercado Livre. On my spare time I’ve been building a website called www.mundojs.com.br where I provide information about JavaScript in Portuguese to help new developers.

You may also be interested in...

Pro

Comments and Discussions

 
GeneralMy vote of 5 Pin
Brian A Stephens17-Oct-13 3:16
professionalBrian A Stephens17-Oct-13 3:16 
GeneralNice work! Pin
Carsten V2.010-Oct-13 12:03
memberCarsten V2.010-Oct-13 12:03 
QuestionFew minor things Pin
Florian Rappl10-Oct-13 12:00
mvpFlorian Rappl10-Oct-13 12:00 
AnswerRe: Few minor things Pin
Paulo Kunzel11-Oct-13 1:38
professionalPaulo Kunzel11-Oct-13 1:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 11 Oct 2013
Article Copyright 2013 by Paulo Augusto Kunzel
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid