1. SGML

Versión para imprimir.

En esta lección se presenta el lenguaje SGML.

A. SGML

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Ejemplo</title>
</head>
<body>
 <h1>Ejemplo</h1>
 <p>Hola mundo.👶</p>
</body>
</html>

B. DOCTYPE

Ejemplo

<!DOCTYPE html>

Solo para los más rudos

C. Comentario

Ejemplo

<!DOCTYPE html>
<!--
 Comentario acerca de html. 
-->
<html lang="es">
<head>
 <meta charset="UTF-8"><!--meta-->
</html>

D. Texto

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
❤Este texto es el contenido 📖 de
la página!!!!

E. Elemento

Ejemplo

<!DOCTYPE html>
<!-- Elemento de tipo html-->
<html lang="es">
<!-- Elemento de tipo head-->
<head>
 <!-- Elemento de tipo meta-->
 <meta charset="UTF-8">
</head>
</html>

F. Atributos

Ejemplo

<!DOCTYPE html>
<!--
 El atributo
  id
   No se puede repetir en el
   documento y vale
    raíz

 El atributo
  lang
   tiene el valor
    es

 El atributo booleano
  hidden
   tiene el valor
    true
-->
<html id="raíz" lang="es" hidden>
</html>

G. Elemento con contenido

Ejemplo

<!DOCTYPE html>
<!--
 html es un elemento con contenido.
 Puede contener comentarios, otros
 elementos y texto.
-->
<html lang="es"><!--Inicia html-->
<!--
 head es contenido de html.
 También es elemento con contenido.
-->
<head> <!-- Inicia head -->
 <!--
  meta es contenido de head.
  No es un elemento con contenido.
 -->
 <meta charset="UTF-8">
</head> <!-- Termina head -->
💪Este texto es contenido de html.
</html><!-- Termina html -->

H. Elemento sin contenido

Ejemplo

<!DOCTYPE html>
<!-- 
 meta es un tipo de elemento sin
 contenido.
-->
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width">
<!-- 
 br es un tipo de elemento sin
 contenido.
-->
<br>

I. Elemento padre

Ejemplo

<!DOCTYPE html>
<!--
 El elemento html es padre de los
 elementos head y body.
-->
<html lang="es">
<!--
 El elemento head es padre de los
 2 elementos meta y del title.
-->
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Ejemplo</title>
</head>
<!--
 El elemento body es padre de los
 elementos h1 y p.
-->
<body>
 <h1>Ejemplo</h1>
 <p>Hola mundo.👶</p>
</body>
</html>

J. Elemento hijo

Ejemplo

<!DOCTYPE html>
<!--
 El elemento html no es hijo de
 nadie.
-->
<html lang="es">
<!--
 El elemento head es hijo del
 elemento html.
-->
<head>
 <!--
  Los 2 elementos meta y el title
  son hijos del elemento head.
 -->
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Ejemplo</title>
</head>
<!--
 El elemento body es hijo del
 elemento html.
-->
<body>
 <!--
  Los elementos h1 y p son hijos
  del elemento body.
 -->
 <h1>Ejemplo</h1>
 <p>Hola mundo.👶</p>
</body>
</html>

K. Resumen