HTML (Lenguaje de marcado de hipertexto) es el lenguaje de marcado estándar para crear páginas web. Se utiliza para estructurar el contenido de una página web, definiendo elementos como encabezados, párrafos, enlaces, imágenes y otros componentes .


Conceptos básicos de HTML

·        Etiquetas (Tags) : HTML usa etiquetas para estructurar el contenido. Las etiquetas están rodeadas por corchetes angulares (< > ). La mayoría de las etiquetas vienen en pares: una etiqueta de apertura (<etiqueta>) y una etiqueta de cierre (</etiqueta>).

·        Elementos : Un elemento HTML consiste en una etiqueta de apertura, contenido y una etiqueta de cierre. Ej: <etiqueta>Contenido</etiqueta>

·        Atributos : Las etiquetas pueden tener atributos que proporcionan información adicional sobre los elementos. Los atributos se escriben dentro de la etiqueta de apertura. Ej: <etiqueta atributo="valor">Contenido</etiqueta>

estructura

· <!DOCTYPE html> : Declara el tipo de documento y la versión de HTML (HTML5 en este caso). 

· <html lang="es"> : La etiqueta <html> es el contenedor principal de todo el documento HTML. El atributo lang="es" especifica el idioma del contenido. 

· <head> : Contiene metadatos sobre el documento, como el conjunto de caracteres ( <meta charset="UTF-8"> ), el título de la página ( <title> ), y la configuración de la vista ( <meta name ="ventana gráfica"> ). 

· <body> : Contiene el contenido visible de la página, como encabezados ( <h1> ), párrafos ( <p> ), imágenes ( <img> ), enlaces ( <a> ), etc. 

Ejemplo:

<!DOCTYPE html>

<htmllang="es">

<cabeza>

    <meta juego de caracteres="UTF-8">

    <meta nombre="viewport" content="ancho=ancho-dispositivo, escala-inicial=1.0">

    <title>Título de la página</title>

</cabeza>

<cuerpo>

    <h1>Encabezado Principal</h1>

    <p>Este es un párrafo.</p>

</cuerpo>

</html>

Etiquetas comunes 

·        Encabezados : Para títulos y subtítulos, de<h1> a <h6>.

            <h1>Encabezado 1</h1>

<h2>Encabezado 2</h2>

·        Párrafos : Para bloques de texto.

<p>Este es un párrafo.</p>

·        Enlaces : Para crear hipervínculos.

             <a href="https://www.ejemplo.com">Este es un enlace</a>

·        Imágenes : Para mostrar imágenes.

             <img src="imagen.jpg" alt="Descripción de la imagen">

·        Listas : Para listas ordenadas (<ol> ) y no ordenadas ( <ul>) Los elementos de la lista se definen con <li>.

               <ul>

              <li>Elemento de lista no ordenada</li>

               <li>Otro elemento</li>

             </ul>

 

              <ol>

              <li>Elemento de lista ordenada</li>

              <li>Otro elemento</li>

             </ol>

·        Tablas : Las tablas se crean con el elemento<table> . Se utilizan<tr>para filas,<th>para encabezados de columna y<td>para celdas de datos.

              <tabla>

              <tr>

             <th>Encabezado 1</th>

             <th>Encabezado 2</th>

             </tr>

              <tr>

              <td>Dato 1</td>

                <td>Dato 2</td>

                     </tr>

         </tabla>

 

Prácticas

· Validación : Usa validadores de HTML para asegurarte de que tu código esté libre de errores. 

· Comentarios : Utiliza comentarios para documentar tu código. 

· Accesibilidad : Usa etiquetas semánticas y atributos apropiados para mejorar la accesibilidad de tu sitio web. 

· SEO : Usa etiquetas y atributos que favorecen el posicionamiento en buscadores (SEO), como las etiquetas <title> y <meta> . 


Atributos comunes

· id : Un identificador único para el elemento. 

· clase : Una o más clases CSS para el elemento. 

· estilo : Estilo en línea para el elemento. 

· src : Fuente de un recurso externo, como una imagen o script. 

· href : URL de un enlace.