HTML is a forgiving language that allows poor code to execute and render. However, this does not allow you to write poor code. Be sure to nest and close all elements correctly, to use IDs and classes appropriately, and to always validate your code.
Make Use of Semantic Elements
Carefully decide the proper semantic elements in your markup.
Use the Proper Document Structure
Use proper document structure, including the <!DOCTYPE html> doctype, and the <html>, <head>, and <body> elements.
Keep the Syntax Organized
A few quick rules:
Use lowercase letters within elements names, attributes, and values
Indent nested elements
Strictly use double quotes
Remove the forward slash at the end of self-closing elements
Omit the values on Boolean attributes
Use Practical ID & Class Values
The ID and class values need to be practical, relating to the content itself, not the style of the content.
For example, don’t use colors as class names, as you may want to change the colors in the future, and you’ll need to change both CSS and HTML to do that without causing confusion.
Use the Alternative Text Attribute on Images
Images should always include the alt attribute. Screen readers and other accessibility software rely on that.
The alt attribute value should be very descriptive of what the image contains. If the image doesn’t contain anything of relevance, the alt attribute should still be included and left blank so that the screen readers won’t read the name of the image.
If an image doesn’t have a meaningful value, it should be included as a CSS background image, not as an <img> element.
Separate Content from Style
Never use inline styles within HTML. Doing so creates pages that take longer to load, are difficult to maintain, and cause headaches for designers and developers. Instead, use external style sheets.
Avoid a Case of “Divitis”
Keep your code lean and reduce markup by tying multiple styles to a single element. Additionally, use HTML5 structural elements where suitable.
Continually Refactor Code
As websites and code bases grow, they tend to leave behind cruft. Remove old code and styles as necessary. Also, evaluate and refactor your code after you write it, looking for ways to condense it and make it more manageable.
CSS Coding Practices
Organize Code with Comments
Keep your styles organized in logical groups and provide comments noting what each group pertains to.
You can also use comments to build a table of contents at the top of the file.
Build Proficient Selectors
Use short and direct selectors. Nest them only two to three levels deep, and remove as many location-based qualifying selectors as possible. Otherwise the selectors are likely to break the cascade of the CSS files.
Use Specific Classes When Necessary
Replace long and specific selector chains with a single class. It allows the code to render faster and makes it more manageable.
Use Shorthand Properties & Values
When you need to set multiple margins around an element, for example, use the margin shorthand property.
If you’re only targeting one side of the element, however, avoid the shorthand to ensure that other margin properties are not overwritten.
Use Shorthand Hexadecimal Color Values
When possible, use the three-character shorthand hexadecimal color value, and always use lowercase characters within your color values. The idea is to remain consistent, prevent confusion, and embrace the syntax of the language.
Drop Units from Zero Values
Adding the unit is unnecessary and provides no additional value.
Group & Align Vendor Prefixes
To keep the code easy to read and modify, group and indent vendor prefixes so that the property names and their values stack vertically.
Modularize Styles for Reuse
If different elements share the same style, use a common class with a name that suits them all.
When HTML was being developed, CSS was not widely supported, so websites were built primarily with tables.
Today tables are used for organizing data, like they should be.
Creating a Table
A <th> element’s scope attribute helps to identify what content a table header relates to. Possible values are col, row, colgroup, and rowgroup. This is especially useful for people using screen readers and other assistive technologies.
The <caption> element provides a caption or title for a table. It must come immediately after the opening <table> tag, and it is positioned at the top of a table by default.
Table Head, Body, & Foot
The table head element, <thead>, wraps the heading row or rows of a table to denote the head. It should be placed at the top of a table, after any <caption> element and before any <tbody> element.
Originally the <tfoot> element had to come immediately after the <thead> element, but HTML5 allows any order, as long as they are never parent elements of one another. The <tbody> element should contain the primary data within a table, while the <tfoot> element contains data that outlines the contents of a table.
Border Collapse Property
There are three values for the border-collapse property: collapse, separate (default), and inherit. The collapse value condenses the borders into one, choosing the table cell as the primary border.
Border Spacing Property
As the border-collapse property with the separate value allows borders to be stacked up against one another, the border-spacing property can determine how much space, if any, appears between the borders.
Additionally, the border-spacing property may accept two length values: the first value for horizontal spacing and the second value for vertical spacing.
Adding Borders to Rows
Borders cannot be applied to <tr> elements or table structural elements.
It happens like this: set the table’s border-collapse value to collapse, and then add a bottom border to each table cell, regardless of whether it’s a <th> or <td> element. You can remove the bottom border from the cells within the last row of the table by using the :last-child pseudo-class selector. If the table is using the structural elements, make sure to prequalify the last row as being within the <tfoot> element.
You can use the :nth-child pseudo-class selector with an even or odd argument to select every other <tr> element for custom styling.
If your <td> elements include borders while the <th> elements don’t, you need to set the table’s border-collapse property to separate and the border-spacing property to 0. In addition, you need to set each cell’s borders only once, for example by using the border-right and border-bottom properties on the cells and the border-left property on the cells in the first column.
Otherwise with the border-collapse property set to collapse, the borders of the <td> elements would make the body of the table wider than the head.
The vertical-align property works only with inline and table-cell elements. It won’t work for block, inline-block, or any other element levels. [JN: I’ve used vertical-align for inline-block elements succesfully, so this is a little confusing. If you know why it works, please leave a comment.]
The vertical-align values of top, middle, and bottom vertically position the text in relation to the table cell, for table-cell elements, or to the closest parent element, for inline-level elements.
Completely Styled Table
You can use display: block to force stuff on its own row within a table cell.
The :only-of-type pseudo-class selector selects an element if it’s the only element of its type within a parent element.
It is best practice to give an <input> element a name attribute.
Below is a list of the new HTML5 input types:
The <textarea> element has start and end tags that can wrap plain text. Because it only accepts one type of value, the type attribute doesn’t apply here.
The <textarea> element has two sizing attributes: cols for width in terms of the average character width and rows for height in terms of the number of lines of visible text. The size of a textarea, however, is more commonly identified with CSS.
Multiple Choice Inputs & Menus
Each radio button element should have the same name attribute value so that all of the buttons within a group correspond to one another.
To preselect a radio button for users we can use the Boolean attribute checked.
The name attribute resides on the <select> element, and the value attribute resides on the <option> elements.
Drop-down menus can use the selected Boolean attribute to preselect an option for users.
The Boolean attribute multiple allows a user to choose more than one option from the list at a time. Additionally, using the selected Boolean attribute on more than one <option> element will preselect multiple options.
The size of the <select> element should be adjusted appropriately to allow for multiple selections. It may be worthwhile to inform users to use the Shift and Ctrl keys when making multiple selections.
As an <input> element, the submit button is self-contained and cannot wrap any other content. If more control over the structure and design of the input is desired, the <button> element may be used.
By default, the <button> element acts as if it has a type attribute value of submit.
Hidden inputs provide a way to pass data to the server without displaying it to users. They are typically used for tracking codes, keys, or other information that is helpful when processing the form. This information can be found by viewing the source code of the page. It should therefore not be used for sensitive or secure information.
Organizing Form Elements
The value of the for attribute should be the same as the value of the id attribute on the form control the label corresponds to. This allows users to click on the <label> element to bring focus to the proper form control.
The <label> element may also wrap form controls. Doing so allows omission of the for and id attributes.
Fieldsets group form controls and labels into organized sections. The <fieldset> is a block-level element that wraps related elements inside a form for better organization. By default, they include a border outline which can be modified using CSS.
A legend provides a caption, or heading, for the <fieldset> element. The <legend> element wraps text describing the form controls that fall within the fieldset. The markup should include the <legend> element directly after the opening <fieldset> tag. On the page, the legend will appear within the top left part of the fieldset border.
Form & Input Attributes
The disabled Boolean attribute turns off an element or control so that it is not available for interaction or input. It also won’t send any value to the server.
Applying the disabled Boolean attribute to a <fieldset> element will disable all of the form controls within the fieldset.
Error message styles are controlled by the browser and cannot be styled with CSS. Invalid elements and form controls, on the other hand, can be styled using the :optional and :required CSS pseudo-classes.
Validation also occurs specific to a control’s type. For example, an element with a type attribute value of email will require not only that a value exists within the control, but also that it is a valid email address.
Other form and form control attributes include the following: