- Empezar con DOCTYPE
Se utiliza para declarar un documento html Standard.-- MAL:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN "http://www.w3.org/TR/html4/strict.dtd">
-- BIEN:<!DOCTYPE html>
- No uses una declaración XML
¿Estas seguro de que quieres utilizar una declaración XHTML?--MAL:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
--BIEN:
<!DOCTYPE html>
- Usa las referencias de caracteres lo menos posible
Si escribes tu documento en UTF-8, la mayoría de caracteres (incluyendo los EMOJI) pueden ser escritos directamente.
--MAL:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
--BIEN:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
- Escribe &, <, >, ", y ' con las referencias de caracter
Estes caracteres no se leen por el navegador o pueden causar bugs.
--MAL:
<h1>The "&" character</h1>
--BIEN:
<h1>The "&" character</h1>
- Coloca espacios en blanco en las etiquetas de comentarios
Algunos caracteres no pueden ser usados inmediatamente despues de la etiqueta de apertura y antes de la etiqueta de cierre en un comentario. Además ayuda haciendo mas agradable y facilitando la visualización.
MAL:
<!--This section is non-normative-->
BIEN:
<!-- This section is non-normative -->
- No pongas espacios en blanco alrededor de las etiquetas y atributos.
No hay razon para hacer esto.
--MAL:
<h1 class=" title " >HTML Best Practices</h1>
--BIEN:
<h1 class="title">HTML Best Practices</h1>
- No mezcles mayúsculas y minúsculas
Se trata de tener algo de constancia.
--MAL:
<a HREF="#general">General</A>
--BIEN:
<a href="#general">General</a>
- No mezcles las comillas simples con comillas dobles
Iguales es mejor.
--MAL:
<img alt="HTML BEST Practices" src='/img/logo.jpg'>
--BIEN:
<img alt="HTML BEST Practices" src="/img/logo.jpg">
- No separes los atributos con dos o mas espacios en blanco
Tu extraña regla de formato puede confundir a alguien.
--MAL:
<input name="q" type="search">
--BIEN:
<input name="q" type="search">
- Omite valores boleanos de un atributo
Es más fácil de escribir, o no?
--MAL:
<audio autoplay="autoplay" src="/audio/theme.mp3">
--BIEN:
<audio atoplay src="/audio/theme.mp3">
- No mezcle los atributos data-*, Microdata y RDFa LITE con atributos comunes
Una cadena de etiquetas puede ser muy complicada. Esta simple regla ayuda a leer dicha regla de etiquetas.
--MAL:
<img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
--BIEN:
<img alt="HTML Best Practices"src="/img/logo.png" data-width="88" data-height="31" itempro="image">
- Preferible la semantica ARIA implicita por defecto
Algunos elementos disponen de un rol ARIA implicito en un documento HTML, no hay que especificarlo.
--MAL:
<nav role="navigation">
...
</nav>
<hr role="separator">
--BIEN:
<nav>
....
</nav>
<hr>
Fuente: https://github.com/hail2u/html-best-practices License: CC0
Comentarios
Publicar un comentario