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!
-
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.
<!-->
<!DOCTYPE html>
<!-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!-->
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
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
<!--
<h1> Heading</h1>
<p>some text.....</p>
<!--
<H1>Heading</h1>
<p>some text.....
-
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>
-
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>
-
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>
-
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>
-
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; }
-
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." />
-
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.
-
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.
-
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>
-
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:
<!--
-
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>
<!--
<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>
<!--
<iframe width="480" height="360" src="#" frameborder="0" allowfullscreen>/<iframe>
</video>
-
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.
-
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'.
-
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.
-
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...
All knowledge and inspiration presented in this tip came from the following sites:
