A blog and a newsroom for beginner level UI designers. Here we can discuss about User Interface and User Experience related concepts. And also learn about web design and its other elements.

Saturday, August 29, 2015

Best Practices of HTML5

This post is specifically for those who are just diving into web design industry. If you've one year of experience or less, hopefully some of the tips listed here will help you to become better, quicker!Learning HTML is not a big task but coding it in proper manner makes you a perfect front end developer. These are the do's and dont's in the HTML page.

1.) Use the Proper Document StructureWithout a doctype and the structural HTML elements, pages will not render properly in every browser.So user must always be sure to the use proper document structure, including the <!DOCTYPE html> doctype, and the <html>, <head>, and <body> elements. Doing so keeps our pages standards compliant and fully semantic, and helps guarantee they will be rendered as it is. Always use correct doctype declaration.

2.) Make Use of Semantic ElementsIf a HTML document doesn't uses proper semantic structure, then it is meaningless. The HTML element which is opened first should be closed first. Dis-proper closing of HTML tags may not render correctly in browsers.

3.) Close tags where ever necessaryLeaving the tag element unclosed is the common mistake done by all developers. In some advance browsers, it may close tag automatically, but not in all. But there are some standalone tags which doesn't need closing tags and no need to care about that.

4.) Use Meta tags without failMeta 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. So do not omit as others do!

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.

<html>

<head>

<title> Learn
Semantic HTML </title>

</head>

<body>

<div>

<h1>Logo Here</h1>

</div>

<div class="nav"> ... </div>

<div>

<div> side bar </div>

<div>

<article> first
article </article>

<article> second
article </article>

<article> third
article </article>

</div>

<div class="copyrights">

Copyrights Info

</div>

</div>

</body>

</html>

<html>

<head>

<title> Learn Semantic HTML</title>

</head>

<body>

<header>

<h1>Logo
Here</h1>

</header>

<nav> ... </nav>

<div>

<aside> side bar
</aside>

<section>

<article> first article </article>

<article> second article </article>

<article> third article </article>

</section>

<footer>

Copyrights Info

</footer>

</div>

</body>

</html>

8.) Use Selectors appropriately

Classes can be used multiple times in the documents. They are reusable. But id's are unique. One id can be used only once in a page.

9.) Simplify form elementsEnclose all label names with the <label> tag. Try using the new email and url input types to define these common fields. Using placeholder attribute to provide input hints. Use the required attribute to request validation. Drop the name attribute in favor of an id where needed. Differentiate submit and cancel buttons for easier view.