Mostrar y explicar las recomendaciones de estilo al elaborar documentos de markup HyperText Markup Language
El objetivo del snippet es mostrar y explicar las recomendaciones de estilo para elaborar documentos en HTML al importar recursos embebidos, indentación, uso de mayúsculas y minúsculas, codificación, etc. Para optimizar el procesamiento de estos documentos.
- Para elaborar los documentos no hay dependencias. Sólo hay que utilizar un editor de texto.
- Recomendado: SublimeText2
-
Reglas Generales
-
Protocolo: Al indicar la ruta de recursos embebidos se recomienda omitir el protocolo, por ejemplo: Recomendado:
html <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>No recomendado:html <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> -
Indentación: Se recomienda indentar con dos espacios, por ejemplo:
html <ul> <li>Fantastic <li>Great </ul> -
Minúscula: Se recomienda el uso de minúsculas, por ejemplo:
<img src="google.png" alt="Google">
-
Espacios blanco al final de las líneas: Se recomienda que no haya espacios blancos al final de las líneas porque complican los diffs en un sistema CVS, por ejemplo:
<p>Yes please.
-
-
Reglas Meta Generales
-
Codificación de caracteres. Se recomienda UTF-8
-
Comentarios Se recomienda comentar el código cuando sea posible.
-
Elementos de acción Se recomienda utilizar la palabra clave 'TODO', por ejemplo:
html {# TODO(john.doe): revisit centering #} <center>Test</center>
-
-
Reglas de estilo HTML
- Doctype
Se recomienda utilizar
HTML5 (<!DOCTYPE html>).
- Doctype
Se recomienda utilizar
Además se recomienda no cerrar los elementos vacíos como
, en lugar de
.
- Validez
Se recomienda utilizar html válido cuando sea posible, a menos que se quiera alcanzar una meta de desempeño que impida utilizar html válido.
- Semántica
Se recomienda utilizar los elementos para lo que fueron creados, por ejemplo:
No recomendado:
```html
<div onclick="goToRecommendations();">All recommendations</div>
```
Recomendado:
```html
<a href="recommendations/">All recommendations</a>
```
- Proveer alternativas en elementos multimedia, por ejemplo:
No recomendado:
```html
<img src="spreadsheet.png">
```
Recomendado:
```html
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
```
- Contenido de HTML
Se recomienda que el documento html contenga sólo HTML y la menor cantidad de referencias a hojas de estilo posibles.
Recomendado:
```html
<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
<p>It’s awesome!
```
No Recomendado:
```html
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
<u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>
```
- Referencia de Entidades
Se recomienda no usar referencia a entidades sino utilizar la codificación UTF-8.
No recomendado:
```html
The currency symbol for the Euro is “&eur;”.
```
Recomendado:
```html
The currency symbol for the Euro is “€”.
```
- Etiquetas opcionales
Para optimización de archivos de html se recomienda omitir algunos tags siguiendo las reglas de la siguiente liga:
```html
<https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission>
```
Por ejemplo:
Se puede omitir la etiqueta de apertura de un elemento html si el primer elemento que contiene no es un comentario.
Se puede omitir la etiqueta que cierra un elemento si el elemento que lo sigue inmediatamente no es un comentario.
No recomendado:
```html
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>
```
Recomendado:
```html
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
```
- Atributo de estilo para scripts y css.
Se recomienda omitir el atributo para css a menos que no sea css. De igual forma para javascript se recomienda omitirlo si no se trata de js.
No recomendados:
```html
<link rel="stylesheet" href="//www.google.com/css/maia.css"
type="text/css">
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
```
Recomendado:
```html
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
```
- Ejemplo
Se adjunta un documento html siguiendo estas recomendaciones.
-
Referencia 1:
-
Referencia 2:
- Autor del snippet: Julio Zatarain Gulmar @juliozata
- Los snippets pertenecen a KamikazeLab