En este artículo ves cómo esta web muestra los elementos HTML, con el diseño que la plantilla le aplica.
Las etiquetas se abren y luego se cierran, por ejemplo, un párrafo se abre con <p> y se cierra al finalizar con </p>.
Encabezados
Este es un encabezado de nivel 1
Los encabezados de nivel 1 son los más importantes. Los que resumen de qué va esta página. Suele haber solo uno. Etiqueta <h1>.
Este es un encabezado de nivel 2
Los encabezados de nivel 2 son menos importantes que los de nivel 1. Dividen a la página en varias secciones. Etiqueta <h2>.
Este es un encabezado de nivel 3
Los encabezados de nivel 3 son aún menos importantes que los de nivel 2. Dividen a las secciones anteriores en partes. Etiqueta <h3>.
Este es un encabezado de nivel 4
Los encabezados de nivel 4 son aún menos importantes que los de nivel 3. Menos usados pero a su vez, dividen a las partes anteriores en trozos más pequeños. Etiqueta <h4>.
Este es un encabezado de nivel 5
Los encabezados de nivel 5 son aún menos importantes que los de nivel 4. Mucho menos usados y lo mismo, dividen a los trozos anteriores en otros más pequeños. Etiqueta <h5>.
Este es un encabezado de nivel 6
Los encabezados de nivel 6 son los menos importantes de todos. No se usan apenas, pero existen. Para dividir el contenido anterior en cachos. Etiqueta <h6>.
Párrafo
Ejemplo de un párrafo normal y corriente. Etiqueta <p>.
Elementos en línea dentro de párrafos
Puedes poner texto en negrita con la etiqueta <strong>.
También texto en cursiva, con la etiqueta <em>.
El texto subrayado, es con la etiqueta <u>, pero no se recomienda, porque se puede confundir con un enlace.
Este es un enlace, con la etiqueta <a href="/destino-enlace">texto del enlace</a>
Un texto resaltado, con la etiqueta <mark>
Puedes poner un texto pequeño, con <small>.
Los superíndices, se ponen con la etiqueta <sup>.
Y los subíndices, con la etiqueta <sub>.
Listas ordenadas
- Elemento 1
- Elemento 2
- Elemento 3
Cada uno de los elementos anteriores es un <li>. Se agrupan dentro de una etiqueta <ol>.
Listas no ordenadas
- Elemento 1
- Elemento 2
- Elemento 3
Cada uno de los elementos anteriores es un <li>. Se agrupan dentro de una etiqueta <ul>.
Lista de definición
- HTML (término a definir)
- Lenguaje de marcado para crear páginas web (definición).
- CSS
- Lenguaje de estilos para definir la presentación
El término a definir va dentro de las etiquetas <dd>.
La definición dentro de las etiquetas <dt>.
Y todo ello dentro de las etiquetas <dl>.
Enlaces
Este es un enlace (que no lleva a ningún sitio). Etiqueta <a>.
Imágenes
Etiqueta <img src="/ruta-a-la-imagen.jpg" alt="Texto alternativo que la describe">.
Es de las pocas etiquetas que no hace falta cerrarlas al final.
Debes añadir el atributo alt para el texto alternativo. Puedes dejarlo vacío si la imagen es solo decorativa.
Línea horizontal
Etiqueta <hr>.
Citas
Para hacer una cita o referencia a una fuente de información dentro de un párrafo, con la etiqueta <cite>.
Para hacerla en un bloque, usa <blockquote>.
Esta es una cita larga. Puedes usarla para resaltar una frase o fragmento importante de un texto o autor.
Usa la etiqueta <blockquote> y dentro un párrafo o varios.
Código
Este es un ejemplo de código en línea: console.log('Hola mundo');, con la etiqueta <code>.
A continuación un ejemplo de código en bloque:
function saludar(nombre) {
return 'Hola ' + nombre;
}
console.log(saludar('Pablo'));
En este caso se usa la etiqueta <pre> y dentro la etiqueta <code>.
Tablas
| Columna 1 | Columna 2 | Columna 3 |
|---|---|---|
| Valor 1 | Valor 2 | Valor 3 |
| Valor 4 | Valor 5 | Valor 6 |
En este caso se usa la siguiente estructura de etiquetas:
<table>
<thead>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
<th>Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Valor 1</th>
<td>Valor 2</td>
<td>Valor 3</td>
</tr>
<tr>
<th>Valor 4</th>
<td>Valor 5</td>
<td>Valor 6</td>
</tr>
</tbody>
</table>
Tabla con Bootstrap
| Columna 1 | Columna 2 | Columna 3 |
|---|---|---|
| Valor 1 | Valor 2 | Valor 3 |
| Valor 4 | Valor 5 | Valor 6 |
Para que la tabla tenga este aspecto hay ponerle la clase table, de esta forma: <table class="table">.
Para que se adapte un poco mejor a teléfono móviles hay que crear un div que contenga a toda la tabla y que tenga la clase table-responsive, de esta forma: <div class="table-responsive">.
