Un estilo consistente hace que sea más fácil para otros entender el código HTML.
Mantén tu código ordenado, limpio y bien formado.
✔️ <!DOCTYPE html>
❌ <!doctype html>
❌ Mal:
<SECTION>
<p>Esto es un párrafo</p>
</SECTION>
<Section>
<p>Esto es un párrafo</p>
</SECTION>
✔️ Bien:
<section>
<p>Esto es un párrafo</p>
</section>
❌ Mal:
<section>
<p>Esto es un párrafo
<p>Esto es un párrafo
</section>
✔️ Bien:
<section>
<p>Esto es un párrafo</p>
<p>Esto es un párrafo</p>
</section>
❌ Mal:
<meta charset="utf-8">
✔️ Bien:
<meta charset="utf-8"/>
❌ Mal:
<div CLASS="menu">
✔️ Bien:
<div class="menu">
❌ Mal:
<table class=table striped>
<table class=striped>
✔️ Bien:
<table class=ç"striped">
❌ Mal:
<img src="html5.gif"/>
✔️ Bien:
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px;"/>
❌ Mal:
<link rel = "stylesheet" href = "styles.css"/>
✔️ Bien:
<link rel="stylesheet" href="styles.css"/>
Cuando usas un editor de HTML, hacer scroll horizontal es un inconveniente, así que es recomendable que una línea no pase de los 80 caracteres.
No añadas líneas en blanco sin razón.
Para legibilidad añade líneas en blanco para separar bloques de código.
Añade espacios de indentación para mejorar la legibilidad, pero no hace falta indentar todos los elementos.
❌ Mal:
<body>
<h1>Languaje de programación</h1>
<h2>JavaScript</h2>
<p>
JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también es usado en muchos entornos sin navegador.
</p>
</body>
✔️ Bien:
<body>
<h1>Languaje de programación</h1>
<h2>JavaScript</h2>
<p>JavaScript (JS) es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera clase, más conocido como el lenguaje de script para páginas web, pero también es usado en muchos entornos sin navegador.
</p>
</body>
Aunque está permitido, no es recomendable.
❌ Mal:
<!DOCTYPE html>
<head>
<title>Titulo de la página</title>
</head>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo</p>
Igual pasa con el <head>
❌ Mal:
<!DOCTYPE html>
<title>Titulo de la página</title>
<h1>Esto es un encabezado</h1>
<p>Esto es un párrafo</p>
El <title> es obligatorio en HTML.
Para que los navegadores y los motores de búsqueda interpreten bien el contenido es necesario especificar el idioma y la codificación de caracteres tan pronto como sea posible.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8"/>
<title>Guía de estilo de HTML</title>
</head>
Para que se vea bien la página en todos los dispositivos es necesario incluir el meta del viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Los comentarios cortos deberían ser como este:
<!-- Esto es un comentario -->
Y los largos como este:
<!--
Esto es un comentario largo de ejemplo. Esto es un comentario largo de ejemplo. Esto es un comentario largo de ejemplo. Esto es un comentario largo de ejemplo.
-->
En el link no es necesario el el atributo type
<link rel="stylesheet" href="styles.css"/>
No es necesario usar el atributo type.
<script src="main.js">
Los servidores linux distinguen entre mayúsculas y minúsculas, pero otros como los de Microsoft no.
Así que para que no haya confusión es mejor siempre poner todos los nombres de archivos en minúscula, y así evitar problemas.
- Los ficheros de HTML deberían tener la extensión .html o .htm
- Los ficheros de CSS deberían tener la extensión .css
- Los ficheros de JavaScript deberían tener la extensión .js
