por Aunque los sitios web modernos generalmente se construyen con interfaces fáciles de usar, es útil conocer algo de HTML básico. Si conoce las siguientes 17 etiquetas de ejemplo HTML (y algunos extras), podrá crear una página web básica desde cero o editar el código creado por una aplicación como WordPress.
Hemos proporcionado ejemplos de código HTML con salida para la mayoría de las etiquetas. Si desea verlos en acción, descargue el archivo HTML de muestra al final del artículo. Puede reproducirlo en un editor de texto y cargarlo en un navegador para ver qué hacen sus ediciones.
1.
Necesitará esta etiqueta al comienzo de cada documento HTML que cree. Garantiza que un navegador sepa que está leyendo HTML y espera HTML5, la última versión.
Si bien esto no es en realidad una etiqueta HTML, es útil saberlo.
2.
Esta es otra etiqueta que le dice al navegador que está leyendo HTML. La etiqueta ve justo después de la etiqueta DOCTYPE y ciérrala con una etiqueta justo al final de su archivo. Todo lo demás en su documento va entre estas etiquetas.
3. La etiqueta
Para las páginas básicas, el
contendrá su título, y eso es todo. Pero hay algunas otras cosas que puede incluir, que repasaremos en un momento. 4. Esta etiqueta establece el título de su página. Todo lo que tiene que hacer es insertar su título en la etiqueta y cerrarlo, así (también he incluido etiquetas de encabezado para mostrar el contexto):
Este es el nombre que aparecerá como título de la pestaña cuando se abra en un navegador.
Al igual que la etiqueta del título, los metadatos se colocan en el área del encabezado de su página. Los metadatos son utilizados principalmente por los motores de búsqueda y son información sobre lo que hay en su página. Hay varios metacampos, pero estos son algunos de los más utilizados:
A continuación, se muestra un ejemplo que podría aplicarse a esta página:
La etiqueta «viewport» siempre debe tener «width = device-width, initial-scale = 1.0» como contenido para asegurarse de que su página se muestre correctamente en dispositivos móviles y de escritorio.
6. Después de cerrar la sección de encabezado, llega al cuerpo. Lo abres con la etiqueta Todo el contenido de su página web va entre estas etiquetas. Es tan simple como parece:
7. La etiqueta <head>
<title>My Website</title>
</head><meta name="description" content="A basic HTML tutorial">
<meta name="keywords" content="HTML,code,tags">
<meta name="author" content="MUO">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
Everything you want displayed on your page.
</body>
define un encabezado de nivel superior en su página. Por lo general, este será el título e idealmente solo habrá uno en cada página.
define los títulos de nivel dos como títulos de sección,
subencabezados de nivel tres, y así sucesivamente, hasta
. Por ejemplo, los nombres de las etiquetas en este artículo son encabezados de segundo nivel.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
. Por ejemplo, los nombres de las etiquetas en este artículo son encabezados de segundo nivel.
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>
<h1>Big and Important Header</h1>
<h2>Slightly Less Big Header</h2>
<h3>Sub-Header</h3>Resultado:
Como puede ver, se hacen más pequeños con cada nivel.
8.
La etiqueta de párrafo comienza un nuevo párrafo. Esto generalmente inserta dos saltos de línea.
Mire, por ejemplo, la ruptura entre la línea anterior y esta. Esto es lo que hará una etiqueta
.
<p>Your first paragraph.</p>
<p>Your second paragraph.</p>Resultado:
Tu primer párrafo.
Tu segundo párrafo.
También puede usar estilos CSS en etiquetas de párrafo, como esta, que cambia el tamaño del texto:
<p style="font-size: 150%;">This is 50% larger text.</p>Resultado:
9.
La etiqueta de salto de línea inserta un solo salto de línea:
<p>The first line.<br>
The second line (close to the first one).</p>Resultado:
La etiqueta funciona de manera similar
. Esto dibuja una línea horizontal en su página y es útil para separar secciones de texto.
10.
Esta etiqueta define el texto importante. En general, esto significa que estará en negrita. Sin embargo, puede usar CSS para mostrar el texto de una manera diferente.
Sin embargo, puede utilizar de forma segura para texto en negrita.
Resultado:
Cosas muy importantes que quieres decir.
Si está familiarizado con la etiqueta para texto en negrita, aún puede usarlo. No hay garantía de que seguirá funcionando en futuras versiones de HTML, pero funciona por ahora.
11.
Cómo es , es están relacionados. La etiqueta identifica el texto enfatizado, lo que generalmente significa que estará en cursiva. Nuevamente, existe la posibilidad de que CSS haga que el texto enfatizado se muestre de manera diferente.
Resultado:
Una línea enfatizada.
La etiqueta todavía funciona, pero puede quedar obsoleto en futuras versiones de HTML.
12.
La etiqueta , o ancla, le permite crear enlaces. Un enlace simple se ve así:
Resultado:
Ir a MUO
El atributo «href» identifica el destino del enlace. En muchos casos, este será otro sitio web. También podría ser un archivo, como una imagen o un PDF.
Otros atributos útiles incluyen «objetivo» y «título». El atributo de destino se usa casi exclusivamente para abrir un enlace en una nueva pestaña o ventana, así:
Resultado:
Ir a MUO en una nueva pestaña
El atributo «título» crea una información sobre herramientas. Coloca el cursor sobre el enlace de abajo para ver cómo funciona:
Resultado:
Coloca el mouse sobre para ver la pista
13. Si desea incrustar una imagen en su página, deberá utilizar la etiqueta de imagen. Normalmente lo utilizará junto con el atributo «src». Esto especifica la fuente de la imagen, así:
Resultado:
Hay otros atributos disponibles, como «altura», «ancho» y «alt». Así es como podría verse:
Como era de esperar, los atributos «alto» y «ancho» establecen el alto y el ancho de la imagen. En general, es una buena idea configurar solo uno para que la imagen cambie de tamaño correctamente. Si usa ambos, puede terminar con una imagen alargada o aplastada.
La etiqueta «alt» le dice al navegador qué texto mostrar si la imagen no se puede mostrar y es una buena idea incluirlo con cualquier imagen. Si alguien tiene una conexión particularmente lenta o un navegador antiguo, aún puede tener una idea de cómo debería ser su página.
14. La etiqueta de lista ordenada le permite crear una lista ordenada. En general, esto significa que obtendrá una lista numerada. Cada elemento de la lista necesita una etiqueta de elemento de lista (
Resultado:
Lo primero
Segunda cosa
Tercera cosa
En HTML5, puede utilizar El atributo «tipo» le permite decirle al navegador qué tipo de símbolo utilizar para los elementos de la lista. Se puede configurar en «1», «A», «a», «I» o «i», configurando la visualización de la lista con el símbolo indicado así:
15. La lista sin clasificar es mucho más simple que su contraparte ordenada. Es simplemente una lista con viñetas.
Resultado:
Primer elemento
Segundo elemento
Tercer elemento
Las listas desordenadas también tienen atributos de «tipo» y puede establecerlos en «disco», «círculo» o «cuadrado».
dieciséis. Si bien el uso de tablas para formatear está mal visto, hay muchas ocasiones en las que querrá usar filas y columnas para segmentar información en su página. Se necesitan varias etiquetas para que una mesa funcione. Aquí está el código HTML de muestra:
Las etiquetas especificar el inicio y el final de la tabla. La etiqueta Cada fila de la tabla está incluida en una etiqueta.
Resultado:
17. Cuando esté citando otro sitio web o persona y quiera distinguir la cita del resto de su documento, use la etiqueta blockquote. Todo lo que tiene que hacer es incluir la cita en las etiquetas de apertura y cierre de blockquote:
Resultado:
La Web como la imaginaba, todavía no la hemos visto. El futuro sigue siendo mucho más grande que el pasado.
El formato exacto utilizado puede depender del navegador que esté utilizando o del CSS de su sitio. Pero la etiqueta sigue siendo la misma.
Ejemplos de código HTML
Con estos 17 ejemplos de HTML, debería poder crear un sitio web simple. Puede probarlos todos ahora mismo en un editor de texto en línea para tener una idea de cómo funcionan.
Para lecciones más breves en HTML, pruebe algunas aplicaciones de microaprendizaje para codificación. Te ayudarán a ser más rápido en poco tiempo.
Leer siguiente Sobre el Autor <strong>Very important things you want to say.</strong>
<em>An emphasized line.</em>
<a href="https://www.muo.com/>Go to MUO</a><a href="https://www.muo.com/" target="_blank">Go to MUO in a new tab</a><a href="https://www.muo.com/" title="This is a tool tip">Hover over this to see the tool tip</a>
<img src="https://www.makeuseof.com/tag/simple-html-code-learn-minutes/wp-content/uploads/2019/04/sunlit-birds.jpg"><img src="https://www.makeuseof.com/tag/simple-html-code-learn-minutes/wp-content/uploads/2019/04/sunlit-birds.jpg" alt="the name of your image">
<ol>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ol> para invertir el orden de los números. Y puede establecer el valor inicial con el atributo de inicio.
<ol type="A">
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<table>
<tbody>
<tr>
<th>1st column</th>
<th>2nd column</th>
</tr>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tbody>
</table> es
. Cada celda dentro de cada fila está encerrada en etiquetas
para encabezados de columna o etiquetas
para datos de columna. Necesita uno de estos para cada columna en cada fila.
1ra columna
2da columna
Fila 1, columna 1
Fila 1, columna 2
Fila 2, columna 1
Fila 2, columna 2
<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>
