- Añade el elemento title
El valor para el elemento title es usado por varias aplicaciones, no solo el navegador.
--MAL:
<head>
<meta charset="UTF-8">
</head>
--BIEN:
<head>
<meta charset="UTF-8">
<title="HTML Best Practices">
</head>
- No usar el elemento base
Una ruta o URL absoluta es mas segura tanto para usuarios como para desarrolladores.
--MAL:
<head>
...
<base href="/blog/">
<link href="hello-world" rel="canonical">
...
</head>
--BIEN:
<head>
....
<link href="/blog/hello-world" rel="canonical">
....
</head>
- Especificar el tipo MIME de recursos vinculados menores
Esto es una sugerencia de como maneja la aplicación este recurso.
--MAL:
<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">
--BIEN:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">
- No enlazar a favicon.ico
Casi todos los navegadores obtienen de forma /favicon.ico automática y asincrónica.
--MAL:
<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
--BIEN:
<!-- Coloca "favicon.ico" en el directorio raíz -->
- Agrega el atributo title a hojas de estilo alternativas
Un etiquetado legible por los humanos ayuda a las personas a seleccionar la hoja de estilo adecuada.
--MAL:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet">
--BIEN:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
- Para la URL, utilizar el elemento link
El valor del elemento href, puede contener una URL.
--MAL:
<section itemscope itemtype="http://schema.org/BlogPosting">
<meta content="https://example.com/blog/hello" itemprop="url">
....
</section>
--BIEN:
<section itemscope itemtype="http://schema.org/BlogPosting">
<link href="/blog/hello" itemprop="url">
....
</section>
- Especificar la codificación de caracteres del documento
UTF-8 todavía no está predefinido en todos los navegadores.
--MAL:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
--BIEN:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
- No utilizar codificación de caracteres antigua
Los encabezados del HTML deben ser especificados por un servidor, sea simple.
--MAL:
<meta http-equiv=·Content-Type” conten=”text/html; charset=UTF-8”>
--BIEN:
<meta charset=”UTF-8”>
- Especifica la codificación de caracteres primero
Spec requiere que la codificación de caracteres sea específicada en los primeros 1024 byte del documento.
--MAL:
<head>
<meta content=”width=device-width” name=”viewport”>
<meta charset=”UTF-8”>
….
</head>
--BIEN:
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
...
</head>
- Usa UTF-8
Con UTF-8, eres libre de usar Emoji.
--MAL:
<meta charset=”Shift_JIS”>
--BIEN:
<meta charset=”UTF-8”>
- Omite el atributo type en el CSS
En HTML5, por defecto, el valor del atributo type del elemento style es text/css.
--MAL:
<style type=”text/css”>
…
</style>
--BIEN:
<style>
….
</style>
- No comentar el contenido del elemento style
Este ritual es para navegadores viejos.
--MAL:
<style>
<!--
….
-->
</style>
--BIEN:
<style>
….
</style>
- No mezcle etiquetas para CSS y JavaScript
A veces, el elemento script puede bloquear la construccion del DOM.
--MAL:
<script src=”/js/jquery.min.js”></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>
--BIEN:
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
--TAMBIEN BIEN:
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">
Comentarios
Publicar un comentario