HTML best practices make developers benefit from creative and highly responsible websites and web applications. With the help of these best practices, you can develop the most feature-rich and business-centric applications. Apart from this, these best practices help organizations to provide a better user experience.
In the present time, when we discuss HTML, it is all about HTML5. HTML5 is one of the most potent markup languages, which is highly beneficial to creating web documents. This language is easy to understand, and most of the browsers support this language. Additionally, this is the base of all content management systems (CMS).
Being a web developer, you might get confused about the questions such as "How can I write better HTML?". This article will study the best practices in HTML to build maintainable and scalable websites.
## Always Declare a Doctype
While creating an HTML document, you would be required a DOCTYPE declaration to inform the browser about the standards you are using. The purpose behind this is to render your markup correctly and switch into the so-called "quirk mode" at the time of generating a document, that is, the "<!DOCTYPE html>". This doctype ensures that the browser makes a best-effort attempt at the below-given specifications instead of using a different rendering mode that is incompatible with some specifications.
`<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>`
Syntax
- Always remember optional closing tags.
- Don't capitalize titles.
- Make use of soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
- Always remember to use double quotes, never single quotes, on attributes.
Attribute Order
To have more readable code, our HTML attributes should be in a particular order,
- class
- ID, name
- data-*
- src, for, type, href, value
- title, alt the role, aria-* Classes make for excellent reusable components, so they come first. IDs are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
Reducing MarkUp
Try to avoid using superfluous parent elements while writing HTML. Most of the time would be requiring interaction and rephrasing but produces less HTML.
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
Alt-text
This alt-text attribute is beneficial. With the help of Alt-text, screen reader users understand what is shown in the picture. But it has been seen that many developers don't use it properly, which is highly unfortunate. Either they copy the text around the image or don't add it.
Syntax
When grouping selectors, keep in mind to make individual selectors and keep individual selectors to a single line.
You need to Wrap-up all declarations with a semi-colon. Although the last word is not mandatory, your code is not at all error-free without it.
You are required to lowercase all hex values, e.g., #fff. While scanning a document, lowercase letters seem much easier to discern because they are in unique shapes. Quote attribute values in selectors, e.g., input[type="text"]. They're only optional in some cases, and it's a good practice for consistency.
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
Declaration Order
Positioning: Positioning is the first in this order as it can remove an element from the normal document flow and override box model-related styles. Whether it's flex, float, grid, or table, the box model follows as it dictates a component's dimensions, placement, and alignment.
Box Model: The CSS box model is a specific box that wraps itself around each HTML element. It consists of: margins, borders, padding, and the actual content.
Typography: Typography introduces us to style, proportions, and spacing. Good typography helps in aesthetic appeal as well as helps in improving site usability at the time of text legibility and readability concepts application.
Visual
Misc
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
- Media Query Placement Always try to place your media query selector close to the relevant sets to avoid bundling. Also it makes your code easier to read.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
Comments
As codes are written and maintained by people so, make sure that your code is descriptive, well commented on, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.
Write in complete sentences for more extensive comments and succinct phrases for general notes.
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}
Media Query Placement
Place your media query selector close to the relevant sets to avoid bundling. Also, it makes your code easier to read.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
Stop using px
Stop using px as it does not allow the user to control the font size based on their requirements. Instead, you should use em and rem units. Both em and rem are flexible, scalable units translated by the browser into pixel values, depending on the font size settings in your design.
Top comments (0)