Fundamentos de HTML
En este artículo, explicamos los fundamentos de HTML.
Esto explica las etiquetas principales, como la declaración DOCTYPE, las etiquetas <html>, <head> y <body>. También describe etiquetas, atributos y caracteres especiales.
YouTube Video
Fundamentos de HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Al principio del archivo, declaramos que este es un documento HTML5, lo que indica que sigue las reglas de HTML5.
-
<html>La etiqueta
<html>es el elemento más externo en un documento HTML que envuelve todo el contenido. Cada archivo HTML contiene solo una etiqueta<html>, y todas las demás etiquetas están anidadas dentro de esta etiqueta. Ellang="en"dentro de la etiqueta de apertura<html>se llama un atributo e informa al navegador que el documento está escrito en inglés. Esto ayuda a notificar a los lectores de pantalla y motores de búsqueda el idioma del documento. -
<head>La etiqueta
<head>define los metadatos (información) de la página. Esto incluye el título de la página, la codificación de caracteres y los ajustes de diseño responsivo. El diseño responsivo se refiere a un método diseñado para que los sitios web o aplicaciones se adapten y se muestren bien en varios dispositivos y tamaños de pantalla. Esto permite a los usuarios ver cómodamente el contenido en diferentes dispositivos como teléfonos inteligentes, tabletas y ordenadores de escritorio.<meta charset="UTF-8">establece la codificación de caracteres del documento a UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">es una configuración que optimiza la visualización para dispositivos móviles. La página se ajusta al ancho de la pantalla del dispositivo.<title>representa el título de la página que se muestra en la pestaña del navegador. En este ejemplo, se establece el título 'Fundamentos de HTML'. -
<body>La etiqueta
<body>contiene la parte que muestra el contenido a los usuarios. Dentro de esta etiqueta, se escriben texto, imágenes, enlaces, etc. -
<main>La etiqueta
<main>representa el contenido principal de la página. Esto incluye encabezados y párrafos. -
<h1>La etiqueta
<h1>representa el encabezado más importante de la página. Es común usar la etiqueta<main>y la etiqueta<h1>solo una vez en un documento. -
<p>La etiqueta
<p>representa un párrafo. -
<!-- Comment -->Puedes escribir comentarios en HTML en este formato. Dado que el HTML del lado del cliente puede ser visto por cualquiera, no incluya información sensible como contraseñas o claves de API en los comentarios.
HTML tiene muchas etiquetas, pero presta atención a los siguientes puntos aquí. Un archivo HTML consiste en una declaración DOCTYPE y una etiqueta <html>. La etiqueta <html> contiene una etiqueta <head> y una etiqueta <body>. En HTML, todas las etiquetas están contenidas dentro de la etiqueta <html>, expresando la estructura del texto mediante relaciones de padre, hijo y hermano, similar a una estructura de árbol. Al escribir HTML, también enfócate en la estructura del documento.
Etiquetas y Atributos
A continuación, echemos un vistazo a las etiquetas y atributos de HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Las etiquetas están encerradas entre corchetes angulares (<, >) y típicamente consisten en un par de etiquetas de apertura y cierre. Sin embargo, también hay etiquetas individuales, como la etiqueta <meta> y la etiqueta <img>, que no contienen contenido. Las etiquetas individuales no requieren una etiqueta de cierre.
Las etiquetas pueden tener atributos, que proporcionan información adicional a la etiqueta. Los atributos se escriben dentro de la etiqueta de apertura en el formato nombreAtributo="valor".
Aquí, <div> se refiere a una etiqueta, y <div>Contenido</div> a un elemento.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Los atributos comunes en HTML incluyen id, class y style. El atributo id se usa para dar a un elemento un identificador único, y solo puede haber un elemento con el mismo id en una página. Es útil cuando se manipulan elementos específicos con JavaScript o CSS. El atributo class le permite agrupar múltiples elementos con CSS o JavaScript asignando un nombre de clase. Puede asignar la misma clase a varios elementos, lo que permite compartir estilos. El atributo style especifica estilos CSS en línea para un elemento. Normalmente, los estilos se definen en una hoja de estilo externa o dentro de la etiqueta <style>, pero este atributo se utiliza cuando desea especificar estilos directamente para elementos individuales.
Caracteres especiales en HTML
A continuación, investiguemos los caracteres especiales en HTML.
En HTML, hay caracteres especiales utilizados para mostrar símbolos y caracteres específicos. Estos caracteres especiales se llaman entidades. Los caracteres especiales comienzan con & (ampersand), seguidos de un nombre o número, y terminan con ; (punto y coma).
Caracteres especiales representativos en HTML
Aquí hay algunos caracteres especiales comunes.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Ejemplos de uso de caracteres especiales en HTML
Particularmente, los corchetes angulares (<, >) y las comillas dobles deben usarse correctamente en HTML.
Los corchetes angulares (<, >) y las comillas dobles deben representarse como caracteres especiales en HTML, como se muestra a continuación.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Versiones de HTML
Echemos un vistazo a las versiones de HTML aquí.
Las versiones de HTML han evolucionado para definir la estructura y funcionalidad de las páginas web. Aquí están las versiones principales:.
-
HTML 1.0 (1993)
La primera versión de HTML tenía solo características de marcado muy básicas. Definía elementos como enlaces, encabezados, párrafos y listas.
-
HTML 2.0 (1995)
La primera versión estandarizada, con más elementos añadidos, incluyendo soporte para formularios y tablas.
-
HTML 3.2 (1997)
Se añadieron más características de diseño, permitiendo la incrustación de elementos de estilo y scripts. Además, el diseño usando el elemento
<table>se volvió común. -
HTML 4.01 (1999)
Se avanzó en la separación de la estructura y la presentación, y se introdujo CSS. Se recomendó la creación de sitios conformes a los estándares. Además, se mejoró la internacionalización y accesibilidad de los documentos.
-
HTML5 (2014)
La última versión importante, que introduce soporte para video y audio, canvas, almacenamiento local, geolocalización y otras nuevas API. Es compatible con móviles, permitiendo el desarrollo de aplicaciones web más interactivas.
HTML5.2 es una versión de HTML recomendada en 2017 y es una versión mejorada de HTML5. Desde HTML5.2, se actualiza continuamente como el HTML Living Standard, en lugar de tener un número de versión estático.
HTML ha evolucionado a través de estas versiones, desarrollándose en una tecnología web más flexible y poderosa.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.