SlideShare una empresa de Scribd logo
1 de 5
Qué es una etiqueta HTML?
HTML es un markup language, lo que significa que está escrito con
códigos que puede leer una persona sin que sea necesario compilarlo
primero. En otras palabras, el texto en una página web está «marcado»
con estos códigos para dar instrucciones al navegador web sobre cómo
mostrar el texto. Estas etiquetas de marcado son las propias etiquetas
HTML.
Cuando escribes código en HTML, estás escribiendo etiquetas HTML.
Todas las etiquetas HTML están hechas con un número de partes
específicas, incluyendo:
 El carácter “menor que” <
 Una palabra o carácter que determina qué etiqueta se está
escribiendo
 Cualquier número de atributos HTML que se quiera usar, escritos
de la forma nombre =”valor”
 El carácter “mayor que” >
El hipertexto (HTML) es un lenguaje informático que forma la mayoría
de las páginas web y plataformas online. HTML no se considera un
lenguaje de programación, ya que no puede crear una funcionalidad
dinámica. Sin embargo, los usuarios web pueden crear y estructurar
secciones, párrafos y enlaces usando elementos, etiquetas y atributos.
En la actualidad existen 142 etiquetas HTML disponibles que permiten
la creación de varios elementos. A pesar de que algunos ordenadores
nuevos ya no admiten algunas de estas, es importante tener constancia
de la existencia de ellas.
Sin embargo, el HTML ha ido evolucionando los últimos años. Para que
nos hagamos una idea, la primera versión contaba solamente con 18
etiquetas. Desde entonces, cada nueva versión ha traído nuevas
etiquetas y atributos. La actualización más importante fue la introducción
en 2014 del HTML5. La principal diferencia entre ambas es que la nueva
admitía nuevos tipos de controles de formularios. También incluía
diversas etiquetas semánticas que describían mejor el contenido, como
<article>, <headers> y <footer>.
VIDEO
Google Web Designer: edición HTML5
Descargar
¿Cómo funcionan las etiquetas HTML?
La mayoría de páginas web tienen varias páginas HTML diferentes. Por
ejemplo, una página de inicio, otra de producto, otra de contacto, etc.
Cada una de estas tiene HTML separados. Los documentos HTML son
archivos que acaban con .html o .htm. Un navegador lee el archivo y
muestra su contenido para los internautas puedan verlo.
Como hemos comentado anteriormente, todas las páginas HTML
contienen una serie de elementos HTML que a la vez disponen de
diferentes etiquetas y atributos. Es decir, los elementos HTML son los
componentes básicos de una página web. Una etiqueta contiene mucha
información. Le indica al navegador dónde empieza y dónde termina
cada elemento, mientras que un atributo describe las características.
Los elementos HTML suelen dividirse en tres partes. Esta combinación
de las tres crea un elemento HTML.
 Etiqueta de apertura: Se utiliza para indicar dónde empieza un
elemento. Está envuelta en corchete de apertura y cierre. Por
ejemplo puedes usar la etiqueta de inicio <p> para crear un
párrafo.
 Contenido: El contenido es el resultado que ve la audiencia.
 Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero
con una barra inclinada delante del nombre del elemento. Es decir,
</p> para finalizar un párrafo.
Otra parte fundamental de un elemento HTML son los atributos. Estos
tienen dos secciones:
 Nombre: El nombre identifica la información adicional que un
usuario quiere agregar.
 Valor del atributo: Da más detalles que el anterior.
¿Cuáles son las etiquetas HTML básicas?
Hay una serie de etiquetas que son las más usadas para crear cualquier
documento HTML, a continuación las explicamos:
 <body> para el contenido
 <head> para información sobre el documento
 <div> división dentro del contenido
 <a> para enlaces
 <strong> para poner el texto en negrita
 <br> para saltos de línea
 <H1>…<H6> para títulos dentro del contenido
 <img> para añadir imágenes al documento
 <ol> para listas ordenadas, <ul> para listas
desordenadas, <li> para elementos dentro de la lista
 <p> para parágrafos
 <span> para estilos de una parte del texto
<body> </body>
Indica la parte del cuerpo del contenido de un documento HTML. Es una
etiqueta esencial para cualquier documento ya que indica donde empieza
el contenido visible del documento.
<head></head>
La parte superior del documento HTML, es donde podremos indicar los
metadatos: título del documento, hojas de estilos, javaScript, CSS…
<div> </div>
Un elemento que es usado mayoritariamente para agrupar otros
elementos y actuar como plantilla de otros controles. La etiqueta <div>
nos ayuda a estructurar el documento en secciones.
<a> </a>
Es una etiqueta que nos ayuda a poder crear un enlace a una página
web. El atributo principal de la etiqueta HTML es href, donde pondremos
el enlace al que queremos conectar. Otro atributo muy usado es target, el
cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o
en la misma.
Ejemplo HTML:
Pulsa <a href=”https://www.nombredelaweb.com/”
target=”_blank”>aquí</a>para visitar DonDominio.
<strong> </strong>
Si tienes mucho texto, es importante poder dar énfasis a una parte en
concreto, con la etiqueta strong lo podemos hacer.
Ejemplo HTML:
Quiero destacar solo <strong>esta palabra</strong>.
<br>
Con esta etiqueta HTML le podemos decir al navegador que viene un
salto de línea. Nos sirve para hacer el texto más leíble.
<H1> </H1> …. <H6> </H6>
Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número>
nos permiten indicar la importancia del título y para estructurar el
contenido, de esta forma ayudamos a los bots a entender la importancia
del contenido.
<IMG> </IMG>
Usamos la etiqueta IMG para mostrar imágenes dentro del contenido.
Necesita el atributo src para funcionar, ya que será donde indicaremos
desde donde tiene que mostrar la imagen.
<OL> <li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI nos sirven para crear listas, OL para listas
ordenadas y UL para listas sin orden. Dentro de las listas, los elementos
se identifican con la etiqueta LI.
Ejemplo HTML:
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<ul>
<P> </P>
Etiqueta que nos sirve para agrupar texto dentro de un parágrafo. El
propósito es poder hacer el contenido más fácil de leer y organizado.
<SPAN> </SPAN>
Con la etiqueta podemos personalizar el estilo de solamente una parte
del texto.
Ejemplo HTML:
Solo <span style=”color: red;”>esta palabra</span> en rojo.
Ventajas y desventajas del HTML
Como todo lenguaje informático, el HTML tiene sus ventajas y sus
desventajas. Entre las ventajas, podríamos destacar que es apto para
principiantes, que tiene una curva de aprendizaje poco profunda y que es
accesible. Además, es de código abierto y completamente gratuito y
se ejecuta de forma nativa en todos los navegadores web.
Por otro lado, entre las desventajas, se encuentra que para una
funcionalidad dinámica es posible que haya que utilizar JavaScript o un
lenguaje back-end como PHP. Además, los usuarios deben
crear páginas web individuales para HTML, incluso si los elementos son
los mismos y es posible que los navegadores más antiguos no muestren
las etiquetas más nuevas.
¿Qué te ha parecido este artículo sobre etiquetas HTML? Deja tus
comentarios y ¡comparte!
Los atributos HTML te permitirán trabajar más rápido y de forma más
eficiente. Si quieres incorporar estas habilidades en tu perfil profesional
no dudes en consultar nuestro Executive Master en Marketing Digital,
Analítica y UX Contarás con el apoyo y seguimiento de expertos en
activo en cada una de estas áreas.

Más contenido relacionado

La actualidad más candente (20)

Html4
Html4Html4
Html4
 
Htlm
HtlmHtlm
Htlm
 
Html
HtmlHtml
Html
 
Html (ppt)
Html (ppt)Html (ppt)
Html (ppt)
 
Tarea
TareaTarea
Tarea
 
Html
HtmlHtml
Html
 
Definición de html
Definición de htmlDefinición de html
Definición de html
 
El lenguaje html
El lenguaje htmlEl lenguaje html
El lenguaje html
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Introducción al lenguaje HTML
Introducción al lenguaje HTMLIntroducción al lenguaje HTML
Introducción al lenguaje HTML
 
Guia#1 info
Guia#1 infoGuia#1 info
Guia#1 info
 
Como desarrollar una web (mod5 diplo ust)
Como desarrollar una web (mod5 diplo ust)Como desarrollar una web (mod5 diplo ust)
Como desarrollar una web (mod5 diplo ust)
 
PAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidiaPAGINA WEB paucar inga lidia
PAGINA WEB paucar inga lidia
 
Tarea
TareaTarea
Tarea
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
HTML 2
HTML 2 HTML 2
HTML 2
 
Html
HtmlHtml
Html
 
Colegio nacional nicolás esguerra
Colegio nacional nicolás esguerraColegio nacional nicolás esguerra
Colegio nacional nicolás esguerra
 
Colegio nacional nicolas esguerra
Colegio  nacional nicolas esguerraColegio  nacional nicolas esguerra
Colegio nacional nicolas esguerra
 

Similar a Qué es una etiqueta html

Similar a Qué es una etiqueta html (20)

DIAPOSITIVA.pptx
DIAPOSITIVA.pptxDIAPOSITIVA.pptx
DIAPOSITIVA.pptx
 
Códigos HTML.pptx sede Magdalena ortega de Nariño
Códigos HTML.pptx sede Magdalena ortega de NariñoCódigos HTML.pptx sede Magdalena ortega de Nariño
Códigos HTML.pptx sede Magdalena ortega de Nariño
 
Ruiz guerra HTML
Ruiz guerra HTMLRuiz guerra HTML
Ruiz guerra HTML
 
dia´positivas de etiquetas para crear paginas web. Computacion.pptx
dia´positivas de etiquetas para crear paginas web. Computacion.pptxdia´positivas de etiquetas para crear paginas web. Computacion.pptx
dia´positivas de etiquetas para crear paginas web. Computacion.pptx
 
Expo html
Expo htmlExpo html
Expo html
 
html
html html
html
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html y HTML5
Html y HTML5Html y HTML5
Html y HTML5
 
Consulta sobre acces, HMTL
Consulta sobre acces, HMTLConsulta sobre acces, HMTL
Consulta sobre acces, HMTL
 
Html5
Html5Html5
Html5
 
Programación para web
Programación para webProgramación para web
Programación para web
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
El mejor curso de html lección no.1
El mejor curso de html lección no.1El mejor curso de html lección no.1
El mejor curso de html lección no.1
 
Html wendy martinez
Html wendy martinezHtml wendy martinez
Html wendy martinez
 
¿Qué es HTML5?
¿Qué es HTML5?¿Qué es HTML5?
¿Qué es HTML5?
 
Manual de html
Manual de htmlManual de html
Manual de html
 

Último

137489674-Regimenes-Tributarios-MYPES-ppt.ppt
137489674-Regimenes-Tributarios-MYPES-ppt.ppt137489674-Regimenes-Tributarios-MYPES-ppt.ppt
137489674-Regimenes-Tributarios-MYPES-ppt.pptALEJANDRAKATHERINESA
 
La Electricidad y la Electrónica gabriela (1).pdf
La Electricidad y la Electrónica gabriela (1).pdfLa Electricidad y la Electrónica gabriela (1).pdf
La Electricidad y la Electrónica gabriela (1).pdfelabarbosa396
 
Home Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todosHome Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todosDebora Gomez Bertoli
 
El uso de las T I C en la vida cotidiana.
El uso de las T I C en la vida cotidiana.El uso de las T I C en la vida cotidiana.
El uso de las T I C en la vida cotidiana.SEAT
 
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptxRosiClaros
 
Patrones Funcionales de Marjory Gordon.pptx
Patrones Funcionales de Marjory Gordon.pptxPatrones Funcionales de Marjory Gordon.pptx
Patrones Funcionales de Marjory Gordon.pptxErandiCamperoBojorge
 
EXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdf
EXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdfEXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdf
EXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdfRosiClaros
 
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdfRosiClaros
 
TEORIA CONTINGENCIAL Precursores y Aportes a la Administración
TEORIA CONTINGENCIAL Precursores y Aportes a la AdministraciónTEORIA CONTINGENCIAL Precursores y Aportes a la Administración
TEORIA CONTINGENCIAL Precursores y Aportes a la AdministraciónCUSICANQUIRAMREZLADY
 

Último (9)

137489674-Regimenes-Tributarios-MYPES-ppt.ppt
137489674-Regimenes-Tributarios-MYPES-ppt.ppt137489674-Regimenes-Tributarios-MYPES-ppt.ppt
137489674-Regimenes-Tributarios-MYPES-ppt.ppt
 
La Electricidad y la Electrónica gabriela (1).pdf
La Electricidad y la Electrónica gabriela (1).pdfLa Electricidad y la Electrónica gabriela (1).pdf
La Electricidad y la Electrónica gabriela (1).pdf
 
Home Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todosHome Assistant - Un Hub para controlarlos a todos
Home Assistant - Un Hub para controlarlos a todos
 
El uso de las T I C en la vida cotidiana.
El uso de las T I C en la vida cotidiana.El uso de las T I C en la vida cotidiana.
El uso de las T I C en la vida cotidiana.
 
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pptx
 
Patrones Funcionales de Marjory Gordon.pptx
Patrones Funcionales de Marjory Gordon.pptxPatrones Funcionales de Marjory Gordon.pptx
Patrones Funcionales de Marjory Gordon.pptx
 
EXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdf
EXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdfEXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdf
EXPOSICION_REGLAMENO_DE_EVALUACIÓN_RM._190.pdf
 
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf
644400074-LA-CONSOLIDACION-DE-LA-REPUBLICA-OLIGARQUICA-pdf.pdf
 
TEORIA CONTINGENCIAL Precursores y Aportes a la Administración
TEORIA CONTINGENCIAL Precursores y Aportes a la AdministraciónTEORIA CONTINGENCIAL Precursores y Aportes a la Administración
TEORIA CONTINGENCIAL Precursores y Aportes a la Administración
 

Qué es una etiqueta html

  • 1. Qué es una etiqueta HTML? HTML es un markup language, lo que significa que está escrito con códigos que puede leer una persona sin que sea necesario compilarlo primero. En otras palabras, el texto en una página web está «marcado» con estos códigos para dar instrucciones al navegador web sobre cómo mostrar el texto. Estas etiquetas de marcado son las propias etiquetas HTML. Cuando escribes código en HTML, estás escribiendo etiquetas HTML. Todas las etiquetas HTML están hechas con un número de partes específicas, incluyendo:  El carácter “menor que” <  Una palabra o carácter que determina qué etiqueta se está escribiendo  Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre =”valor”  El carácter “mayor que” > El hipertexto (HTML) es un lenguaje informático que forma la mayoría de las páginas web y plataformas online. HTML no se considera un lenguaje de programación, ya que no puede crear una funcionalidad dinámica. Sin embargo, los usuarios web pueden crear y estructurar secciones, párrafos y enlaces usando elementos, etiquetas y atributos. En la actualidad existen 142 etiquetas HTML disponibles que permiten la creación de varios elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de estas, es importante tener constancia de la existencia de ellas. Sin embargo, el HTML ha ido evolucionando los últimos años. Para que nos hagamos una idea, la primera versión contaba solamente con 18 etiquetas. Desde entonces, cada nueva versión ha traído nuevas etiquetas y atributos. La actualización más importante fue la introducción en 2014 del HTML5. La principal diferencia entre ambas es que la nueva admitía nuevos tipos de controles de formularios. También incluía diversas etiquetas semánticas que describían mejor el contenido, como <article>, <headers> y <footer>. VIDEO Google Web Designer: edición HTML5
  • 2. Descargar ¿Cómo funcionan las etiquetas HTML? La mayoría de páginas web tienen varias páginas HTML diferentes. Por ejemplo, una página de inicio, otra de producto, otra de contacto, etc. Cada una de estas tiene HTML separados. Los documentos HTML son archivos que acaban con .html o .htm. Un navegador lee el archivo y muestra su contenido para los internautas puedan verlo. Como hemos comentado anteriormente, todas las páginas HTML contienen una serie de elementos HTML que a la vez disponen de diferentes etiquetas y atributos. Es decir, los elementos HTML son los componentes básicos de una página web. Una etiqueta contiene mucha información. Le indica al navegador dónde empieza y dónde termina cada elemento, mientras que un atributo describe las características. Los elementos HTML suelen dividirse en tres partes. Esta combinación de las tres crea un elemento HTML.  Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento. Está envuelta en corchete de apertura y cierre. Por ejemplo puedes usar la etiqueta de inicio <p> para crear un párrafo.  Contenido: El contenido es el resultado que ve la audiencia.  Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero con una barra inclinada delante del nombre del elemento. Es decir, </p> para finalizar un párrafo. Otra parte fundamental de un elemento HTML son los atributos. Estos tienen dos secciones:  Nombre: El nombre identifica la información adicional que un usuario quiere agregar.  Valor del atributo: Da más detalles que el anterior. ¿Cuáles son las etiquetas HTML básicas? Hay una serie de etiquetas que son las más usadas para crear cualquier documento HTML, a continuación las explicamos:  <body> para el contenido
  • 3.  <head> para información sobre el documento  <div> división dentro del contenido  <a> para enlaces  <strong> para poner el texto en negrita  <br> para saltos de línea  <H1>…<H6> para títulos dentro del contenido  <img> para añadir imágenes al documento  <ol> para listas ordenadas, <ul> para listas desordenadas, <li> para elementos dentro de la lista  <p> para parágrafos  <span> para estilos de una parte del texto <body> </body> Indica la parte del cuerpo del contenido de un documento HTML. Es una etiqueta esencial para cualquier documento ya que indica donde empieza el contenido visible del documento. <head></head> La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS… <div> </div> Un elemento que es usado mayoritariamente para agrupar otros elementos y actuar como plantilla de otros controles. La etiqueta <div> nos ayuda a estructurar el documento en secciones. <a> </a> Es una etiqueta que nos ayuda a poder crear un enlace a una página web. El atributo principal de la etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro atributo muy usado es target, el cual nos sirve para indicar si el enlace se abrirá en una nueva ventana o en la misma. Ejemplo HTML: Pulsa <a href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a>para visitar DonDominio.
  • 4. <strong> </strong> Si tienes mucho texto, es importante poder dar énfasis a una parte en concreto, con la etiqueta strong lo podemos hacer. Ejemplo HTML: Quiero destacar solo <strong>esta palabra</strong>. <br> Con esta etiqueta HTML le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer el texto más leíble. <H1> </H1> …. <H6> </H6> Hay diferentes niveles de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar la importancia del título y para estructurar el contenido, de esta forma ayudamos a los bots a entender la importancia del contenido. <IMG> </IMG> Usamos la etiqueta IMG para mostrar imágenes dentro del contenido. Necesita el atributo src para funcionar, ya que será donde indicaremos desde donde tiene que mostrar la imagen. <OL> <li></li> <OL> | <UL> <li></li> <UL> Las etiquetas OL y LI nos sirven para crear listas, OL para listas ordenadas y UL para listas sin orden. Dentro de las listas, los elementos se identifican con la etiqueta LI. Ejemplo HTML: <ul> <li>Primer elemento</li> <li>Segundo elemento</li> <ul>
  • 5. <P> </P> Etiqueta que nos sirve para agrupar texto dentro de un parágrafo. El propósito es poder hacer el contenido más fácil de leer y organizado. <SPAN> </SPAN> Con la etiqueta podemos personalizar el estilo de solamente una parte del texto. Ejemplo HTML: Solo <span style=”color: red;”>esta palabra</span> en rojo. Ventajas y desventajas del HTML Como todo lenguaje informático, el HTML tiene sus ventajas y sus desventajas. Entre las ventajas, podríamos destacar que es apto para principiantes, que tiene una curva de aprendizaje poco profunda y que es accesible. Además, es de código abierto y completamente gratuito y se ejecuta de forma nativa en todos los navegadores web. Por otro lado, entre las desventajas, se encuentra que para una funcionalidad dinámica es posible que haya que utilizar JavaScript o un lenguaje back-end como PHP. Además, los usuarios deben crear páginas web individuales para HTML, incluso si los elementos son los mismos y es posible que los navegadores más antiguos no muestren las etiquetas más nuevas. ¿Qué te ha parecido este artículo sobre etiquetas HTML? Deja tus comentarios y ¡comparte! Los atributos HTML te permitirán trabajar más rápido y de forma más eficiente. Si quieres incorporar estas habilidades en tu perfil profesional no dudes en consultar nuestro Executive Master en Marketing Digital, Analítica y UX Contarás con el apoyo y seguimiento de expertos en activo en cada una de estas áreas.