# HTML
## Respecto la sintaxis
- Usar tabs suaves, con solo dos espacios
- Los elementos deben estar indentados para mostrar su anidación
- Siempre comillas dobles en atributos
- Incluir de preferencia, un slash final en los elementos autocontenidos (ejem: img)
- No omitir etiquetas de cierre opcional (e.g. `</li>` o `</body>`)
- Nunca omitir el `<!DOCTYPE html> `
- Nunca omitir el idioma de la página (ejm: `<html lang="en-us">` o `<html lang="es">` o `<html lang="en-419">`)
- Usar de preferencia la etiqueta que le indica a IE que debe usar la modalidad más alta de compatibilidad y ponerlo tan pronto como se pueda en la página
~~~ html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
~~~
- Siempre usar la página de codificación respectiva
~~~ html
<head>
<meta charset="UTF-8">
</head>
~~~
- El orden de los includes de css y javascript:
En html5, no hay necesidad de indicar el type cuando se incluye archivos css o js, ya que tienen respectivos valores por defecto, pero el orden a seguir en su inclusión debe ser:
> Uso de un link
> Uso de estilo
> Uso de script
~~~ html
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>
~~~
- Nunca mezclar tabs con espacios en blanco, para la indentación
- Orden de atributos
Procurar que el orden de los atributos sea:
>class
>id, name
>data-*
>src, for, type, href, value
>title, alt
>role, aria-*
>disabled
ej:
~~~ html
<a class="..." id="..." data-toggle="modal" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">
~~~
- puedes usar [ y ] cuando tengas muchas clases en un elemento
Este pequeño truco le permite escanear HTML más rápido
~~~ html
<button class = '[o-layout]'>
<div class = '[o-layout-item o-layout-item - first] c-button'> </ div>
<!-- Al escanear HTML, el ojo puede diferenciar rápidamente quién hace qué -->
</ button>
~~~