Skip to content

03-html.md

Latest commit

 

History

History
230 lines (179 loc) · 5.2 KB

03-html.md

File metadata and controls

230 lines (179 loc) · 5.2 KB

HTML

Summary

  1. Global
  2. Identation
  3. Commits
  4. English
  5. Task number
  6. Status
  7. Message convention
  8. HTML
  9. Syntax
  10. Comments
  11. Character Encoding
  12. Attribute Order
  13. Performance
  14. Base Code
  15. CSS
  16. Syntax
  17. Comments
  18. Declaration Order
  19. Name
  20. Performance
  21. Media Queries
  22. Javascript
  23. Syntax
  24. Comments
  25. Variables
  26. Performance

Syntax

Use double quotes

<!-- Good -->
<div class="section">

<!-- Bad-->
<div class='section'>

Do not use the character / to elements that do not have closing tag.

<!-- Good -->
<img src="..." alt="...">

<!-- Bad-->
<img src="..." alt="..." />

⬆ back to the top

Comments

The most common use of comments in HTML, is to signal the closing of a tag. The character / would be the same as writing end. The preference in the tag identification is by its class.

<!-- Good -->
<div class="container" id="section">
</div><!-- /container -->

<!-- Bad -->
<div class="container" id="section">
</div><!-- section -->

The ideal is that the comments are not in the production environment, just being a guideline for development. We can also have a comment block to facilitate understanding.

<!-- Good -->
<!-- 
 Comment block ...
-->
<div></div>

<!-- Bad -->
<!-- 
 ###############################################################
  # Comment block ...
 ###############################################################
-->
<div></div>

⬆ back to the top

Character Encoding

Always use utf-8

<head>
  <meta charset="utf-8">
</head>

⬆ back to the top

Attribute Order

The attributes order facilitates reading and organization

  1. class
  2. id, name
  3. data-*
  4. src, for, type, href
  5. title, alt
  6. aria-*, role, itemprop
<div class="..." id="..." itemprop="..."></div>
<a class="..." href="...">...</a>
<img class="..." src="..." alt="...">

⬆ back to the top

Performance

If you need to have external script inside the tag head, should always be last.

<!-- Good -->
<link rel="stylesheet" href="style.css" />
<script src="scripts.min.js"></script>

<!-- Bad -->
<script src="scripts.min.js"></script>
</head>

Ideally, the scripts are in the end of the file, before the closing tag body.

<!-- Good -->
<script src="scripts.min.js"></script>
</body>

<!-- Bad -->
<script src="scripts.min.js"></script>
</head>

Remove spaces and comments, no doubt bring better performance and are dispensable in the production environment.

<!-- Good -->
<html><head>...</head><body><div class="main">...</div></body></html>

<!-- Bad -->
<html>
  <head>
    ...
  </head>
  <body>
    <div class="main">
      ...
    </div><!-- /main -->
  </body>
</html>

⬆ back to the top

Base Code

Basic HTML use for projects

<!DOCTYPE html>
<html class="no-js" lang="pt-BR" xml:lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script type="text/javascript">
      // to identify if javascript is active
      var tagHtml = document.getElementsByTagName("html")[0];
          tagHtml.className = tagHtml.className.replace('no-js', 'js');
    </script>
  </head>
  <body>

  </body>
</html>

Meta tags that use more.

<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="origin">
<meta name="description" content="Description">

<!-- facebook -->
<meta property="og:site_name" content="Site name">
<meta property="og:title" content="Title">
<meta property="og:type"  content="website">
<meta property="og:url" content="Url">
<meta property="og:description" content="Description">
<meta property="og:image" content="Image">
<meta property="fb:admins" content="">
<meta property="fb:app_id" content="">

<link rel="image_src" href="Image">

<!-- component schema.org -->
<meta itemprop="name" content="Site name">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Image">
<meta itemprop="url" content="Url">

<meta name="geo.country" content="">
<meta name="geo.region" content="">
<meta name="geo.placename" content="">

<!-- favicon -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<!-- canonical -->
<link rel="canonical" href="Url">

⬆ back to the top