Skip to content

Latest commit

 

History

History
165 lines (122 loc) · 3.51 KB

html.md

File metadata and controls

165 lines (122 loc) · 3.51 KB

HTML

↩ Code Style

Table of content
  1. Common
  2. Syntax
  3. References

Common

Blank Lines and Indentation

  • Do not add blank lines without a reason.
  • Add 4 spaces of indentation. Do not use TAB.
  • Add blank lines to separate large or logical code blocks.
<!-- Bad -->
<section>

<h1>Moscow</h1>

<p>
    <strong>Moscow</strong> is the capital and the largest city of Russia with 12.2 million residents within the city limits and 16.8 million within the urban area. Moscow is one of three federal cities in Russia.
</p>

</section>

<!-- Good -->
<section>
    <h1>Moscow</h1>

    <p><strong>Moscow</strong> is the capital and the largest city of Russia with 12.2 million residents within the city limits and 16.8 million within the urban area. Moscow is one of three federal cities in Russia.</p>
</section>

Always declare the document type

And do it as the first line in your document.

<!doctype html>

Specify page language

Declaring a language is important for accessibility applications (screen readers) and search engines. Language can be found in the list.

<html lang="en-US">

Always declare the character set

UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

<meta charset="utf-8">

Don't forget about page title

The <title> element is required in HTML5.

<title>Make the title as meaningful as possible</title>

Use simple syntax for linking style sheets

<link rel="stylesheet" href="/path/to/styles.css">

Use simple syntax for loading external scripts

<script src="/path/to/script.js">

Use other tags and attributes to provide users more opportunity

See HTML5 layout.

Syntax

Use lower case element names

Lowercase look cleaner and are easier to write.

<!-- Bad -->
<Header>
    <A class="logo" href="//example.com/"></A>
</Header>
<!-- Good -->
<header>
    <a class="logo" href="//example.com/"></a>
</header>

Close all HTML elements

<!-- Bad -->
<section>
    <p>This is a paragraph.
    <p>This is a paragraph.
</section>
<!-- Good -->
<section>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
</section>

Dont close empty tags

<!-- Bad -->
<meta charset="utf-8" />
<!-- Good -->
<meta charset="utf-8">

Use lowercase attribute names

<!-- Bad -->
<a CLASS="link" Href="//example.com/">Link</a>
<!-- Good -->
<a class="link" href="//example.com/">Link</a>

Use duble quotation marks ("") for attribute

<!-- Bad -->
<a class=logo href=//example.com/></a>
<!-- Good -->
<a class="logo" href="//example.com/"></a>

Always use attributes alt, width and height for <img>

Always use the alt attribute with images. It is important when the image cannot be viewed.

Always define image size. It reduces flickering because the browser can reserve space for images before they are loaded.

<img src="/path/to/picture.png" alt="alt of picture" width="128" height="128">

No spaces around the equal signs

<!-- Bad -->
<link rel = "stylesheet" href = "styles.css">
<!-- Good -->
<link rel="stylesheet" href="styles.css">

References