Some HTML, CSS Little Secrets In One Article

Writing beautiful, understandable code is just as important as writing a production code. There are many different guides and guidelines on the Internet.

I tried to go through all of them and put together a little cheat sheet. I have included only those rules that affect the style of the code and cover most of the key points.

Hope you find this useful!

Overall

Use HTTPS for embedded resources where possible. Always use HTTPS (https:) for images and other media files, style sheets, and scripts, unless the respective files are not available over HTTPS.
Use UTF-8 (no BOM). Specify the encoding in HTML templates and documents via <meta charset="utf-8">. Do not specify the encoding of style sheets as these assume UTF-8.

HTML Style Rules

Use HTML5. HTML5 (HTML syntax) is preferred for all HTML documents: <!DOCTYPE html>.
Never Skip the <title> Element. The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
Add the lang Attribute. You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
Provide alternative content for multimedia. For multimedia, such as images, videos, animated objects via canvas, make sure to offer alternative access. For images, that means the use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available.
Always define the width and height of images. This reduces flickering because the browser can reserve space for the image before loading.
Omit type attributes for style sheets and scripts. Specifying type attributes in these contexts is not necessary as HTML5 implies text/CSS and text/javascript as defaults. This can be safely done even for older browsers.
Close All HTML Elements

Bad example:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<article>This is only a test.
<img src="html5.gif">
<link rel="stylesheet" href="https://www.google.com/css/maia.css" type="text/css">
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Good example:

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  <head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://www.google.com/css/maia.css">
    <article>This is only a test.</article>
    <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
    <section>
      <p>This is a paragraph.</p>
      <p>This is a paragraph.</p>
    </section>
  </body>
</html>

HTML Formatting Rules

Indent by 2 spaces at a time. Don’t use tabs or mix tabs and spaces for indentation.
Nested elements should be indented once (two spaces).
Use only lowercase. All code has to be lowercase: This applies to HTML element names, attributes, attribute values (unless text/CDATA), CSS selectors, properties, and property values (with the exception of strings).
Remove trailing white spaces. Trailing white spaces are unnecessary and can complicate diffs.
Use a new line for every block, list, or table element, and indent every such child element. Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line.
When quoting attribute values, use double quotation marks. Use double ("") rather than single quotation marks ('') around attribute values.

Bad example:

<A HREF = "/">Home</A>
<a class='maia-button maia-button-secondary'>Sign in</a>
<ul>
<li>Fantastic<li>Great
</ul>

Good example:

<img src="google.png" alt="Google">
<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

CSS Style Rules

Use meaningful or generic ID and class names. Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the element in question, or that are otherwise generic.
Use ID and class names that are as short as possible but as long as necessary. Try to convey what an ID or class is about while being as brief as possible.
Avoid qualifying ID and class names with type selectors. Unless necessary (for example with helper classes), do not use element names in conjunction with IDs or classes.
Separate words in ID and class names by a hyphen. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.
Use shorthand properties where possible. CSS offers a variety of shorthand properties (like font) that should be used whenever possible, even in cases where only one value is explicitly set.
Omit unit specification after “0” values, unless required. Do not use units after 0 values unless they are required.
Omit leading “0”s in values. Do not put 0s in front of values or lengths between -1 and 1.
Use 3 character hexadecimal notation where possible. For color values that permit it, 3 character hexadecimal notation is shorter and more succinct.
Prefer line comments to block comments.
Prefer comments on their own line. Avoid end-of-line comments.

Bad example:

/* Not recommended: meaningless */
#yee-1901 {
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0em;
}
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {
color: #ffffff
}

Good example:

/* Recommended: specific */
#gallery {
  padding: 0 1em 2em;
}

#login {
  font-size: .8em;
}

.demo-image {
  color: #fff
}

CSS Formatting Rules

Alphabetize declarations. Put declarations in alphabetical order in order to achieve consistent code in a way that is easy to remember and maintain.
Use soft tabs (2 spaces) for indentation.
Indent all block content. Indent all block content, that is rules within rules as well as declarations, so to reflect hierarchy and improve understanding.
Use a semicolon after every declaration. End every declaration with a semicolon for consistency and extensibility reasons.
Use a space after a property name’s colon. Always use a single space between property and value (but no space between property and colon) for consistency reasons.
Use a space between the last selector and the declaration block. Always use a single space between the last selector and the opening brace that begins the declaration block.
Separate selectors and declarations by new lines. Always start a new line for each selector and declaration.
Separate rules by new lines. Always put a blank line (two line breaks) between rules.
Use single ('') rather than double ("") quotation marks for attribute selectors and property values.

Bad example:

.test {
display:block;
height:100px
}
a:focus, a:active {
position: relative; top: 1px
}
html {font-family: "open sans", arial, sans-serif;}

Good example:

html {
  font-family: 'open sans', arial, sans-serif;
}

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

.example {
  background: fuchsia;
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: blue;
}

Useful links:

P.S. Thanks for reading!

More articles: