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 Structure
Without 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.
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 Structure
Without 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.
<!Doctype HTML>
<html>
<head>
<title> Introduction to HTML</title>
</head>
<body>
<h1>Hello World!</h1>
<p> Introduction to HTML</p>
<span> Learn Semantic </span>
</body>
</html>
<html>
<head>
<title> Introduction to HTML</title>
</head>
<body>
<h1>Hello World!</h1>
<p> Introduction to HTML</p>
<span> Learn Semantic </span>
</body>
</html>
2.) Make Use of Semantic Elements
If 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.
<p class="heading">Hi Guys! <span>We are back. </p></span>
<p class="heading">Hi Guys! <span>We are back.</span></p>
<p class="heading">Hi Guys! <span>We are back.</span></p>
3.) Close tags where ever necessary
Leaving 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.
<ul>
<li><a href="index.html">Home </li>
<li><a href="about.html">About </li>
</ul>
<ul>
<li><a href="index.html">Home </a></li>
<li><a href="about.html">About </a></li>
</ul>
<li><a href="index.html">Home </li>
<li><a href="about.html">About </li>
</ul>
<ul>
<li><a href="index.html">Home </a></li>
<li><a href="about.html">About </a></li>
</ul>
4.) Use Meta tags without fail
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. So do not omit as others do!
<head>
<meta name="description" content="web design blog">
<meta name="keywords" content="web design,.... ">
</head>
<head>
<meta name="description" content="This blog helps you in learning the basic concepts of web design for beginner level developers">
<meta name="keywords" content="web design, ui design, ui ux design, designer blog">
</head>
<meta name="description" content="web design blog">
<meta name="keywords" content="web design,.... ">
</head>
<head>
<meta name="description" content="This blog helps you in learning the basic concepts of web design for beginner level developers">
<meta name="keywords" content="web design, ui design, ui ux design, designer blog">
</head>
5.) Provide style sheet link and script files in head tag
Placing link to style sheet files and js files can be given inside the head tag using <link> tag.
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="style1.css" />
<link rel="stylesheet" type="text/css" href="style2.css" />
<script src="newscript.js" type="text/javascript"></script>
</head>
6.) Use Alt attribute for <img> tag
Provide text alternatives for any images added through <img> tag. This keyword helps the search engine in finding your site.
<img src="files/image1.jpg" />
<img src="files/image1.jpg" alt="image" />
7.) Start Using HTML5 new 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.
<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.
<div id="content">
<p id="loginname"> Vimal Raj </p>
<p id="loginname"> 29th Aug, 2015 </p>
</div>
<div id="content">
<p class="loginname"> Vimal Raj </p>
<p class="loginname"> 29th Aug, 2015 </p>
</div>
<p id="loginname"> Vimal Raj </p>
<p id="loginname"> 29th Aug, 2015 </p>
</div>
<div id="content">
<p class="loginname"> Vimal Raj </p>
<p class="loginname"> 29th Aug, 2015 </p>
</div>
9.) Use Title attributes in anchor
Use of title attribute in anchor tags helps the user to understand the need of that link and also it helps in SEO operations.
<a href="../profile.pdf"> Click here</p>
<a href="../profile.pdf" link="profile-info"> Click here</p>
9.) Simplify form elements
Enclose 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.
<form>
<label> Username </label>
<input type="text" name="username" placeholder="Type Username"/>
<label> Email</label>
<input type="email" name="email" placeholder="Type Your Email"/>
<input type="submit" name="sub_form" value="Login"/>
<input type="reset" name="can_form" value="Cancel"/>
</form>
<label> Username </label>
<input type="text" name="username" placeholder="Type Username"/>
<label> Email</label>
<input type="email" name="email" placeholder="Type Your Email"/>
<input type="submit" name="sub_form" value="Login"/>
<input type="reset" name="can_form" value="Cancel"/>
</form>
10.) Provide necessary fallback
Provide proper fallback in the HTML. Use browser supportive (IE 8/9) or specific scripts whenever HTML5 components are used in the document. Also provide proper information for non supportive browsers.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
11.) Use External Stylesheet
As said earlier, always use external stylesheet inside head tag. Avoid using inline style which makes the code clumsy.
<head>
...
<link rel="stylesheet" type="text/css" href="style.css" />
...
</head>
<p style="color:#365233" font-size:16px;> Login </p>
...
<link rel="stylesheet" type="text/css" href="style.css" />
...
</head>
<p style="color:#365233" font-size:16px;> Login </p>
13.) Validate your HTML
Finally, dont forget to validate your html file. A semantic html should be pass all the guidelines said in the W3C HTML validator.
Great article . Thank you .
ReplyDelete