Etiquetas básicas de HTML
Comprender las etiquetas básicas de HTML es importante mientras aprendes HTML. Estos son los elementos HTML que se usan con más frecuencia que otros. Son:
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración que especifique el tipo de documento: <!DOCTYPE html>.
El documento HTML comienza con <html> y termina con </html>.
La parte principal del documento HTML se encuentra entre <body> y </body>.
Ejemplo de un documento HTML:
Ejemplo de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>Here is the paragraph.</p>
</body>
</html>Encabezados HTML
Los elementos de encabezado se usan para estructurar títulos. Hay seis tipos de encabezados HTML, desde <h1> hasta <h6>.
Ejemplo de los encabezados HTML:
Ejemplo de un encabezado|Etiquetas básicas de HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Resultado
Párrafos HTML
El elemento <p> se usa para separar párrafos HTML.
Ejemplo de los párrafos HTML:
Ejemplo de un párrafo|Etiquetas básicas de HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br /> with line break.</p>
</body>
</html>Resultado
Imágenes HTML
Los atributos de esta etiqueta son:
- el archivo de origen (src),
- el texto alternativo (alt),
- width,
- height.
La etiqueta <img> se usa para insertar imágenes HTML.
Ejemplo de las imágenes HTML:
Ejemplo de una imagen|Etiquetas básicas de HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is an image example</h1>
<img src="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185">
</body>
</html>Resultado
Enlaces HTML
La etiqueta <a> se usa para insertar enlaces HTML. Puedes especificar el destino del enlace con ayuda del atributo href.
Ejemplo de los enlaces HTML:
Ejemplo de un hipervínculo|Etiquetas básicas de HTML|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/">W3docs.com</a>
</body>
</html>Resultado
Botones HTML
Puedes especificar los botones HTML con la etiqueta <button>.
Ejemplo de la etiqueta HTML <button>:
Ejemplo de la etiqueta HTML<button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the HTML <button> tag:</h1>
<p>You can specify the HTML buttons with the button tag:</p>
<button type="button">Button</button>
</body>
</html>Listas HTML
Las listas HTML se especifican con la etiqueta <ul>, que se usa para especificar una lista desordenada, o con la etiqueta <ol>, que se usa para crear una lista ordenada, seguidas de etiquetas <li>.
Ejemplo de las listas HTML:
Ejemplo de listas HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>An unordered list</h2>
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Book</li>
</ul>
<h2>An ordered list</h2>
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Book</li>
</ol>
</body>
</html>Líneas horizontales HTML
La etiqueta HTML <hr> divide la página en diferentes partes y crea un salto temático. Es una etiqueta vacía.
Ejemplo de la etiqueta HTML <hr>:
Ejemplo de la etiqueta HTML <hr>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Welcome to W3Docs</h1>
<hr />
<p>
Learn to design and build professional website<br />
Learn to design and build professional website
</p>
<p>Learn to design and build a professional website</p>
<hr />
<p>Learn to design and build professional website</p>
<p>Learn to design and build professional website</p>
<p>Learn to design and build professional website</p>
<hr />
</body>
</html>Practice
Which of the following is true about HTML based on the content at https://www.w3docs.com/learn-html/html-basic.html?