Elementos básicos de HTML

TAGs Elementos, básicos

Haciendo repaso, como ya vimos, la gran mayoría de las etiquetas que veremos se ubicarán en el body (el cuerpo) de nuestro documento HTML. Aunque existen muchos TAGS de HTML, en este artículo, vamos a analizar solamente una selección de etiquetas básicas, las elementales que tenemos que conocer si o si y su funcionamiento.

HTML Bloque y elementos en Línea

Cada elemento HTML tiene un valor de visualización predeterminado, según el tipo de elemento que sea.
Hay dos valores de visualización: bloque y en línea.

Elementos a nivel de bloque HTML:

Un elemento a nivel de bloque siempre comienza en una nueva línea y los navegadores automáticamente agregan algo de espacio (un margen) antes y después del elemento.

Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).

Dos elementos de bloque de uso común son: <p> y <div>.

El <p> elemento define un párrafo en un documento HTML.

El <div> elemento define una división o una sección en un documento HTML.

Estos son los elementos de nivel de bloque en HTML:

<address>, <aside>, <canvas>, <div>, <dt>, <figcaption>, <footer>, <h1>-<h6>, <hr>.

<main>, <noscrip>, <ol>, <pre>, <table>, <ul>, <article>, <blockquote>, <dd>.

<dl>, <fieldset>, <figure>, <form>, <header>, <li>, <p>, <nav>, <section>>, <tfoot>, <video>.

Elementos en línea HTML:

Un elemento en línea no comienza en una nueva línea.

Un elemento en línea solo ocupa el ancho necesario.

Este es un elemento <span> dentro de un párrafo.

Estos son los elementos en línea HTML:

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <buttom>, <cite>.

<code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>.

<object>, <output>, <q>, <samp>, <script>, <select>, <small>.

<span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.

HTML, Comentarios

En HTML, puedes agregar comentarios en el código para explicar lo que estás haciendo o para dejar notas para ti mismo o para otros desarrolladores que trabajen en el mismo código. Los comentarios no se muestran en el navegador, por lo que solo los verás si abres el archivo HTML en un editor de texto.

Para agregar un comentario en HTML, debes encerrarlo entre.

<!-- y -->

Todo lo que esté entre estos delimitadores será ignorado por el navegador.

Por ejemplo, si quisieras agregar un comentario sobre la sección del encabezado de una página, podrías escribir:


             <!DOCTYPE html>
             <html>
             <head>
            <!-- Esta es la sección del encabezado -->
             <title> Mi página web  </title>
             </head>
             <body>
            <!--  Aquí va el contenido de la página -->
             </body>
             </html>

En este ejemplo, el comentario "Esta es la sección del encabezado" aparece justo encima del título de la página y debajo de la etiqueta <head>. Este comentario es útil para recordar que esta sección es el encabezado y no el contenido de la página.

Recuerda que los comentarios en HTML son una buena práctica para mantener un código legible y organizado, especialmente en proyectos grandes y complejos donde puede haber múltiples desarrolladores trabajando en el mismo código.

HTML-CSS-JavaScript

Etiquetas básicas: Las fundamentales

Etiquetas HTML <h1> a <h6> Definición y uso

Las etiquetas <h1> a <h6> se utilizan para definir encabezados (también conocidos bajo el nombre de títulos) HTML.

<h1> define el encabezado más importante. <h6> define el encabezado menos importante. Los mismo por defecto tienen un tamaño de fuente mayor que el resto del texto con el fin de diferenciarlo. Son muy importantes para el SEO (posicionamiento en los buscadores).

Nota: Solo use uno <h1>por página; esto debería representar el encabezado/tema principal de toda la página. Además, no se salte los niveles de encabezado: comience con <h1>, luego use <h2>, y así sucesivamente.

Vamos a ver un ejemplo:

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Titulo 1 </h1>

<h2> Titulo 2</h2>

<h3> Titulo 3 </h3>

<h4> Titulo 4 </h4>

<h5> Titulo 5</h5>

<h6> Titulo 6 </h6>

<p> Desde mi primera página web </p>

</body>

<html>

Copia el código que está dentro de <body> y pegar en Visual Studio Code

Página, Google Chrome

Titulo 1

Titulo 2

Titulo 3

Titulo 4

Titulo 5

Titulo 6

Desde mi primera página web

Sugerencia Use los elemento <h1> a <h6> solo para encabezados. No lo use solo para poner el texto en negrita o grande, usa otra etiqueta para eso.

HTML-CSS-JavaScript

Etiquetas HTML <p> Definición y uso

La <p> etiqueta define un párrafo.

Los navegadores agregan automáticamente una sola línea en blanco antes y después de cada <p> elemento.

Ejemplo: Un párrafo se marca de la siguiente manera:

<p> Esto es un párrafo </p>

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Elemento <p></h1>

<p> Desde mi primera página web </p>

<p> Esto es un párrafo</p>

<p> Esto es otro párrafo</p>

</body>

<html>

• Copia el código que está dentro de <body> y pegar en Visual Studio Code

Página, Google Chrome

Elemento <p>

Desde mi primera página web

Esto es un párrafo

Esto es otro párrafo

HTML-CSS-JavaScript

Etiquetas HTML <a> Definición y uso

La <a> etiqueta define un hipervínculo, que se utiliza para enlazar de una página a otra.(página, direcciones de correo, o cualquier otra URL)

El atributo más importante de <a> elemento es el href atributo, que indica el destino del enlace. Esta ruta de destino puede apuntar hacía un documento o fichero de internet o bien otro documento/fichero situado en nuestro equipo (local).

Vamos a ver un ejemplo de ambas: Destino local y de internet

Para ello, es necesario crear dentro del directorio del proyecto (donde tenemos el documento index.html) otro documento HTML llamado por ejemplo destinolocal.html:

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Elemento <a></h1>

<a href = "https://www.google.com.ar" > visitar a Google </a>

<a href = "destinolocal.html" > Inicio </a>

</body>

<html>

Copia el código que está dentro de <body> y pegar en Visual Studio Code

Página, Google Chrome

Elemento <a>

Por defecto aparecen unos al lado del otro. Sin CSS. Visitar a GoogleInicio

Visitar a Google
Inicio

Pero para que se entiendan le puse estilo con CSS, y si hacemos clic lo va enlazar uno a google y el otro al destino local, en este caso es inicio. CSS se ve más adelante.

En el Video, en V.S.C estamos usando. Elemento ancla, con destino local y de internet. <a>

De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los navegadores:

Un enlace no visitado está subrayado y azul
Un enlace visitado está subrayado y morado
Un enlace activo está subrayado y rojo.

Consejos y notas

Sugerencia: si la <a> etiqueta no tiene ningún href atributo, es solo un marcador de posición para un hipervínculo.

Sugerencia: una página vinculada normalmente se muestra en la ventana actual del navegador, a menos que especifique otro destino.

Sugerencia: usé CSS para diseñar enlaces: enlaces CSS y botones CSS .

HTML-CSS-JavaScript

Etiquetas HTML <img> Definición y uso

La <img> etiqueta se utiliza para incrustar una imagen en una página HTML.

Técnicamente, las imágenes no se insertan en una página web; las imágenes están vinculadas a páginas web. La <img> etiqueta crea un espacio de espera para la imagen de referencia.

La <img> etiqueta tiene dos atributos obligatorios:

src: especifica la ruta a la imagen. NO OLVIDARSE LA EXTENSIÓN (por ejemplo .png o .jpg). Esta ruta puede apuntar hacía: Una imagen ubicada en local y una imagen enlazada de internet
alt: especifica un texto alternativo para la imagen, si la imagen por algún motivo no se puede mostrar

Vamos a ver un ejemplo. Para ello, vamos a añadir la siguiente imagen con casa.jpg dentro de la carpeta del proyecto, donde tenemos nuestros documentos HTML:

Visual Studio Code

<body>

<img src = "imag/casa.jpg" alt = "casa" >

</body>

El resultado del documento HTML, será:

Si abrimos el documento junto al inspector de navegación. El resultado será el siguiente:

Ahora vamos a modificar la ruta de la imagen hacía otra enlazada desde internet. Para ello, vamos a ir a Google y buscamos por ejemplo flores, una vez dentro, vamos al apartado de imágenes y hacemos clic sobre cualquiera de las imágenes:

Una vez en la imagen, hacemos clic en copiar dirección de imagen:

Nos dará una url que apunta a esa imagen:

Si la pegamos en la propiedad src de una etiqueta de <img>

El resultado será:

Podemos ver que la imagen sobrepasa los márgenes naturales de la pantalla esto es debido a sus dimensiones. Aunque esto se puede controlar mediante HTML, no lo haremos por HTML, ya que lo correcto sería hacerlo con CSS, pero eso lo explicare más adelante.

En el Video, en V.S.C estamos usando. Elemento <img>, con destino local y de internet.

HTML-CSS-JavaScript

Etiquetas HTML <ul> Definición y uso

La <ul> etiqueta define una lista desordenada (con viñetas).

Usa la <ul>etiqueta junto con la Etiqueta <li> para crear listas desordenadas.

Vamos a ver un ejemplo:

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Elemento <ul> lista desordenada </h1>

<ul>

<li> Café</li>

<li> Te</li>

<li> Leche</li>

</ul>

</body>

<html>

Copia el código que está dentro de <body> y pegar en Visual Studio Code

Página, Google Chrome

Elemento <ul> lista desordenada

. Café

. Te

. Leche

HTML-CSS-JavaScript

Etiquetas HTML <ol> Definición y uso

La <ol> etiqueta define una lista ordenada. Una lista ordenada puede ser numérica o alfabética.

La etiqueta <li> se utiliza para definir cada elemento de la lista.

Vamos a ver un ejemplo:

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Elemento <ol> lista ordenada </h1>

<ol>
<li> Café</li>
<li> Te</li>
<li> Leche</li>
< /ol >

<ol start = "50">
<li> Café</li>
<li> Te</li>
<li> Leche</li>
< /ol >

</body>
<html>

Cópia el codigo que está dentro de <body> y pegar en Visual Studio Code

Página, Google Chrome

Elemento <ol> lista ordenada

Café

Leche

Café

Leche

HTML-CSS-JavaScript

Etiquetas HTML <video> Definición y uso

El <video> elemento HTML se utiliza para mostrar un video en una página web.

El controls atributo: agrega controles de video, como reproducción, pausa y volumen.

El autoplay atributo: inicia un video automáticamente. Agregue muted después autoplay para permitir que su video comience a reproducirse automáticamente (pero silenciado):

Es una buena idea incluir siempre widthy/height Si no se configuran la altura y el ancho, la página puede parpadear mientras se carga el video.

El texto entre las etiquetas <video> </video> solo se mostrará en el navegadores que no admitan el <video> elemento.

Vamos a ver un ejemplo: De elemento video, con controls atributo

Visual Studio Code

<!DOCTYPE html>
<html lang="es">
<head>
<title> Proyecto mundo <title>
</head>

<body>

<h1> Elemento <video> </h1>

<video width = "320" height = "240" controls >

<source src ="movie.mp4" type ="video/mp4" >

</video>

</body>

<html>

Copia el código que está dentro de <body> y pegar en Visual Studio Code

Página, Google Chrome

src especifica la ruta al video.

type el tipo de video (mp4-ogg-etc.)

Elemento <video>

Elementos semánticos en HTML

Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador.

HTML semántico es el uso de marcas HTML para reforzar la semántica, o significado, de la información en las páginas web y aplicaciones web en lugar de limitarse a definir su presentación o mirar.

HTML semántico es procesada por los navegadores web tradicionales, así como por muchos otros agentes de usuario. CSS se utiliza para sugerir su presentación a los usuarios humanos.

¿Por qué elementos semánticos?

Según el W3C: "Una Web semántica permite que los datos se compartan y reutilicen entre aplicaciones, empresas y comunidades".

¿Cuáles son elementos semánticos?

Elementos no semánticos: Ejemplo, los <div> y <span> No dice nada sobre su contenido

Elementos semánticos: <table><form> y <article> Define claramente su contenido.

HTML5 elementos semánticos son compatibles con todos los navegadores modernos.

Nuevos elementos semánticos en HTML5

Muchos sitios web contienen código HTML como: <div id="nav"> <div div class="header"> <div div id="footer"> para indicar la navegación, encabezado y pie de página.

HTML5 ofrece nuevos elementos semánticos para definir diferentes partes de una página web:

<article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main> <mark>, <nav>, <section>, <summary>, <time>

El elemento <header>: especifica una cabecera para un documento o sección.

Representa un contenedor de contenido introductorio o un conjunto de enlaces de navegación, normalmente contiene:

Uno o más elementos de incrustado (<h1>, <h6>)
Logotipo o icono
Información de autoridad

Nota: Puedes tener varios<header> en un documento HTML. Sin embargo, no se puede colocar dentro de un <footer> o otro <header>

El elemento <nav>: define un conjunto de enlaces de navegación.

Está destinado solo a los principales bloques de enlaces de navegación.. Sin embargo, no todos los enlaces en un documento deben estar dentro de un elemento <nav>

Los navegadores, como los lectores de pantalla para usuarios discapacitados, pueden usar este elemento para determinar si se omite la representación inicial de este contenido.

El elemento <section>: define una sección de un documento.

De acuerdo con la documentación HTML de W3C: "Una sección es una agricultura temática de contenido, generalmente con un encabezado".

Ejemplos de dónde el elemento <section> se puede utilizar:

Capítulos
Introducción
Noticias
Información del contacto

Normalmente, una página web se puede dividir en secciones para la introducción, el contenido y la información de contacto.

El elemento <article>: especifica el contenido independiente, autónomo.

Un artículo debe tener sentido por sí mismo, y debe ser posible leer de forma independiente del resto del sitio web.

Ejemplos de dónde el elemento <article> se puede utilizar:

Mensaje de foro
Entrada de blog
Artículo de periódico
Tarjetas de productos
Comentarios del usuario

Anidar <article> en <section> o viceversa

¿Podemos usar las definiciones para decidir cómo anidar esos elementos? ¡No podemos!

Por lo tanto, encontrará páginas HTML con elementos <section> que contienen elementos <article> y elementos <articles> que contienen elementos <section>

El elemento <footer>: define un pie de página para un documento o sección, normalmente contiene.

Información de autoría
Información del contacto
Información registrada
Mapa del sitio
Documentos relacionados
Volver a los enlaces superiores

El elemento <aside>: define algún contenido además del contenido en el que se coloca (como una barra lateral).

El <aside> contenido debe estar indirectamente relacionado con el contenido circundante.

Investigar y practicar, a continuación le dejo el siguientes link de, (referencia de elementos HTML)

w3schools

¿Qué son los elementos anidados en HTML?

Elementos anidados. Un elemento HTML funciona como un contenedor en el que puedes guardar textos. Pero, si quieres añadir otro elemento HTML dentro de él lo puedes hacer, estos se conocen como elementos anidados.

Favicon en HTML

Un favicon es una pequeña imagen que se muestra junto al título de la página en la pestaña del navegador. Cómo agregar un Favicon en HTML. Puede usar cualquier imagen que desee como su favicon. Se muestra una imagen de favicon a la izquierda del título de la página en la pestaña del navegador, como esta:

Sugerencia: un favicon es una imagen pequeña, por lo que debe ser una imagen simple con alto contraste.

Para agregar un favicon a su sitio web, guarde su imagen de favicon en el directorio raíz de su servidor web o cree una carpeta en el directorio raíz llamada imágenes y guarde su imagen de favicon en esta carpeta. Un nombre común para una imagen de favicon es "favicon.ico".

A continuación, agregue un elemento <link> a su archivo "index.html", después del elemento <title>, así:

Ahora, guarde el archivo "index.html" y vuelva a cargarlo en su navegador. La pestaña de su navegador ahora debería mostrar su imagen de favicon a la izquierda del título de la página.