04-Elementos en html

Jorge Catalao septiembre 02, 2024

Elemento HTML

El elemento HTML es todo, desde la etiqueta inicial hasta la etiqueta final:

Ejemplo de un elemento

Primer Título

Primer párrafo

Código del ejemplo

            
<tagname> El contenido va aquí ... </tagname>
<h1> Mi primer título </h1>
<p> Mi primer párrafo. </p>

...

Etiqueta de inicio (Start tag)	Contenido	Etiqueta de finalización
<h1>	Primer encabezado	</h1>
<p>	Primer párrafo	</p>
<br>	Vacío	No tiene finalización

Nota: Algunos elementos HTML no tienen contenido (como el elemento <br>). Estos elementos se llaman elementos vacíos. ¡Los elementos vacíos no tienen una etiqueta de finalización!

Elementos HTML anidados

Los elementos anidados son elementos que van dentro de otros elementos.

Todos los documentos HTML consisten en elementos HTML anidados.

Veamos el siguiente código:

Código del ejemplo

                
<!DOCTYPE html>
<html lang="es">
<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>Documento</title>
</head>
<body>
  <h1>Encabezado</h1>
  <p>Párrafo</p>
</body>
</html>

Como podemos ver, dentro de la etiqueta <html> están los elementos <title>, <body>, <h1>, <p>, etc.

Ejemplo Explicado

<html> es el elemento raíz y define todo el documento HTML.

Tiene una etiqueta de inicio <html> y una etiqueta final </html>.

Dentro de esta, hay una etiqueta <body>

<body> define el cuerpo del documento.

Al igual que el anterior, tiene una etiqueta de inicio <body> y una etiqueta final </body>.

Dentro del elemento <body>, hay otros dos elementos: <h1> y <p>

Nunca te saltes la etiqueta final

La etiqueta final es muy importante, ya que define el final del elemento.

Hay elementos que se muestran correctamente incluso sin la etiqueta final; el navegador puede interpretar esas etiquetas.

Sin embargo, ¡nunca confíes en esto! Pueden ocurrir resultados inesperados y errores si olvidas la etiqueta final.

Elementos HTML vacíos

Los elementos vacíos son elementos que no tienen contenido, como el caso de los saltos de línea con <br>

Esto es un encabezado

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam quidem enim officia, optio facilis doloremque, expedita accusantium placeat et saepe odio labore eligendi. Quod quasi earum rem dolor, quam adipisci!

Esto es un salto de línea, es decir, se emplea una etiqueta vacía, sin final, como <br>

Otro párrafo; Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae consequatur assumenda, natus aut laboriosam quas omnis, quo culpa, nisi iusto saepe excepturi molestiae corrupti alias explicabo quos reiciendis. Officiis, saepe.

HTML no distingue entre mayúsculas y minúsculas

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas: <P> significa lo mismo que <p>

El estándar HTML no requiere etiquetas en minúsculas, pero el W3C recomienda minúsculas en HTML y exige minúsculas para tipos de documentos más estrictos como XHTML.

Ir al índice

Tags:

Curso de HTML HTML

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

04-Elementos en html

Temas de la lección

Elemento HTML

Ejemplo de un elemento

Primer Título

Código del ejemplo

Elementos HTML anidados

Código del ejemplo

Ejemplo Explicado

Nunca te saltes la etiqueta final

Elementos HTML vacíos

Esto es un encabezado

HTML no distingue entre mayúsculas y minúsculas

Posted by: Jorge Catalao

Publicar un comentario

0 Comentarios

Translate

Subscribe Us

Ad Space

Popular Posts

Formulario Inicio de session (como hacerlo)

01-Introducion al php

Circuitos electricos

Labels

Tags

Popular Posts

Formulario Inicio de session (como hacerlo)

01-Introducion al php

Circuitos electricos

Labels

Menu Footer Widget

04-Elementos en html

Temas de la lección

Temas de la lección

Elemento HTML

Ejemplo de un elemento

Primer Título

Código del ejemplo

Elementos HTML anidados

Código del ejemplo

Ejemplo Explicado

Nunca te saltes la etiqueta final

Elementos HTML vacíos

Esto es un encabezado

HTML no distingue entre mayúsculas y minúsculas

Posted by: Jorge Catalao

Entradas que pueden interesarte

Publicar un comentario

0 Comentarios

Translate

Social Plugin

Subscribe Us

Ad Space

Popular Posts

Formulario Inicio de session (como hacerlo)

01-Introducion al php

Circuitos electricos

Labels

Tags

Popular Posts

Formulario Inicio de session (como hacerlo)

01-Introducion al php

Circuitos electricos

Labels

Menu Footer Widget