HTML Best Practices

The Right Software > Blog > Web Development > HTML Best Practices
HTML-Best-Practices

Always Close Your Tags

Always close your tags otherwise you will get validation Issues everytime.

Best Practice Example

<ul>
<li style="list-style-type: none;"></li>
<li>Always Close your Tags</li>
<li style="list-style-type: none;"></li>
<li>Always close your tags like this example</li>
</ul>

Never use inline Styles

This is paragraph Tag

<p style="color: red;">This is paragraph Tag</p>

Best Practice Example

Better practice is

p{
Color:red;
}

Always Use CSS files Under head tag

you can place stylesheets anywhere you like. However, the HTML specification recommends that they be placed within the document HEAD tag. The primary benefit is that your pages will seemingly load faster.

Best Practice Example

<head>
<link rel="stylesheet" type="css" media="screen" href="file.css" />
</head>

Place JavaScript files at the bottom of page

the primary goal is to make the page load as quickly as possible for the user. When loading a script, the browser can’t continue on until the entire file has been loaded. Thus, the user will have to wait longer before noticing any progress.

Best Practice Example

<p>this is last paragraph of page</p>
<script type="javascript" src="file.js"></script>
</body>
</html>

Keep your tag name in lowercase

Technically, you can get away with capitalizing your tag names.

Best Practice Example

<div>
<p>small tags</p>
</div>

Use H1-H6 tags

It is best practice that you use all these heading tags.

Best practice Example

<h1>hello world</h1>
<h2>This is heading 2</h2>
<h3>this is heading 3</h3>

this is heading 3

Wrap Navigation with an Unorder List

Each and every website has a navigation section of some sort. While you can definitely get away with formatting it like so

Best Practice Example

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

All images require “Alt” Attribute

The best practice is use alt keyword when use image

Best Practice Example

<img src="cornImage.jpg" alt="A corn field I visited." />

Use Meaningful Title

The <title> tag helps make a web page more meaningful and search-engine friendly.

Best Practice Example

<title>Learn Html - Web Development and Design Information</title>

Use Descriptive Meta Tags

Meta tags make your web page more meaningful for user agents like search engine spiders.

Best Practice Example

<meta name="description" content="Best practice of Html." />

Use Divs to Divide Your Layout into Major Section

It will also help you avoid confusion and excess use of divs, especially if you are writing complex and lengthy markup.

Best Practice Example

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

Use Field set and Labels in Web Forms:

Use the <label> element to label input fields. Divide input fields into logical sets using <fieldset>. Name a <fieldset> using <legend>

Best Practice Example

<fieldset>
    <legend>Personal Details</legend>
    <label for="name">name</label><input type="text" id="name" name="name" />
    <label for="subject">subject</label><input type="text" id="subject" name="subject" />
    <label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>

Use Practical ID & Class Values

Creating ID and class values can be one of the more difficult parts of writing HTML. These values need to be practical, relating to the content itself, not the style of the content

Best Practice Example

<p class="alert">Error! Please try again.</p>

Use proper Class Name

Class names (or values) should be modular and should pertain to content within an element, not appearance, as much as possible

Best Practice Example

alert-message { ... }

Pingback

Categories

Free Consultation





Please leave this field empty.

Contact Details

Office # 12,
3rd floor, MB City Mall
I-8 Markaz,
Islamabad, Pakistan.
+92-51-493-8304
[email protected]

Start a Project with The Right Software