{"id":5922,"date":"2019-12-06T12:52:46","date_gmt":"2019-12-06T15:52:46","guid":{"rendered":"https:\/\/www.neolo.com\/blog\/?p=5922"},"modified":"2025-07-22T15:56:41","modified_gmt":"2025-07-22T18:56:41","slug":"11-codigos-html-basicos-para-paginas-web-con-ejemplos","status":"publish","type":"post","link":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php","title":{"rendered":"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales)"},"content":{"rendered":"Tiempo de lectura:<\/span> 8<\/span> minutos<\/span><\/span>\n

Si est\u00e1s empezando a trabajar con HTML, aqu\u00ed te traemos los 11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web<\/strong> y varios ejemplos. Son fundamentales para cualquier programador. Si aprendes c\u00f3mo funcionan estos c\u00f3digos, tendr\u00e1s los conocimientos suficientes para crear un sitio web b\u00e1sico<\/strong>.<\/p>\n\n\n\n

Al final de la nota, encontrar\u00e1s un c\u00f3digo <\/strong>para un sitio web<\/strong> de ejemplo que incluye las etiquetas, para que puedas ver c\u00f3mo usarlas.<\/p>\n\n\n\n

Y atenci\u00f3n, si has llegado aqu\u00ed pero los c\u00f3digos HTML b\u00e1sicos no son lo tuyo y necesitas crear una Tienda online en menos de 15 minutos y sin necesidad de aprender c\u00f3digo, entonces te recomiendo que pruebes los 30 d\u00edas gratuitos de Tienda Neolo.<\/strong><\/p>\n\n\n\n

\n
CREAR UNA TIENDA ONLINE GRATIS<\/a><\/div>\n<\/div>\n\n\n\n\n\n

Qu\u00e9 es HTML<\/h2>\n\n\n\n

HTML es el lenguaje utilizado para crear p\u00e1ginas web<\/strong> y sirve para estructurar el contenido de una p\u00e1gina y definir c\u00f3mo se mostrar\u00e1 en un navegador web.<\/p>\n\n\n\n

En cuanto a su estructura, HTML utiliza etiquetas (tags) para marcar diferentes elementos del contenido, como encabezados, p\u00e1rrafos, im\u00e1genes, enlaces, formularios y muchos otros elementos. <\/p>\n\n\n\n

\n

Cada etiqueta tiene una funci\u00f3n espec\u00edfica y define la estructura y el formato del contenido que se muestra en un navegador web.<\/p>\n<\/blockquote>\n\n\n\n

Qu\u00e9 es una etiqueta HTML<\/h2>\n\n\n\n

Una etiqueta HTML<\/a> es una palabra o letra especial rodeada de corchetes angulares  \u201c< ><\/strong>\u201d. Estas etiquetas se utilizan para crear elementos HTML, como p\u00e1rrafos o enlaces.<\/p>\n\n\n\n

Muchos elementos tienen una etiqueta de apertura y una etiqueta de cierre; por ejemplo, un elemento p <\/strong>(p\u00e1rrafo) tiene una etiqueta <p><\/strong>, seguida del texto del p\u00e1rrafo, y luego una etiqueta de cierre <\/p><\/strong>.<\/p>\n\n\n\n

Algunos elementos no tienen etiqueta de cierre. Estos se llaman elementos vac\u00edos. Por ejemplo, el elemento br <\/strong>para insertar saltos de l\u00ednea simplemente se escribe <br><\/strong>.<\/p>\n\n\n\n

Si est\u00e1s trabajando con XHTML<\/strong>, puedes escribir elementos vac\u00edos usando etiquetas de cierre autom\u00e1tico, por ejemplo, <br \/><\/strong>.<\/p>\n\n\n\n

\n
CREA UN SITIO WEB USANDO IA<\/a><\/div>\n<\/div>\n\n\n\n

<\/p>\n\n\n\n

C\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web<\/h2>\n\n\n\n

<\/p>\n\n\n\n

Etiqueta HTML<\/th>Descripci\u00f3n<\/th>Ejemplo<\/th><\/tr><\/thead>
<html><\/code><\/td>Define el documento HTML.<\/td><html lang=\"es\">...<\/html><\/code><\/td><\/tr>
<head><\/code><\/td>Contiene metadatos y enlaces.<\/td><head><title>T\u00edtulo<\/title><\/head><\/code><\/td><\/tr>
<title><\/code><\/td>Define el t\u00edtulo de la p\u00e1gina.<\/td><title>Mi Sitio Web<\/title><\/code><\/td><\/tr>
<body><\/code><\/td>Contiene el contenido visible.<\/td><body><p>Hola<\/p><\/body><\/code><\/td><\/tr>
<h1><\/code><\/td>Encabezado principal.<\/td><h1>Bienvenido<\/h1><\/code><\/td><\/tr>
<p><\/code><\/td>Define un p\u00e1rrafo.<\/td><p>Este es un texto.<\/p><\/code><\/td><\/tr>
<a><\/code><\/td>Crea un enlace.<\/td><a href=\"https:\/\/neolo.com\">Visitar<\/a><\/code><\/td><\/tr>
<img><\/code><\/td>Inserta una imagen.<\/td><img src=\"imagen.jpg\" alt=\"Descripci\u00f3n\"><\/code><\/td><\/tr>
<div><\/code><\/td>Contenedor para agrupar contenido.<\/td><div>Contenido<\/div><\/code><\/td><\/tr>
<ul><\/code><\/td>Lista no ordenada.<\/td><ul><li>Item<\/li><\/ul><\/code><\/td><\/tr>
<table><\/code><\/td>Crea una tabla.<\/td><table><tr><td>Dato<\/td><\/tr><\/table><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

<\/p>\n\n\n\n

Te mostraremos cu\u00e1les son los c\u00f3digos HTML fundamentales para p\u00e1ginas web<\/strong> y los iremos repasando en orden para que puedas hacerlo a la vez en tu documento o editor HTML.<\/p>\n\n\n\n

Eso s\u00ed, antes de seguir, debes saber que tu c\u00f3digo HTML debe comenzar con la declaraci\u00f3n <!DOCTYPE html><\/strong> para indicar que tu c\u00f3digo est\u00e1 escrito en HTML y pueda leerse sin problemas.<\/p>\n\n\n\n

A partir de all\u00ed, ya puedes comenzar a agregar el resto del c\u00f3digo HTML que define la estructura y el contenido de la p\u00e1gina, como te ense\u00f1aremos a continuaci\u00f3n.<\/p>\n\n\n\n

1. <html> – El elemento ra\u00edz<\/h3>\n\n\n\n

Luego de especificar <!DOCTYPE html><\/strong>, todos los sitios web siguen con el elemento html<\/strong>. Tambi\u00e9n se lo conoce como elemento ra\u00edz<\/strong> porque est\u00e1 en la ra\u00edz del \u00e1rbol de elementos que conforman una p\u00e1gina web<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Para crear el elemento html<\/strong>, debes escribir una etiqueta de apertura <html><\/strong> seguida de una etiqueta de cierre <\/html>. Todo lo dem\u00e1s en tu p\u00e1gina web va entre estas 2 etiquetas.<\/p>\n\n\n\n

Ejemplo:<\/p>\n\n\n\n

<html>\n\n    Todos los dem\u00e1s elementos del sitio van aqu\u00ed.\n\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
2. <head> – El encabezado del documento<\/h3>\n\n\n\n
El elemento head <\/strong>contiene informaci\u00f3n sobre la p\u00e1gina web, a diferencia del contenido de la web en s\u00ed. Hay muchos elementos que puedes poner dentro del elemento del encabezado, como:<\/p>\n\n\n\n
T\u00edtulo<\/strong>.<\/p>\n\n\n\n
Enlace<\/strong>, que puedes usar para agregar hojas de estilo y faviconos a tu p\u00e1gina.<\/p>\n\n\n\n
M<\/strong><\/mark>eta<\/strong>, para especificar cosas como conjuntos de caracteres, descripciones de p\u00e1gina y palabras clave para motores de b\u00fasqueda.<\/p>\n\n\n\n
Script<\/strong>, para agregar c\u00f3digo JavaScript a la p\u00e1gina.<\/p>\n\n\n\n
Aqu\u00ed hay un ejemplo de elemento head t\u00edpico:<\/p>\n\n\n\n
<\/p>\n\n\n\n
 <head>\n\n    <title> Las aventuras de mi gato Lucky <\/title>\n\n    <meta http-equiv = \"Content-Type\" content = \"text \/ html; charset = utf-8\">\n    <meta name = \"description\" content = \"Las aventuras de mi gato favorito Lucky, con historias, fotos y pel\u00edculas\">\n    <meta name = \"keywords\" content = \"cat, Lucky, pet, animal\">\n\n    <link rel = \"stylesheet\" type = \"text \/ css\" href = \"\/ style.css\">\n    <link rel = \u00abicono de acceso directo\u00bb href = \u00ab\/ favicon.ico\u00bb>\n\n<\/head><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
3. <title> – El t\u00edtulo de la p\u00e1gina<\/h3>\n\n\n\n
Esta etiqueta contiene el t\u00edtulo de la p\u00e1gina<\/strong>. El t\u00edtulo se muestra en la barra de t\u00edtulo del navegador (en la parte superior de la ventana del navegador), as\u00ed como en marcadores, resultados en las tendencias de b\u00fasqueda de Google<\/a> y muchos otros lugares.<\/p>\n\n\n\n
El t\u00edtulo <\/strong>debe describir el contenido de la p\u00e1gina de manera precisa. Intenta dar a cada p\u00e1gina de tu sitio su propio t\u00edtulo \u00fanico.<\/p>\n\n\n\n
Aqu\u00ed hay un ejemplo:<\/p>\n\n\n\n
<title> Las aventuras de mi gato Lucky <\/title><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
4. <body> – El contenido de la p\u00e1gina<\/h3>\n\n\n\n
La etiqueta body <\/strong>o contenido aparece despu\u00e9s del elemento principal en la p\u00e1gina. Debe contener toda la informaci\u00f3n de tu sitio web<\/a><\/strong>: texto, im\u00e1genes, etc. Todas las p\u00e1ginas web tienen un elemento de cuerpo \u00fanico, con la excepci\u00f3n de las p\u00e1ginas de conjunto de marcos.<\/p>\n\n\n\n
Aqu\u00ed hay un ejemplo el formato general del elemento body<\/strong>:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<body>\n\n\n  (Todo el contenido de la p\u00e1gina va aqu\u00ed)\n\n\n<\/body><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
5. <h1> – Encabezado de secci\u00f3n<\/h3>\n\n\n\n
Los encabezados <\/strong>te permiten dividir el contenido de tu p\u00e1gina en fragmentos legibles. Funcionan de manera muy similar a los t\u00edtulos y subt\u00edtulos en un libro o un informe.<\/p>\n\n\n\n
HTML <\/strong>admite 6 elementos de encabezado<\/strong>: h1, h2, h3, h4, h5 <\/strong>y h6<\/strong>. De estos, h1 es para los encabezados m\u00e1s importantes, h2 es para subt\u00edtulos menos importantes, y as\u00ed sucesivamente. Por lo general, no necesitar\u00e1s usar m\u00e1s de h1, h2 y h3, a menos que tu p\u00e1gina sea muy larga y compleja.<\/p>\n\n\n\n
Este es un ejemplo de un elemento de encabezado h1:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<h1> Las aventuras de mi gato Lucky <\/h1><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
6. <p> – Un p\u00e1rrafo<\/h3>\n\n\n\n
El elemento p<\/strong> te permite crear p\u00e1rrafos de texto. La mayor\u00eda de los navegadores\nmuestran p\u00e1rrafos con un espacio vertical entre cada uno de ellos, separando\nmuy bien el texto.<\/p>\n\n\n\n
Si bien puedes crear \u00abp\u00e1rrafos<\/strong>\u00bb de texto simplemente usando etiquetas <br> para insertar l\u00edneas en blanco entre fragmentos de texto, es mejor usar elementos p<\/strong> en la mayor\u00eda de los casos. No solo es m\u00e1s ordenado, sino que brinda a los navegadores y motores de b\u00fasqueda una mejor idea de c\u00f3mo est\u00e1 estructurada tu p\u00e1gina.<\/p>\n\n\n\n
Aqu\u00ed hay un ejemplo de un p\u00e1rrafo:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<p> Mi gato Lucky tiene muchas aventuras. \u00a1Ayer atrap\u00f3 un rat\u00f3n, y esta ma\u00f1ana atrap\u00f3 dos! <\/p><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Una buena regla general al escribir texto para la web es asegurarse de que cada p\u00e1rrafo contenga un solo punto, tema o pensamiento. Si quieres hablar sobre 2 cosas diferentes, usa 2 p\u00e1rrafos.<\/p>\n\n\n\n
7. <a> – Un enlace<\/h3>\n\n\n\n
Uno de los elementos m\u00e1s importantes de una p\u00e1gina web, es el elemento a <\/strong>porque te permite crear enlaces a otro contenido<\/strong>. El contenido puede estar en tu propio sitio o en cualquier otro.<\/p>\n\n\n\n
Para crear un enlace, usa las etiquetas <a> y <\/a> alrededor del contenido que deseas colocar en el enlace e indica la URL para vincular en el atributo href de la etiqueta <a><\/strong>.<\/p>\n\n\n\n
A continuaci\u00f3n, te mostramos c\u00f3mo crear un texto que se vincule a www.ejemplo.com:<\/p>\n\n\n\n
<\/p>\n\n\n\n
 <a href=\"http:\/\/www.ejemplo.com\/\"> \u00a1Visita este excelente sitio web! <\/a> <\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
8. <img> – Una imagen<\/h3>\n\n\n\n
El elemento img <\/strong>te permite insertar im\u00e1genes en una<\/strong> p\u00e1gina web<\/strong>. Para insertar una imagen, primero carga la imagen en tu servidor, luego usa una etiqueta <img> para hacer referencia al nombre de archivo de la imagen cargada. <\/p>\n\n\n\n
Aqu\u00ed hay un ejemplo:<\/p>\n\n\n\n
<\/p>\n\n\n\n
<img src = \"mifoto.jpg\" alt = \"Mi foto\"><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
El atributo alt<\/strong> es obligatorio para todas las etiquetas img<\/strong>. Lo utilizan los navegadores que no muestran im\u00e1genes para ofrecer texto alternativo al visitante.<\/p>\n\n\n\n
9. <div> – Un contenedor a\nnivel de bloque para contenido<\/h3>\n\n\n\n
El elemento div<\/strong> es un contenedor gen\u00e9rico que puedes usar para agregar m\u00e1s estructura al contenido de tu p\u00e1gina. Por ejemplo, puedes agrupar varios p\u00e1rrafos o encabezados que tengan un prop\u00f3sito similar en un elemento div. Por lo general, los elementos div se usan para:<\/p>\n\n\n\n
\u2022 Encabezados y pies de p\u00e1gina<\/p>\n\n\n\n
\u2022 Columnas de contenido y barras\nlaterales.<\/p>\n\n\n\n
\u2022 Cuadros resaltados dentro del\nflujo de texto<\/p>\n\n\n\n
\u2022 \u00c1reas de la p\u00e1gina con un\nprop\u00f3sito espec\u00edfico, como anuncios publicitarios.<\/p>\n\n\n\n
\u2022 Galer\u00edas de im\u00e1genes.<\/p>\n\n\n\n
Al agregar atributos de clase<\/strong> y\/o id <\/strong>a tus elementos div, puedes usar CSS para dise\u00f1ar y posicionar los divs<\/strong>. Esta es la base para crear dise\u00f1os de p\u00e1gina basados \u200b\u200ben CSS<\/strong>.<\/p>\n\n\n\n
Aqu\u00ed hay un ejemplo que usa un div <\/strong>para mostrar el contenido de una barra lateral en la p\u00e1gina:<\/p>\n\n\n\n
<div id = \"barra lateral\">\n\n  <h1> Encabezado de la barra lateral <\/h1>\n\n  <p> Texto de la barra lateral <\/p>\n\n  <p> M\u00e1s texto de la barra lateral <\/p>\n\n<\/div><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
10. <span> – Un elemento en\nl\u00ednea para contenido<\/h3>\n\n\n\n
El elemento span<\/strong> es similar a div en que se usa para agregar estructura a tu contenido. La diferencia es que div <\/strong>es un elemento de nivel de bloque, mientras que span es un elemento en l\u00ednea:<\/p>\n\n\n\n
\u2022 Los elementos de nivel de bloque, como div, h1<\/strong> y p<\/strong>, est\u00e1n dise\u00f1ados para contener bloques de contenidos relativamente grandes o independientes, como p\u00e1rrafos de texto. Un elemento de nivel de bloque siempre comienza en una nueva l\u00ednea.<\/p>\n\n\n\n
\u2022 Los elementos en l\u00ednea, como span, a<\/strong> e img<\/strong>, est\u00e1n dise\u00f1ados para contener piezas de contenido m\u00e1s peque\u00f1as, como algunas palabras o una oraci\u00f3n, dentro de un bloque de contenido m\u00e1s grande. Agregar un elemento en l\u00ednea no hace que se cree una nueva l\u00ednea y, adem\u00e1s, los elementos a nivel de bloque pueden contener elementos en l\u00ednea; sin embargo, los elementos en l\u00ednea no pueden contener elementos a nivel de bloque.<\/p>\n\n\n\n
Al igual que con un div, a menudo agrega un atributo de clase y\/o id a un intervalo para que puedas dise\u00f1arlo usando CSS<\/strong>.<\/p>\n\n\n\n
El siguiente ejemplo utiliza elementos span<\/strong> para indicar nombres de productos dentro de un p\u00e1rrafo. Estos nombres de productos podr\u00edan resaltarse con CSS<\/a><\/strong>. Un motor de b\u00fasqueda personalizado tambi\u00e9n podr\u00eda utilizar la informaci\u00f3n provista por los elementos span para identificar los productos dentro de la p\u00e1gina.<\/p>\n\n\n\n
<p> Algunos de nuestros productos incluyen <span class = \"product\"> SuperWidgets <\/span>, <span class = \"product\"> MegaWidgets <\/span> y <span class = \"product\"> WonderWidgets <\/span> . <\/p><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
11. <<\/em>ol><\/em> y <<\/em>ul><\/em> – Listas numeradas e \u00edtems<\/h3>\n\n\n\n
Para crear una lista numerada deber\u00e1s utilizar la etiqueta <<\/em>ol><\/em> <\/strong>(que significa ordered list). Mientras que la etiqueta  <<\/em>li><\/em><\/strong><\/strong> (list item) identificar\u00e1 cada elemento de la lista.<\/p>\n\n\n\n
<p> Aceptamos:<\/p>  \n\n      <ol> \n                        <li> Tarjetas de cr\u00e9dito<\/li>  \n                        <li> Efectivo<\/li> \n                        <li> Cheques<\/li> \n      <\/ol><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Si no te interesa que tu lista sea numerada y simplemente quieres \u00edtems, puedes reemplazar  <<\/em><\/strong>ol> <\/em><\/strong><\/strong>por <<\/em>ul><\/em><\/strong><\/strong> (unordered list). <\/strong><\/strong>  <\/p>\n\n\n\n
Resultado<\/h2>\n\n\n\n
Ahora que conoces estos 11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web<\/strong>, vamos a juntarlas en una sola p\u00e1gina web:<\/p>\n\n\n\n
<!DOCTYPE html>\n\n\n<html>\n\n  <head>\n\n    <title> Las aventuras de mi gato Lucky <\/title>\n\n    <meta http-equiv = \"Content-Type\" content = \"text \/ html; charset = utf-8\">\n    <meta name = \"description\" content = \"Las aventuras de mi gato favorito Lucky, con historias, fotos y pel\u00edculas\">\n    <meta name = \"keywords\" content = \"cat, Lucky, pet, animal\">\n\n    <link rel = \"stylesheet\" type = \"text \/ css\" href = \"\/ style.css\">\n    <link rel = \"icono de acceso directo\" href = \"\/ favicon.ico\">\n\n  <\/head>\n\n  <body>\n\n    <h1> Las aventuras de mi gato Lucky <\/h1>\n\n    <div id = \"mainContent\">\n\n      <p> Mi gato Lucky tiene muchas aventuras. Ayer <a href=\"mouse.html\"> atrap\u00f3 un rat\u00f3n <\/a>, \u00a1y esta ma\u00f1ana atrap\u00f3 dos! <\/p>\n\n      <p> Aqu\u00ed hay una foto de Lucky: <\/p>\n\n      <img src = \"lucky.jpg\" alt = \"Lucky\">\n\n    <\/div>\n\n    <div id = \"barra lateral\">\n\n      <h2> \u00a1Compra nuestros productos! <\/h2>\n\n      <p> Algunos de nuestros productos incluyen <span class = \"product\"> SuperWidgets <\/span>, <span class = \"product\"> MegaWidgets <\/span> y <span class = \"product\"> WonderWidgets <\/span> . <\/p>\n\n <p> Aceptamos:<\/p>  \n     <ol> \n\n        <li> Tarjetas de cr\u00e9dito<\/li>  \n\n        <li> Efectivo<\/li> \n\n        <li> Cheques<\/li> \n\n      <\/ol> \n\n    <\/div>\n\n  <\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
Resumen<\/h2>\n\n\n\n
Como puedes ver, es posible crear un sitio web <\/strong>completo utilizando solo estos 11 c\u00f3digos HTML<\/strong> b\u00e1sicos. Lo primero que debes tener es una cuenta de web hosting.<\/p>\n\n\n\n
Si te piden recomendaciones de web hosting, recuerda que en Neolo, tu p\u00e1gina web cargar\u00e1 r\u00e1pido como un rayo y el soporte t\u00e9cnico te responder\u00e1 el 80% de las veces en menos de 1 hora ante cualquier ayuda que necesites.<\/strong><\/p>\n\n\n\n
VER PLANES DE WEB HOSTING<\/strong><\/a><\/div>\n\n\n\n
<\/p>\n\n\n\n
\u00daltima actualizaci\u00f3n: 22 de julio de 2025.  <\/p>\n","protected":false},"excerpt":{"rendered":"
Si est\u00e1s empezando a trabajar con HTML, aqu\u00ed te traemos los 11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web y varios ejemplos. Son fundamentales para cualquier programador. Si aprendes c\u00f3mo funcionan estos c\u00f3digos, tendr\u00e1s los conocimientos suficientes para crear un sitio web b\u00e1sico. Al final de la nota, encontrar\u00e1s un c\u00f3digo para un sitio web de […]<\/p>\n","protected":false},"author":7,"featured_media":5925,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[316],"tags":[],"class_list":["post-5922","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet"],"yoast_head":"\n11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales) - Neolo Blog<\/title>\n<meta name=\"description\" content=\"Descubre cu\u00e1les son los c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web, c\u00f3mo utilizar los c\u00f3digos para crear tu sitio web, etiquetas HTML\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales) - Neolo Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre cu\u00e1les son los c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web, c\u00f3mo utilizar los c\u00f3digos para crear tu sitio web, etiquetas HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\" \/>\n<meta property=\"og:site_name\" content=\"Neolo Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/neolohosting\" \/>\n<meta property=\"article:published_time\" content=\"2019-12-06T15:52:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-22T18:56:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos-1024x683.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"683\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Manuel Malav\u00e9\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@neolo\" \/>\n<meta name=\"twitter:site\" content=\"@neolo\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manuel Malav\u00e9\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\"},\"author\":{\"name\":\"Manuel Malav\u00e9\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c\"},\"headline\":\"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales)\",\"datePublished\":\"2019-12-06T15:52:46+00:00\",\"dateModified\":\"2025-07-22T18:56:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\"},\"wordCount\":1871,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg\",\"articleSection\":[\"Internet\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\",\"url\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\",\"name\":\"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales) - Neolo Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg\",\"datePublished\":\"2019-12-06T15:52:46+00:00\",\"dateModified\":\"2025-07-22T18:56:41+00:00\",\"description\":\"Descubre cu\u00e1les son los c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web, c\u00f3mo utilizar los c\u00f3digos para crear tu sitio web, etiquetas HTML\",\"breadcrumb\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg\",\"width\":6000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/www.neolo.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Internet\",\"item\":\"https:\/\/www.neolo.com\/blog\/temas\/internet\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#website\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"name\":\"Neolo Blog\",\"description\":\"Blog de Neolo: Dominios, Web Hosting y Marketing Digital\",\"publisher\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.neolo.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#organization\",\"name\":\"Neolo\",\"url\":\"https:\/\/www.neolo.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"contentUrl\":\"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png\",\"width\":392,\"height\":83,\"caption\":\"Neolo\"},\"image\":{\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/neolohosting\",\"https:\/\/x.com\/neolo\",\"https:\/\/www.instagram.com\/neolodotcom\/\",\"https:\/\/www.linkedin.com\/company\/neolo.com\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c\",\"name\":\"Manuel Malav\u00e9\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g\",\"caption\":\"Manuel Malav\u00e9\"},\"description\":\"Redactor de contenidos\",\"sameAs\":[\"manuel\"],\"url\":\"https:\/\/www.neolo.com\/blog\/author\/manuel\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales) - Neolo Blog","description":"Descubre cu\u00e1les son los c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web, c\u00f3mo utilizar los c\u00f3digos para crear tu sitio web, etiquetas HTML","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php","og_type":"article","og_title":"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales) - Neolo Blog","og_description":"Descubre cu\u00e1les son los c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web, c\u00f3mo utilizar los c\u00f3digos para crear tu sitio web, etiquetas HTML","og_url":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php","og_site_name":"Neolo Blog","article_publisher":"https:\/\/www.facebook.com\/neolohosting","article_published_time":"2019-12-06T15:52:46+00:00","article_modified_time":"2025-07-22T18:56:41+00:00","og_image":[{"width":1024,"height":683,"url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos-1024x683.jpg","type":"image\/jpeg"}],"author":"Manuel Malav\u00e9","twitter_card":"summary_large_image","twitter_creator":"@neolo","twitter_site":"@neolo","twitter_misc":{"Escrito por":"Manuel Malav\u00e9","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#article","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php"},"author":{"name":"Manuel Malav\u00e9","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c"},"headline":"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales)","datePublished":"2019-12-06T15:52:46+00:00","dateModified":"2025-07-22T18:56:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php"},"wordCount":1871,"commentCount":4,"publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg","articleSection":["Internet"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php","url":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php","name":"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales) - Neolo Blog","isPartOf":{"@id":"https:\/\/www.neolo.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage"},"thumbnailUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg","datePublished":"2019-12-06T15:52:46+00:00","dateModified":"2025-07-22T18:56:41+00:00","description":"Descubre cu\u00e1les son los c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web, c\u00f3mo utilizar los c\u00f3digos para crear tu sitio web, etiquetas HTML","breadcrumb":{"@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#primaryimage","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2019\/12\/codigos-html-basicos.jpg","width":6000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/www.neolo.com\/blog\/11-codigos-html-basicos-para-paginas-web-con-ejemplos.php#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/www.neolo.com\/blog"},{"@type":"ListItem","position":2,"name":"Internet","item":"https:\/\/www.neolo.com\/blog\/temas\/internet"},{"@type":"ListItem","position":3,"name":"11 c\u00f3digos HTML b\u00e1sicos para p\u00e1ginas web (Ejemplos reales)"}]},{"@type":"WebSite","@id":"https:\/\/www.neolo.com\/blog\/#website","url":"https:\/\/www.neolo.com\/blog\/","name":"Neolo Blog","description":"Blog de Neolo: Dominios, Web Hosting y Marketing Digital","publisher":{"@id":"https:\/\/www.neolo.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.neolo.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/www.neolo.com\/blog\/#organization","name":"Neolo","url":"https:\/\/www.neolo.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","contentUrl":"https:\/\/www.neolo.com\/blog\/wp-content\/uploads\/2017\/07\/neolo-verde-chico.png","width":392,"height":83,"caption":"Neolo"},"image":{"@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/neolohosting","https:\/\/x.com\/neolo","https:\/\/www.instagram.com\/neolodotcom\/","https:\/\/www.linkedin.com\/company\/neolo.com\/"]},{"@type":"Person","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/3f22b09243c6d649d98973bb12bf360c","name":"Manuel Malav\u00e9","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.neolo.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85ba885beb13287b705273ac6868dc56?s=96&r=g","caption":"Manuel Malav\u00e9"},"description":"Redactor de contenidos","sameAs":["manuel"],"url":"https:\/\/www.neolo.com\/blog\/author\/manuel"}]}},"_links":{"self":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/5922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/comments?post=5922"}],"version-history":[{"count":95,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/5922\/revisions"}],"predecessor-version":[{"id":28643,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/posts\/5922\/revisions\/28643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media\/5925"}],"wp:attachment":[{"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/media?parent=5922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/categories?post=5922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.neolo.com\/blog\/wp-json\/wp\/v2\/tags?post=5922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}