pruebaHTML/guiadeestiloHTML.html at master · Antonela89/pruebaHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>¿Cómo crear buen código HTML?</title>
</head>
<body>
<header>
    <h1>Estilo HTML</h1>
</header>
<section>
    <ul>
        <li>Declarar siempre el tipo de documento</li>
        <ul>
            <li><samp>!DOCTYPE html</samp></li>
        </ul>
        <li>Usar minúsculas para nombrar los elementos</li>
        <ul>
            <li>Las minúsculas se ven más limpias y son más fáciles de escribir</li>
            <li>Tipo de letra usado por los desarrolladores</li>
        </ul>
        <li>Cerrar todos los elementos HTML</li>
        <li>Citar los valores de los atributos</li>
        <li>En las imagenes siempre colocar alt, width y height</li>
        <li>No colocar espacios alrededor de los signos iguales</li>
        <li>Evitar líneas de código largas</li>
        <li>Agregar sangrias de ser necesario</li>
        <ul>
            <li>Para facilitar la lectura:</li>
            <ul>
            <li>Agregar líneas de espacios en blanco para separar bloques de código</li>
            <li>Agregar 2 espacios de sangria</li>
            <li>No usar la tecla Tab</li>
        </ul>
        <li>No omitir el title</li>
        <li>No omitir etiquetas Html, Head y Body</li>
        <li>Agregar el atributo lang</li>
        <li>Definir siempre meta charset</li>
        <li>Definir la configuración de la ventana gráfica: diseño responsivo</li>
        <li>Escritura de comentarios</li>
        <ul><li>Los comentarios cortos deben escribirse en una línea</li>
            <ul><li>&lt;!-- This is a comment --&gt;</code></li></ul>
        <li>Los comentarios largos son más fáciles de observar si tienen una sangria con dos espacios
        </li>
        <ul><li><>
            <pre>
                &lt;!--
                    This is a long comment example. This is a long comment example.
                    This is a long comment example. This is a long comment example.
                    --&gt;
            </pre></li></ul>
        </</ul>
        </ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>
</body>
</html>