Hoja de machete HTML

Tabla de contenido

Raíz principal

El elemento <html> representa la raíz (elemento de nivel superior) de un documento HTML, también llamado documento. Todos los demás elementos deben ser descendientes de este elemento. 

<html> ... </html>

Texto modelo 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Description of the document -->
    <meta charset="UTF-8" />
    <title>
        <!-- title goes here -->
        Geeks For Geeks
    </title>
</head>

<body>
    <!-- your content goes here -->
    Welcome to Geeks for Geeks
</body>

</html>

Headings

Las etiquetas de encabezado HTML (<h1> a <h6>) e utilizan para definir los encabezados y subencabezados de una página web.

La etiqueta <h1> suele reservarse para el título principal de la página, mientras que las demás designan subtítulos en orden descendente de importancia.

Etiquetas de encabezado Descripcion Uso
<h1> Se utiliza para el título generalmente una vez por página y tiene un tamaño de fuente de 2em. <h1>….</h1>
<h2> Se utiliza para títulos de tamaño medio y tiene un tamaño de fuente de 1,5em. <h2>….</h2>
<h3> Se utiliza para las subsecciones y tiene un tamaño de fuente de 1,17em. <h3>….</h3>
<h4> Se utiliza para resaltar texto y tiene un tamaño de fuente de 1em. <h4>….</h4>
<h5> Título de quinto nivel con un tamaño de fuente de 0,83em. <h5>….</h5>
<h6> Muestra los detalles menos significativos y tiene un tamaño de fuente de 0,67em. <h6>….</h6>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Prueba de encabezados</title>
</head>

<body>
    <h1>Neoblog @ fatbuffalo.neocities.org</h1>
    <h2>Neoblog @ fatbuffalo.neocities.org</h2>
    <h3>Neoblog @ fatbuffalo.neocities.org</h3>
    <h4>Neoblog @ fatbuffalo.neocities.org</h4>
    <h5>Neoblog @ fatbuffalo.neocities.org</h5>
    <h6>Neoblog @ fatbuffalo.neocities.org</h6>
</body>

</html>

Contenedores

Etiquetas contenedoras Las etiquetas contenedoras se utilizan para agrupar otros elementos. Proporcionan una forma de estructurar el HTML y aplicar estilos a varios elementos a la vez. Las varias etiquetas contenedoras en HTML son:

Tags Description Syntax
<div> Elemento de bloque que define una división en un documento HTML. <div>... </Div>
<span> Elemento en línea que se utiliza para marcar una parte de un texto o documento. <span>... </tramo>
<p> Se utiliza para representar un párrafo. <p>... </p>
<pre> Representa el texto preformateado que se va a presentar exactamente como está escrito en el archivo HTML. <antes>... </antes>
<code> Se utiliza para representar códigos fuente. Y tambien contenidos mono-espaciados y de text plano o sin formato <code>... </code>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> GeeksforGeeks </title>
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Geeksforgeeks is a computer science portal." />
    <style type="text/css">
        body {
            background-color: powderblue;
        }
        
        h1 {
            color: black;
            font-family: arial;
        }
    </style>
</head>

<body>
    <p>
        GeeksforGeeks is a
        <!-- span tag starts-->
        <span style="color:red;font-weight:bolder">
            computer science</span> portal for
        <span style="background-color: lightgreen;">
            geeks
        </span>
        <!-- span tag ends -->
        <!-- pre tag starts here -->
    <pre>
        This
        is    a pre tag.
      </pre>
    </p>
    <!-- html pre tag ends here -->
    <!--code Tag starts here -->
    code tag: Displays code snippets.
    <code>
        #include<stdio.h>
            int main() {
            printf("Hello Geeks");
            }
            <!--code Tag ends here -->
    </code>
    <p>
        Click on the following link
        <!-- anchor tag starts -->
        <a href="https://www.geeksforgeeks.org">
            GeeksforGeeks
        </a>
        <!-- anchor tag ends -->
    </p>
</body>

</html>

Document Information

This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.

Tags Description Syntax
<head> Container for metadata which is data about data. <head>…</head>
<link> Used to link external style sheets or documents. <link>
<meta>  Defines metadata about HTML document. <meta/>
<title> Defines the document’s title <title>…</title>
<style> Used to define style information (CSS) for a document. <style>…</style>
HTML 
<!DOCTYPE html>
<html>
<!-- head tag starts here -->

<head>
    <!-- title tag -->
    <title>Title goes here </title>

    <!-- link tag  -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <!-- meta tag ends -->

    <!-- style tag starts here -->
    <style>
        #first {
            font-family: Castellar;
            background-color: green;
            color: white;
        }
        
        .second {
            text-align: center;
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
    <!-- style tag ends here -->
</head>
<!-- head tag ends here -->

<body>
    <p id="first">Hello GeeksforGeeks.</p>
    <p class="second">Welcome Geeks</p>
</body>

</html>

Elemento Semántico

Los Elementos Semánticos en HTML son elementos que describen claramente su significado en términos de contenido y función, tanto para el navegador como para el desarrollador.

Tags Descripción Sintaxis
<header> Se usa para dar contenido introductorio sobre el documento. <header>… </header>
<main> Representa el contenido principal dominante de un documento. <main>… </main>
<section> Elemento HTML estructural usado para agrupar elementos relacionados. <section>… </section>
<nav> Representa una sección de una página para proporcionar enlaces de navegación. <nav>…</nav>
<article> Representa una composición autónoma que es independientemente distribuible o reutilizable. <article>… </article>
<aside> Define algún contenido aparte del contenido en el que se coloca. <aside>… </aside>
<footer> Representa un pie de página para su elemento raíz de seccionamiento. <footer>… </footer>
<address> Proporciona información de contacto para una persona, personas o una organización. <address>…</address>
HTML 
<!DOCTYPE html>
<html>

<body>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <!-- header tag starts -->
        <header>
            <h3>GeeksforGeeks Learning</h3>
            <h3> HTML nav Tag</h3>
            <!-- nav tag starts -->
            <nav>
                <a href="#">Home</a> |
                <a href="#">Interview</a> |
                <a href="#">Languages</a> |
                <a href="#">Data Structure</a> |
                <a href="#">Algorithm</a>
            </nav>
            <!-- nav tag ends -->
        </header>
        <!-- header tag ends -->
    </article>
    <!-- main tag starts here -->
    <main>
        <!-- HTML section tag is used here -->
        <section>
            <h1>Geeksforgeek: Section 1</h1>
            <p>Content of section </p>
        </section>
        <!-- HTML section tag ends here -->
        <!-- aside tag starts here -->
        <aside>
            <h1>This is heading text in aside Tag</h1>
            <p>This is paragraph text in aside Tag</p>
        </aside>
        <!-- aside tag ends here -->
    </main>
    <!-- main tag ends here -->
    <!--HTML footer tag starts here-->
    <footer>
        <article>
            <!-- address tag starts from here -->
            <address>
                Organization Name: GeeksforGeeks <br>
                Web Site:
                <a href="https://www.geeksforgeeks.org/about/contact-us/">
                    GeeksforGeeks</a><br>
                visit us:<br>
                GeeksforGeeks<br>
                A-118, Sector 136, Noida, <br>
                Uttar Pradesh (201305)
            </address>
            <!-- address tag ends here -->
        </article>
        <br>
        <a href="https://www.geeksforgeeks.org/about/">
            About Us
        </a>|
        <a href="https://www.geeksforgeeks.org/privacy-policy/">
            Privacy Policy
        </a>|
        <a href="https://www.geeksforgeeks.org/careers/">
            Careers
        </a>
        <p>@geeksforgeeks, Some rights reserved</p>
    </footer>
    <!-- footer tag ends here -->
</body>

</html>

Formato de texto y semántica de texto en línea

Mensaje de texto etiquetas de formato en HTML, se utilizan para dar formato al texto de diferentes maneras, como poner el texto en negrita, cursiva o monoespaciado. El texto HTML en línea La semántica se utiliza para definir el significado, la estructura o el estilo de una palabra, línea, o cualquier fragmento arbitrario de texto.

Tags Description Syntax
<en> Se utiliza para poner énfasis en algún texto o mostrar algún grado de énfasis. <en>... </pulgada>
<strong> Indica que el contenido es de mayor importancia, generalmente, es marcado en negrita <strong>... </strong>
<sub> Convierte el texto a Subscript <sub>…</sub>
<sup> Convierte el texto a Superscript <sup>…</sup>
<abbr>  Representa una abreviacion o acronimo <abbr>… </abbr>
<mark> Highlights important text for reference or notation purposes. <mark>…</mark>
<cite> Describes the title of a creative work. <cite>…</cite>
<time> Used to represent a specific period of time. <time>…</time>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> Geeks for Geeks </title>
</head>

<body>
    <!-- emphasis -->
    <div><em>Emphasized text</em></div>
    <!-- strong -->
    <div><strong>Important text!</strong></div>
    <!-- subscript -->
    <div>GFG<sub>subscript text</sub></div>
    <!-- superscript -->
    <div>GFG<sup>Superscript text</sup></div>
    <!-- abbreviation -->
    <div><abbr>Abbreviation</abbr></div>
    <!-- mark -->
    <div><mark>Highlighted text</mark></div>
    <!-- cite -->
    <div><cite>Title of creative work</cite></div>
    <!-- time -->
    <div>Time<time>9:00 am</time>
        to <time>7:00 pm</time>
    </div>
</body>

</html>

Lists

List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be either numerical, alphabetic, bullet, or other symbols. There are three list types in HTML:

  • Unordered list: Used to group a set of related items in no particular order.
  • Ordered list: Used to group a set of related items in a specific order.
  • Description list: Used to display name/value pairs such as terms and definitions.
Tags Description Syntax
<ul> Represents an unordered list of items list. <ul>…</ul>
<ol> The HTML <ol> element represents an ordered list of items. <ol>…</ol>
<li> Represents an item in a list. <li>…</li>
<dl> Represents a description list. <dl>…</dl>
<dd> Used to describe a term/name in a description list. <dd>…</dd>
<dt> Specifies a term in a description. <dt>…</dt>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>
</head>

<body>
    <h2>Welcome To GeeksforGeeks Learning</h2>
    <h5>Unordered List</h5>
    <!-- Unordered List -->
    <ul>
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
    </ul>
    <h5>Ordered List</h5>
    <!-- Ordered List -->
    <ol>
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
    </ol>
    <h5>Description List</h5>
    <!-- Description List -->
    <dl>
        <dt>Courses:</dt>
        <dd>100 </dd>
        <dt> Quizes:</dt>
        <dd> 500 </dd>
        <dt> Interview Experiences:</dt>
        <dd>1000 </dd>
    </dl>
</body>

</html>

Tablas

Las etiquetas de tabla en HTML, como <table>, <tr>, <td> y <th>, se utilizan para crear y estructurar tablas en HTML. Permiten presentar datos en filas y columnas.

Etiquetas Descripción Sintaxis
<caption> Especifica el título de una tabla. <caption>…</caption>
<table> Representa datos en una tabla bidimensional. <table>…</table>
<thead> Se utiliza para proporcionar un encabezado al grupo de contenido en una tabla HTML. <thead>…</thead>
<tbody> Se utiliza para agrupar el contenido principal de una tabla HTML. <tbody>... </tbody>
<th> Define una celda como encabezado de un grupo de celdas de la tabla. <th>... </th>
<td> Define una celda de una tabla. <td>... </td>
<tr> Define una fila en una tabla HTML. <tr>... </tr>
<tfoot> Define un conjunto de filas que resumen las columnas de la tabla. <tfoot>... </tfoot> 
<!DOCTYPE html>
<html>

<head>
    <title>HTML Table</title>
</head>

<body>
    <!-- table starts here -->
    <table>
        <!-- Table Caption -->
        <caption>Geeks For Geeks Learning</caption>
        <!-- Table row starts -->
        <tr>
            <!--Headers -->
            <th>Programming Languages</th>
            <th>Development</th>
        </tr>
        <!-- Table row ends -->
        <tr>
            <!-- Table data -->
            <td>C programming </td>
            <td>Full stack development</td>
        </tr>
        <tr>
            <td>Java programming</td>
            <td>Backend development</td>
        </tr>
        <tr>
            <td>Angular </td>
            <td>Frontend Development</td>
        </tr>
        <!-- Table Footer starts here -->
        <tfoot>
            <tr>
                <td>Footer content</td>
            </tr>
        </tfoot>
        <!-- Table footer ends here -->
    </table>
</body>

</html>

Formularios de entrada

Un El formulario HTML es una sección de un documento que actúa como contenedor para diferentes tipos de elementos de entrada, como campos de texto, contraseñas, menús, casillas de verificación, botones de opción, botones de envío, etcétera.

Generalmente, las etiquetas de formulario en HTML, como <form>, <input>, <textarea>, y <button>, se utilizan para crear formularios para la entrada del usuario.

Tags Description Syntax
<form> Representa una sección que contiene controles para enviar información. <forma>... </formulario>
<input> Crea controles interactivos para que los formularios acepten datos. <entrada>... </entrada>
<textarea> Creación de un control de edición de texto sin formato de varias líneas. <textarea>... </textarea>
<select> Representa un control de lista de seleccion. <select>…</select>
<option> Define un elemento seleccionable o existente pero tachado, en una lista de seleccion <option>…</option>
<optgroup> Crea un grupo de opciones dentro de un elemento <select> <optgroup>.</optgroup>
<progress> Muestra un indicador que muestra el grado de completación de una tarea. <progress>…</progress>
<datalist> Usada para proporcionar opciones predeterminadas para un elemento <input> y añadir una función de autocomplecion al mismo. <datalist>…</datalist>
<button> Representa un boton presionable. <button>…</button>
<label> Especifica la etiqueta para un elemento <input>. <label>…</label>
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GfG</title>
</head>

<body>
    <form>
        <fieldset>
            <legend>Personal Details</legend>
            <p>
            <p>select used here:</p>
            <!-- label starts -->
            <label>
                Salutation
                <br />
                <!-- select starts -->
                <select name="salutation">
                    <option>--None--</option>
                    <option>Mr.</option>
                    <option>Ms.</option>
                    <option>Mrs.</option>
                </select>
                <!-- select ends -->
            </label>
            <!-- label ends -->
            </p>
            <p>
                <label>First name: 
                  <input name="firstName" placeholder="elemento de entrada usado aqui" />
                </label>
            </p>
            <p>
                <label>Last name: <input name="lastName" /></label>
            </p>
            <p>
                Gender :
                <label>
                  <input type="radio" name="gender" value="male" /> Male
                </label>
                <label>
                  <input type="radio" name="gender" value="female" /> Female
                </label>
            </p>
            <label Language preferred: </label>
                <input list="lang" placeholder="datalist used here">
                <!--datalist Tag starts here -->
                <datalist id="lang">
                    <option value="java"></option>
                    <option value="reactjs"></option>
                    <option value="php"></option>
                    <option value="python"></option>
                </datalist>
                <!--datalist Tag ends here -->
                <p>
                    <label>Email:
                       <input type="email" name="email" />
                    </label>
                </p>
                <p>
                    <label>Date of Birth:
                       <input type="date" name="birthDate"/>
                    </label>
                </p>
                <p>
                    <!-- HTML address tag -->
                    <label>
                        Address :
                        <br />
                        <!--Textarea  -->
                        <textarea name="address" 
                                  placeholder="Textarea used here">
                        </textarea>
                    </label>
                </p>
                <p>
                    <button type="submit">Submit</button>
                </p>
                <p>Progress tag used here:</p>
                Downloading progress for your profile:
                <!--HTML progress tag starts here-->
                <progress value="57" max="100" placeholder="progress tag used here">
                </progress>
                <!--HTML progress tag ends here-->
        </fieldset>
    </form>
</body>

</html>

Multimedia en HTML, como <img>, <audio>, y <video>, se utilizan para incrustar contenido multimedia como imágenes, archivos de audio y videos en su página web.

Etiquetas Descripción Sintaxis
<img> Se utiliza para enlazar imágenes a páginas web <img />
<audio> Se utiliza para incluir contenido sonoro en documentos <audio>... </audio>
<video> Incrusta un reproductor multimedia que admite archivos de vídeo en el documento <video>... </video>
<figure> Agrupa varios diagramas, imágenes, ilustraciones y fragmentos de código en el documento <figure>... </figure>
<figcaption> Se utiliza para proporcionar el título del contenido <figcaption>... </figcaption>
<embed> Incrusta multimedia en una página web <embed>... </embed>
<object> Incluye objetos, como imágenes, audio, vídeos y formato de documento portátil (PDF) en una página web. <object>... </object>
HTML 
<!DOCTYPE html>
<html>

<body style="text-align: center;">
    <p>image here</p>
    <!-- image tag starts here-->
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
         width="420" height="100" alt="Geeksforgeeks.org">
    <!-- image tag ends here-->
    <p> Audio Sample</p>
    <!-- audio tag starts here -->
    <audio controls>
        <source src="test.mp3" type="audio/mp3">
        <source src="test.ogg" type="audio/ogg">
    </audio>
    <!-- audio tag ends here -->
    <p> Video sample</p>
    <!-- Video tag starts here -->
    <video width="400" height="350" controls>
        <source src="myvid.mp4" type="video/mp4">
        <source src="myvid.ogg" type="video/ogg">
    </video>
    <!-- Video tag ends here -->
    <p> HTML Figure here</p>
    <!--HTML figure tag starts here-->
    <figure>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" 
             width="304" height="228" alt="The Pulpit Rock">
        <figcaption>Figure Caption goes here </figcaption>
    </figure>
    <!--HTML figure tag ends here-->
    <p> HTML Object here</p>
    <!--HTML object tag starts here-->
    <object data=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
            width="550px" height="150px">
        GeeksforGeeks
        <!--HTML object tag ends here-->
    </object>
</body>

</html>

Caracteres y símbolos

Caracteres especiales y símbolos en HTML, como & para un & o < para un signo menor que, se utilizan para mostrar caracteres que tienen un signo especial significado en HTML. Algunos de los más utilizados son:

Simbolo Descripción Nombre de Entidad Código Numérico
© Derecho de autor &copy; &#169;
& &; &#38;
> Más grande que &gt; &#62;
< &lt; &#60;
$ Dólar &dollar; &#36;
“ Comillas &quot; &#34;
‘ Apostrofe &apos; &#39;
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Characters and Symbols</title>
</head>

<body>
    <!-- Characters and Symbols are use inside of p element -->
    <p>This is the sign of copyright: © </p>
    <p>This is the sign of trademark: ™ </p>
    <p>This is the sign of ampersand: @ </p>
    <p>This is the sign of dollar : $ </p>
    <p>This is the sign of less than : < </p>
            <p>This is the sign of greater than : > </p>
            <p>This is the sign of quotation mark : " </p>
</body>

</html>

Atributos

Atributos en HTML se utilizan para proporcionar información adicional sobre los elementos HTML. Siempre se especifican en la etiqueta de inicio y, por lo general, vienen en pares nombre/valor como name="valor". El nombre es la propiedad que desea establecer y el valor es el valor deseado del atributo.

Atributos Description Syntax
alt Le da una etiqueta a una imagen, de esta manera, incluso si la imagen no carga, se muestra una descripcion de la misma. Esto hace a la pagina mas accesible < tag_name alt ="..." >
href Se utiliza para definir un hipervínculo. < tag_name href ="..." >
src Especifica la dirección URL o fuente de la imagen que se va a utilizar. < tag_name src="..." >
width Especifica la anchura de la imagen en píxeles. < tag_name width ="..." >
height Especifica la altura de la imagen en píxeles < tag_name height ="..." >
style Permite cambiar el aspecto del documento de maneras arbitrarias < tag_name style ="..." >
id Identificador unico para identificar un area o elemento especifico de una la pagina < tag_name id =”…” >
class Especifica una o mas 'clases' para un elemento < tag_name class =”…” >
title Especifica informacìon extra sobre un elemento < tag_name title =”…” >
Placeholder Especifica una pequeña pista de cual es el contenido esperado en un area de texto u otro tipo de elemento de entrada <tag_name placeholder=” “>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>HTML Attributes</title>
    <style>
        #geeks {
            background-color: green;
            color: white;
        }
        
        .gfg {
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- source attribute-->
    <div>
        <p>source attribute:</p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
    </div>
    <!--Alternative text: alt attribute -->
    <div><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads../Geek_logi_-low_res.png" 
          alt="Alternative text here">
    </div>
    <br>
    <!-- Link: href attribute-->
    <a href="https://ide.geeksforgeeks.org/">
        Click to open in the same tab
    </a>
    <br>
    <a href="https://ide.geeksforgeeks.org/" target="_blank">
        Click to open in a different tab
    </a>

    <!-- title attribute-->
    <h2 title="GeeksforGeeks: A computer science
    portal for geeks">
        Title attribute: hover to see the effect
    </h2>

    <!-- Width and Height attribute-->
    <p>Using width and height attribute here:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" 
         width="300px" height="100px">

    <!-- id attribute-->
    <h2 id="geeks">
        Styling using id attribute here
    </h2>

    <!-- class attribute -->
    <h2 class="gfg">
        Styling using class attribute here
    </h2>

    <!-- style -->
    <h2 style="font-family:Chaparral Pro Light; ">
        Styling using style attribute here
    </h2>

</body>

</html>

HTML es la base de las páginas web, se utiliza para la página web Desarrollo mediante la estructuración de sitios web y aplicaciones web. Puedes aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

¿Cuáles son algunos elementos de una sola linea comunes en HTML?

Los elementos en línea aparecen uno al lado del otro horizontalmente. Estos son algunos ejemplos:

  • <a> : Crea hipervínculos.
  • <img> : Incrusta imágenes.
  • <span> : Se utiliza para agrupar elementos o aplicar estilos.
  • <em> : Enfatiza el texto (generalmente en cursiva).
  • <strong> : Enfatiza el texto (generalmente en negrita).
  • <code> : Define el código fuente (normalmente monoespaciado).
  • <time> : Da formato a fechas y horas.
  • <q> : Representa citas en línea.
  • <br> : Inserta saltos de línea.
  • <wbr> : Sugiere un posible salto de línea.
  • Para crear un hipervínculo : <a href="URL">texto en el que se puede hacer clic</a>.
  • Para crear un enlace mailto : <a href="mailto:EMAIL_ADDRESS">texto en el que se puede hacer clic</a>.
Hoja de machete HTML - Guía HTML completa (2024)

Hoja de machete HTML

Tabla de contenido

Raíz principal

El elemento <html> representa la raíz (elemento de nivel superior) de un documento HTML, también llamado documento. Todos los demás elementos deben ser descendientes de este elemento. 

<html> ... </html>

Texto modelo 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Description of the document -->
    <meta charset="UTF-8" />
    <title>
        <!-- title goes here -->
        Geeks For Geeks
    </title>
</head>

<body>
    <!-- your content goes here -->
    Welcome to Geeks for Geeks
</body>

</html>

Headings

Las etiquetas de encabezado HTML (<h1> a <h6>) e utilizan para definir los encabezados y subencabezados de una página web.

La etiqueta <h1> suele reservarse para el título principal de la página, mientras que las demás designan subtítulos en orden descendente de importancia.

Etiquetas de encabezado Descripcion Uso
<h1> Se utiliza para el título generalmente una vez por página y tiene un tamaño de fuente de 2em. <h1>….</h1>
<h2> Se utiliza para títulos de tamaño medio y tiene un tamaño de fuente de 1,5em. <h2>….</h2>
<h3> Se utiliza para las subsecciones y tiene un tamaño de fuente de 1,17em. <h3>….</h3>
<h4> Se utiliza para resaltar texto y tiene un tamaño de fuente de 1em. <h4>….</h4>
<h5> Título de quinto nivel con un tamaño de fuente de 0,83em. <h5>….</h5>
<h6> Muestra los detalles menos significativos y tiene un tamaño de fuente de 0,67em. <h6>….</h6>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Prueba de encabezados</title>
</head>

<body>
    <h1>Neoblog @ fatbuffalo.neocities.org</h1>
    <h2>Neoblog @ fatbuffalo.neocities.org</h2>
    <h3>Neoblog @ fatbuffalo.neocities.org</h3>
    <h4>Neoblog @ fatbuffalo.neocities.org</h4>
    <h5>Neoblog @ fatbuffalo.neocities.org</h5>
    <h6>Neoblog @ fatbuffalo.neocities.org</h6>
</body>

</html>

Contenedores

Etiquetas contenedoras Las etiquetas contenedoras se utilizan para agrupar otros elementos. Proporcionan una forma de estructurar el HTML y aplicar estilos a varios elementos a la vez. Las varias etiquetas contenedoras en HTML son:

Tags Description Syntax
<div> Elemento de bloque que define una división en un documento HTML. <div>... </Div>
<span> Elemento en línea que se utiliza para marcar una parte de un texto o documento. <span>... </tramo>
<p> Se utiliza para representar un párrafo. <p>... </p>
<pre> Representa el texto preformateado que se va a presentar exactamente como está escrito en el archivo HTML. <antes>... </antes>
<código> Se utiliza para representar códigos fuente <código>... </código>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> GeeksforGeeks </title>
    <meta name="keywords" content="Meta Tags, Metadata" />
    <meta name="description" content="Geeksforgeeks is a computer science portal." />
    <style type="text/css">
        body {
            background-color: powderblue;
        }
        
        h1 {
            color: black;
            font-family: arial;
        }
    </style>
</head>

<body>
    <p>
        GeeksforGeeks is a
        <!-- span tag starts-->
        <span style="color:red;font-weight:bolder">
            computer science</span> portal for
        <span style="background-color: lightgreen;">
            geeks
        </span>
        <!-- span tag ends -->
        <!-- pre tag starts here -->
    <pre>
        This
        is    a pre tag.
      </pre>
    </p>
    <!-- html pre tag ends here -->
    <!--code Tag starts here -->
    code tag: Displays code snippets.
    <code>
        #include<stdio.h>
            int main() {
            printf("Hello Geeks");
            }
            <!--code Tag ends here -->
    </code>
    <p>
        Click on the following link
        <!-- anchor tag starts -->
        <a href="https://www.geeksforgeeks.org">
            GeeksforGeeks
        </a>
        <!-- anchor tag ends -->
    </p>
</body>

</html>

Document Information

This section encompasses HTML tags that provide a comprehensive summary of the content within the HTML document. These tags offer a snapshot of what the document contains, enhancing the understanding of its structure and content.

Tags Description Syntax
<head> Container for metadata which is data about data. <head>…</head>
<link> Used to link external style sheets or documents. <link>
<meta>  Defines metadata about HTML document. <meta/>
<title> Defines the document’s title <title>…</title>
<style> Used to define style information (CSS) for a document. <style>…</style>
HTML 
<!DOCTYPE html>
<html>
<!-- head tag starts here -->

<head>
    <!-- title tag -->
    <title>Title goes here </title>

    <!-- link tag  -->
    <link rel="stylesheet" type="text/css" href="style.css">

    <!-- meta tag starts -->
    <meta name="keywords" content="Meta Tags, Metadata" />
    <!-- meta tag ends -->

    <!-- style tag starts here -->
    <style>
        #first {
            font-family: Castellar;
            background-color: green;
            color: white;
        }
        
        .second {
            text-align: center;
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
    <!-- style tag ends here -->
</head>
<!-- head tag ends here -->

<body>
    <p id="first">Hello GeeksforGeeks.</p>
    <p class="second">Welcome Geeks</p>
</body>

</html>

Elemento Semántico

Los Elementos Semánticos en HTML son elementos que describen claramente su significado en términos de contenido y función, tanto para el navegador como para el desarrollador.

Tags Descripción Sintaxis
<header> Se usa para dar contenido introductorio sobre el documento. <header>… </header>
<main> Representa el contenido principal dominante de un documento. <main>… </main>
<section> Elemento HTML estructural usado para agrupar elementos relacionados. <section>… </section>
<nav> Representa una sección de una página para proporcionar enlaces de navegación. <nav>…</nav>
<article> Representa una composición autónoma que es independientemente distribuible o reutilizable. <article>… </article>
<aside> Define algún contenido aparte del contenido en el que se coloca. <aside>… </aside>
<footer> Representa un pie de página para su elemento raíz de seccionamiento. <footer>… </footer>
<address> Proporciona información de contacto para una persona, personas o una organización. <address>…</address>
HTML 
<!DOCTYPE html>
<html>

<body>
    <h3>HTML Header Tag</h3>
    <hr>
    <article>
        <!-- header tag starts -->
        <header>
            <h3>GeeksforGeeks Learning</h3>
            <h3> HTML nav Tag</h3>
            <!-- nav tag starts -->
            <nav>
                <a href="#">Home</a> |
                <a href="#">Interview</a> |
                <a href="#">Languages</a> |
                <a href="#">Data Structure</a> |
                <a href="#">Algorithm</a>
            </nav>
            <!-- nav tag ends -->
        </header>
        <!-- header tag ends -->
    </article>
    <!-- main tag starts here -->
    <main>
        <!-- HTML section tag is used here -->
        <section>
            <h1>Geeksforgeek: Section 1</h1>
            <p>Content of section </p>
        </section>
        <!-- HTML section tag ends here -->
        <!-- aside tag starts here -->
        <aside>
            <h1>This is heading text in aside Tag</h1>
            <p>This is paragraph text in aside Tag</p>
        </aside>
        <!-- aside tag ends here -->
    </main>
    <!-- main tag ends here -->
    <!--HTML footer tag starts here-->
    <footer>
        <article>
            <!-- address tag starts from here -->
            <address>
                Organization Name: GeeksforGeeks <br>
                Web Site:
                <a href="https://www.geeksforgeeks.org/about/contact-us/">
                    GeeksforGeeks</a><br>
                visit us:<br>
                GeeksforGeeks<br>
                A-118, Sector 136, Noida, <br>
                Uttar Pradesh (201305)
            </address>
            <!-- address tag ends here -->
        </article>
        <br>
        <a href="https://www.geeksforgeeks.org/about/">
            About Us
        </a>|
        <a href="https://www.geeksforgeeks.org/privacy-policy/">
            Privacy Policy
        </a>|
        <a href="https://www.geeksforgeeks.org/careers/">
            Careers
        </a>
        <p>@geeksforgeeks, Some rights reserved</p>
    </footer>
    <!-- footer tag ends here -->
</body>

</html>

Formato de texto y semántica de texto en línea

Mensaje de texto etiquetas de formato en HTML, se utilizan para dar formato al texto de diferentes maneras, como poner el texto en negrita, cursiva o monoespaciado. El texto HTML en línea La semántica se utiliza para definir el significado, la estructura o el estilo de una palabra, línea, o cualquier fragmento arbitrario de texto.

Tags Description Syntax
<en> Se utiliza para poner énfasis en algún texto o mostrar algún grado de énfasis. <en>... </pulgada>
<strong> Indica que el contenido es de mayor importancia, generalmente, es marcado en negrita <strong>... </strong>
<sub> Convierte el texto a Subscript <sub>…</sub>
<sup> Convierte el texto a Superscript <sup>…</sup>
<abbr>  Representa una abreviacion o acronimo <abbr>… </abbr>
<mark> Highlights important text for reference or notation purposes. <mark>…</mark>
<cite> Describes the title of a creative work. <cite>…</cite>
<time> Used to represent a specific period of time. <time>…</time>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title> Geeks for Geeks </title>
</head>

<body>
    <!-- emphasis -->
    <div><em>Emphasized text</em></div>
    <!-- strong -->
    <div><strong>Important text!</strong></div>
    <!-- subscript -->
    <div>GFG<sub>subscript text</sub></div>
    <!-- superscript -->
    <div>GFG<sup>Superscript text</sup></div>
    <!-- abbreviation -->
    <div><abbr>Abbreviation</abbr></div>
    <!-- mark -->
    <div><mark>Highlighted text</mark></div>
    <!-- cite -->
    <div><cite>Title of creative work</cite></div>
    <!-- time -->
    <div>Time<time>9:00 am</time>
        to <time>7:00 pm</time>
    </div>
</body>

</html>

Lists

List tags in HTML, including <ul>, <ol>, and <li>, are used to create different types of lists. It can be either numerical, alphabetic, bullet, or other symbols. There are three list types in HTML:

  • Unordered list: Used to group a set of related items in no particular order.
  • Ordered list: Used to group a set of related items in a specific order.
  • Description list: Used to display name/value pairs such as terms and definitions.
Tags Description Syntax
<ul> Represents an unordered list of items list. <ul>…</ul>
<ol> The HTML <ol> element represents an ordered list of items. <ol>…</ol>
<li> Represents an item in a list. <li>…</li>
<dl> Represents a description list. <dl>…</dl>
<dd> Used to describe a term/name in a description list. <dd>…</dd>
<dt> Specifies a term in a description. <dt>…</dt>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>
</head>

<body>
    <h2>Welcome To GeeksforGeeks Learning</h2>
    <h5>Unordered List</h5>
    <!-- Unordered List -->
    <ul>
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
    </ul>
    <h5>Ordered List</h5>
    <!-- Ordered List -->
    <ol>
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
    </ol>
    <h5>Description List</h5>
    <!-- Description List -->
    <dl>
        <dt>Courses:</dt>
        <dd>100 </dd>
        <dt> Quizes:</dt>
        <dd> 500 </dd>
        <dt> Interview Experiences:</dt>
        <dd>1000 </dd>
    </dl>
</body>

</html>

Mesas

Table tags in HTML, such as <table>, <tr>, <td>, and <th>, are used to create and structure tables in HTML. They allow you to present data in rows and columns.

Etiquetas Descripción Sintaxis
<caption> Especifica el título de una tabla. <caption>…</caption>
<table> Representa datos en una tabla bidimensional. <table>…</table>
<thead> Se utiliza para proporcionar un encabezado al grupo de contenido en una tabla HTML. <thead>…</thead>
<tbody> Se utiliza para agrupar el contenido principal de una tabla HTML. <tbody>... </tbody>
<th> Define una celda como encabezado de un grupo de celdas de la tabla. <th>... </th>
<td> Define una celda de una tabla. <td>... </td>
<tr> Define una fila en una tabla HTML. <tr>... </tr>
<tfoot> Define un conjunto de filas que resumen las columnas de la tabla. <tfoot>... </tfoot> 
<!DOCTYPE html>
<html>

<head>
    <title>HTML Table</title>
</head>

<body>
    <!-- table starts here -->
    <table>
        <!-- Table Caption -->
        <caption>Geeks For Geeks Learning</caption>
        <!-- Table row starts -->
        <tr>
            <!--Headers -->
            <th>Programming Languages</th>
            <th>Development</th>
        </tr>
        <!-- Table row ends -->
        <tr>
            <!-- Table data -->
            <td>C programming </td>
            <td>Full stack development</td>
        </tr>
        <tr>
            <td>Java programming</td>
            <td>Backend development</td>
        </tr>
        <tr>
            <td>Angular </td>
            <td>Frontend Development</td>
        </tr>
        <!-- Table Footer starts here -->
        <tfoot>
            <tr>
                <td>Footer content</td>
            </tr>
        </tfoot>
        <!-- Table footer ends here -->
    </table>
</body>

</html>

Formularios de entrada

Un El formulario HTML es una sección de un documento que actúa como contenedor para diferentes tipos de elementos de entrada, como campos de texto, contraseñas, menús, casillas de verificación, botones de opción, botones de envío, etcétera.

Generalmente, las etiquetas de formulario en HTML, como <form>, <input>, <textarea>, y <button>, se utilizan para crear formularios para la entrada del usuario.

Tags Description Syntax
<form> Representa una sección que contiene controles para enviar información. <forma>... </formulario>
<input> Crea controles interactivos para que los formularios acepten datos. <entrada>... </entrada>
<textarea> Creación de un control de edición de texto sin formato de varias líneas. <textarea>... </textarea>
<select> Representa un control de lista de seleccion. <select>…</select>
<option> Define un elemento seleccionable o existente pero tachado, en una lista de seleccion <option>…</option>
<optgroup> Crea un grupo de opciones dentro de un elemento <select> <optgroup>.</optgroup>
<progress> Muestra un indicador que muestra el grado de completación de una tarea. <progress>…</progress>
<datalist> Usada para proporcionar opciones predeterminadas para un elemento <input> y añadir una función de autocomplecion al mismo. <datalist>…</datalist>
<button> Representa un boton presionable. <button>…</button>
<label> Especifica la etiqueta para un elemento <input>. <label>…</label>
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GfG</title>
</head>

<body>
    <form>
        <fieldset>
            <legend>Personal Details</legend>
            <p>
            <p>select used here:</p>
            <!-- label starts -->
            <label>
                Salutation
                <br />
                <!-- select starts -->
                <select name="salutation">
                    <option>--None--</option>
                    <option>Mr.</option>
                    <option>Ms.</option>
                    <option>Mrs.</option>
                </select>
                <!-- select ends -->
            </label>
            <!-- label ends -->
            </p>
            <p>
                <label>First name: 
                  <input name="firstName" placeholder="elemento de entrada usado aqui" />
                </label>
            </p>
            <p>
                <label>Last name: <input name="lastName" /></label>
            </p>
            <p>
                Gender :
                <label>
                  <input type="radio" name="gender" value="male" /> Male
                </label>
                <label>
                  <input type="radio" name="gender" value="female" /> Female
                </label>
            </p>
            <label Language preferred: </label>
                <input list="lang" placeholder="datalist used here">
                <!--datalist Tag starts here -->
                <datalist id="lang">
                    <option value="java"></option>
                    <option value="reactjs"></option>
                    <option value="php"></option>
                    <option value="python"></option>
                </datalist>
                <!--datalist Tag ends here -->
                <p>
                    <label>Email:
                       <input type="email" name="email" />
                    </label>
                </p>
                <p>
                    <label>Date of Birth:
                       <input type="date" name="birthDate"/>
                    </label>
                </p>
                <p>
                    <!-- HTML address tag -->
                    <label>
                        Address :
                        <br />
                        <!--Textarea  -->
                        <textarea name="address" 
                                  placeholder="Textarea used here">
                        </textarea>
                    </label>
                </p>
                <p>
                    <button type="submit">Submit</button>
                </p>
                <p>Progress tag used here:</p>
                Downloading progress for your profile:
                <!--HTML progress tag starts here-->
                <progress value="57" max="100" placeholder="progress tag used here">
                </progress>
                <!--HTML progress tag ends here-->
        </fieldset>
    </form>
</body>

</html>

Multimedia en HTML, como <img>, <audio>, y <video>, se utilizan para incrustar contenido multimedia como imágenes, archivos de audio y videos en su página web.

Etiquetas Descripción Sintaxis
<img> Se utiliza para enlazar imágenes a páginas web <img />
<audio> Se utiliza para incluir contenido sonoro en documentos <audio>... </audio>
<video> Incrusta un reproductor multimedia que admite archivos de vídeo en el documento <video>... </video>
<figure> Agrupa varios diagramas, imágenes, ilustraciones y fragmentos de código en el documento <figure>... </figure>
<figcaption> Se utiliza para proporcionar el título del contenido <figcaption>... </figcaption>
<embed> Incrusta multimedia en una página web <embed>... </embed>
<object> Incluye objetos, como imágenes, audio, vídeos y formato de documento portátil (PDF) en una página web. <object>... </object>
HTML 
<!DOCTYPE html>
<html>

<body style="text-align: center;">
    <p>image here</p>
    <!-- image tag starts here-->
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png" 
         width="420" height="100" alt="Geeksforgeeks.org">
    <!-- image tag ends here-->
    <p> Audio Sample</p>
    <!-- audio tag starts here -->
    <audio controls>
        <source src="test.mp3" type="audio/mp3">
        <source src="test.ogg" type="audio/ogg">
    </audio>
    <!-- audio tag ends here -->
    <p> Video sample</p>
    <!-- Video tag starts here -->
    <video width="400" height="350" controls>
        <source src="myvid.mp4" type="video/mp4">
        <source src="myvid.ogg" type="video/ogg">
    </video>
    <!-- Video tag ends here -->
    <p> HTML Figure here</p>
    <!--HTML figure tag starts here-->
    <figure>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" 
             width="304" height="228" alt="The Pulpit Rock">
        <figcaption>Figure Caption goes here </figcaption>
    </figure>
    <!--HTML figure tag ends here-->
    <p> HTML Object here</p>
    <!--HTML object tag starts here-->
    <object data=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
            width="550px" height="150px">
        GeeksforGeeks
        <!--HTML object tag ends here-->
    </object>
</body>

</html>

Caracteres y símbolos

Caracteres especiales y símbolos en HTML, como & para un & o < para un signo menor que, se utilizan para mostrar caracteres que tienen un signo especial significado en HTML. Algunos de los más utilizados son:

Simbolo Descripción Nombre de Entidad Código Numérico
© Derecho de autor &copy; &#169;
& &; &#38;
> Más grande que &gt; &#62;
< &lt; &#60;
$ Dólar &dollar; &#36;
“ Comillas &quot; &#34;
‘ Apostrofe &apos; &#39;
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Characters and Symbols</title>
</head>

<body>
    <!-- Characters and Symbols are use inside of p element -->
    <p>This is the sign of copyright: © </p>
    <p>This is the sign of trademark: ™ </p>
    <p>This is the sign of ampersand: @ </p>
    <p>This is the sign of dollar : $ </p>
    <p>This is the sign of less than : < </p>
            <p>This is the sign of greater than : > </p>
            <p>This is the sign of quotation mark : " </p>
</body>

</html>

Atributos

Atributos en HTML se utilizan para proporcionar información adicional sobre los elementos HTML. Siempre se especifican en la etiqueta de inicio y, por lo general, vienen en pares nombre/valor como name="valor". El nombre es la propiedad que desea establecer y el valor es el valor deseado del atributo.

Atributos Description Syntax
alt Le da una etiqueta a una imagen, de esta manera, incluso si la imagen no carga, se muestra una descripcion de la misma. Esto hace a la pagina mas accesible < tag_name alt ="..." >
href Se utiliza para definir un hipervínculo. < tag_name href ="..." >
src Especifica la dirección URL o fuente de la imagen que se va a utilizar. < tag_name src="..." >
width Especifica la anchura de la imagen en píxeles. < tag_name width ="..." >
height Especifica la altura de la imagen en píxeles < tag_name height ="..." >
style Permite cambiar el aspecto del documento de maneras arbitrarias < tag_name style ="..." >
id Identificador unico para identificar un area o elemento especifico de una la pagina < tag_name id =”…” >
class Especifica una o mas 'clases' para un elemento < tag_name class =”…” >
title Especifica informacìon extra sobre un elemento < tag_name title =”…” >
Placeholder Especifica una pequeña pista de cual es el contenido esperado en un area de texto u otro tipo de elemento de entrada <tag_name placeholder=” “>
HTML 
<!DOCTYPE html>
<html>

<head>
    <title>HTML Attributes</title>
    <style>
        #geeks {
            background-color: green;
            color: white;
        }
        
        .gfg {
            background-color: white;
            font-size: 30px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- source attribute-->
    <div>
        <p>source attribute:</p>
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png">
    </div>
    <!--Alternative text: alt attribute -->
    <div><img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads../Geek_logi_-low_res.png" 
          alt="Alternative text here">
    </div>
    <br>
    <!-- Link: href attribute-->
    <a href="https://ide.geeksforgeeks.org/">
        Click to open in the same tab
    </a>
    <br>
    <a href="https://ide.geeksforgeeks.org/" target="_blank">
        Click to open in a different tab
    </a>

    <!-- title attribute-->
    <h2 title="GeeksforGeeks: A computer science
    portal for geeks">
        Title attribute: hover to see the effect
    </h2>

    <!-- Width and Height attribute-->
    <p>Using width and height attribute here:</p>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png" 
         width="300px" height="100px">

    <!-- id attribute-->
    <h2 id="geeks">
        Styling using id attribute here
    </h2>

    <!-- class attribute -->
    <h2 class="gfg">
        Styling using class attribute here
    </h2>

    <!-- style -->
    <h2 style="font-family:Chaparral Pro Light; ">
        Styling using style attribute here
    </h2>

</body>

</html>

HTML es la base de las páginas web, se utiliza para la página web Desarrollo mediante la estructuración de sitios web y aplicaciones web. Puedes aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

¿Cuáles son algunos elementos de una sola linea comunes en HTML?

Los elementos en línea aparecen uno al lado del otro horizontalmente. Estos son algunos ejemplos:

  • <a> : Crea hipervínculos.
  • <img> : Incrusta imágenes.
  • <span> : Se utiliza para agrupar elementos o aplicar estilos.
  • <em> : Enfatiza el texto (generalmente en cursiva).
  • <strong> : Enfatiza el texto (generalmente en negrita).
  • <code> : Define el código fuente (normalmente monoespaciado).
  • <time> : Da formato a fechas y horas.
  • <q> : Representa citas en línea.
  • <br> : Inserta saltos de línea.
  • <wbr> : Sugiere un posible salto de línea.
  • Para crear un hipervínculo : <a href="URL">texto en el que se puede hacer clic</a>.
  • Para crear un enlace mailto : <a href="mailto:EMAIL_ADDRESS">texto en el que se puede hacer clic</a>.