Hoja de trucos de HTML: una guía básica de HTML

Posted on by Rudeus Greyrat

¿Qué es HTML?

HTML (HyperText Markup Language) es el bloque de construcción más básico de todas las páginas web. Proporciona estructura al contenido que aparece en un sitio web, como imágenes, texto o videos, al crear un esqueleto básico. HTML sigue siendo muy útil hoy en día, ya que no importa el marco o el lenguaje que usemos para desarrollar la página web, la salida se representará en HTML.

HTML Cheat Sheet

Hoja de trucos HTML

¿Qué es la hoja de trucos HTML?

Los desarrolladores web que comienzan a veces necesitan una lista de referencia simple y rápida de etiquetas, códigos y atributos básicos de HTML, ahí es cuando HTML Cheat Sheet entra en escena. El objetivo de la hoja de trucos es proporcionarle algunos fragmentos de código rápidos y precisos, listos para usar, y las etiquetas y atributos HTML necesarios para ayudarlo con su página web.

Tabla de contenidos:

Raíz principal: el elemento <html> representa la raíz (elemento de nivel superior) de un documento HTML, también llamado elemento de documento, ya que define todo el documento HTML. Tiene una etiqueta de inicio <html> y una etiqueta de finalización </html> Todos los demás elementos deben ser descendientes de este elemento.

<html> … </html>

repetitivo:

HTML

<!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>

Raíz de seccionamiento:

Cuerpo: El elemento HTML <body> representa el contenido de un documento HTML. Solo puede haber un elemento <body> en un documento.

Encabezados: Hay seis encabezados disponibles en HTML.

Etiquetas de encabezado Descripción Sintaxis
<h1> Este es el encabezado más grande entre todos. <h1>….</h1>
<h2> Este es el segundo encabezado más grande entre todos. <h2>….</h2>
<h3> Este es el tercer encabezado más grande entre todos. <h3>….</h3>
<h4> Este es el cuarto encabezado más grande entre todos. <h4>….</h4>
<h5> Este es el segundo encabezado más pequeño de todos. <h5>….</h5>
<h6> Este es el más pequeño de todos. <h6>….</h6>

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Heading Tags</title>
   </head>
   <body>
      <h1>GeeksforGeeks</h1>
      <h2>GeeksforGeeks</h2>
      <h3>GeeksforGeeks</h3>
      <h4>GeeksforGeeks</h4>
      <h5>GeeksforGeeks</h5>
      <h6>GeeksforGeeks</h6>
   </body>
</html>

Contenedor: Las etiquetas de contenedor son etiquetas que tienen algunos datos como texto, la imagen entre sus etiquetas de apertura y cierre. Hay varias etiquetas de contenedor en HTML.

Etiquetas Descripción Sintaxis
<div> La etiqueta <div> es un elemento de bloque. Define una división o una sección en un documento HTML. Cualquier tipo de contenido se puede colocar dentro de la etiqueta <div>. <div>… </div>
<lapso> La etiqueta <span> es un elemento en línea. Se utiliza para marcar una parte de un texto, o una parte de un documento. <span>…</span>
<p> La etiqueta <p> representa un párrafo. Los párrafos HTML pueden ser cualquier agrupación estructural de contenido relacionado, como imágenes o campos de formulario. <p>…</p>
<antes> La etiqueta <pre> representa texto preformateado que debe presentarse exactamente como está escrito en el archivo HTML. . Conserva los espacios de texto, los saltos de línea, las tabulaciones y otros caracteres de formato que los navegadores web ignoran. <pre>…</pre>
<código> La etiqueta <code> se utiliza para representar códigos fuente. Se utiliza principalmente para mostrar el fragmento de código en el navegador web. <código>…</código>

HTML

<!DOCTYPE html>
<html>
<head>
   <!-- Title tag -->
   <title> GeeksforGeeks </title>
   <!-- meta tag starts -->
   <meta name="keywords" 
         content="Meta Tags, Metadata" />
   <meta name="description"
         content="Geeksforgeeks is a computer science portal." />
   <!-- meta tag ends -->
   <!-- html style tag starts -->
   <style type="text/css">
      body {
      background-color: powderblue;
      }
      h1 {
      color: black;
      font-family: arial;
      }
   </style>
   <!-- html style tag ends -->
</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 -->
      <!-- html pre tag starts here -->
      <pre>
        This
        is    a pre tag.
      </pre>
   </p>
   <!-- html pre tag ends here -->
   <pre>
         <!--code Tag starts here -->
         code tag: Displays code snippets.
         <code>
         #include<stdio.h>
         int main() {
             printf("Hello Geeks");
         }
         <!--code Tag starts here -->
         </code>
   </pre>
   <p>
      Click on the following link
      <!-- link tag starts -->
      <a href="https://www.geeksforgeeks.org">
       GeeksforGeeks
      </a>
      <!-- link tag ends -->
   </p>
</body>
</html>

Información del documento: esta sección involucra etiquetas que se utilizan para describir el documento HTML al brindar una descripción general de lo que incluye.

Etiquetas Descripción Sintaxis
<cabeza> El elemento <head> es un contenedor de metadatos que son datos sobre datos. Es la primera sección del código que contiene información sobre las propiedades de una página web y enlaces a archivos externos relacionados. <cabeza>…</cabeza>
<enlace> La etiqueta <link> es un elemento vacío, define la relación entre el documento actual y un recurso externo. La etiqueta <link> se usa con mayor frecuencia para vincular a hojas de estilo externas en su sitio web. <enlace>
<meta> La etiqueta <meta> define metadatos sobre un documento HTML. Por lo general, se usa para especificar el juego de caracteres, la descripción de la página, las palabras clave, el autor del documento y la configuración de la ventana gráfica. </meta>
<título> El elemento HTML <title> define el título del documento que se muestra en la barra de título del navegador o en la pestaña de una página. <título>…</título>
<estilo> La etiqueta <style> se utiliza para definir la información de estilo (CSS) de un documento. Se utiliza para especificar cómo deben mostrarse los elementos HTML en un navegador. <estilo>…</estilo>

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>

Contenido de sección: los elementos de contenido de sección definen de forma predeterminada el punto de referencia de ARIA. Estos elementos son en su mayoría descendientes del elemento de cuerpo HTML.

Etiquetas Descripción Sintaxis
<encabezado> El elemento HTML5 <header> se utiliza para proporcionar contenido introductorio sobre el documento. Puede contener algunos elementos de encabezado y también un logotipo, un formulario de búsqueda, un nombre de autor y otros elementos. <encabezado>… </encabezado>
<principal> El elemento HTML <main> representa el contenido dominante principal del <body> de un documento. El área de contenido principal consta de contenido que amplía el tema central de un documento o la funcionalidad principal de una aplicación. <principal>… </principal>
<sección> El elemento HTML5 <section> representa una sección independiente. Es un elemento HTML estructural que se utiliza para agrupar elementos relacionados. Cada <sección> normalmente incluye uno o más elementos de encabezado y elementos adicionales que presentan contenido relacionado. <sección>… </sección>
<navegación> El elemento HTML <nav> representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o hacia otros documentos. <navegación>…</navegación>
<artículo> El elemento HTML5 <article> representa una composición independiente en un documento, página, aplicación o sitio, que se puede distribuir o reutilizar de forma independiente. <artículo>… </artículo>
<aparte> La etiqueta <aside> define algún contenido además del contenido en el que se coloca. Su contenido debe estar relacionado indirectamente con el contenido que lo rodea. El contenido <aside> se suele colocar como una barra lateral en un documento. <aparte>… </aparte>
<pie de página> El elemento HTML <footer> representa un pie de página para su elemento raíz de sección. Por lo general, contiene información sobre el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados. <pie de página>… </pie de página>
<dirección> El elemento HTML <dirección> indica que el HTML adjunto proporciona información de contacto para una persona o personas, o para una organización. No debe contener información distinta a la información de contacto. <dirección>..</dirección>

HTML

<!DOCTYPE html>
<html>
<body>
   <!-- main tag starts here -->
   <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>
      <!-- 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: el formato de texto se usa en HTML para que el documento se vea más completo y atractivo. La semántica de texto en línea HTML se utiliza para definir el significado, la estructura o el estilo de una palabra, línea o cualquier fragmento de texto arbitrario.

Etiquetas Descripción Sintaxis
<b> La etiqueta <b> se usa para poner en negrita el texto encerrado dentro de estas etiquetas. <b>…</b>
<yo> La etiqueta <i> se utiliza para poner en cursiva el texto de estilo incluido dentro de estas etiquetas. <i>…</i>
<em> La etiqueta <em> se usa para enfatizar algún texto o mostrar cierto grado de énfasis. El elemento <em> también se puede anidar, donde cada nivel de anidamiento indica un mayor grado de énfasis. <em>…</em>
<fuerte> La etiqueta <strong> se utiliza para indicar que el contenido incluido en estas etiquetas tiene una gran importancia o urgencia. Por lo general, los navegadores muestran su contenido en negrita. <fuerte>…</fuerte>
<sub> La etiqueta <sub> se usa cuando necesitamos escribir el texto como subíndice. <sub>…</sub>
<sup> La etiqueta <sup> se usa cuando necesitamos escribir el texto como superíndice. <sup>…</sup>
<abr> El elemento <abbr> se utiliza para representar una abreviatura o un acrónimo. El atributo de título opcional se puede utilizar para agregar una descripción de la abreviatura. <abbr>…</abbr>
<marcar> La etiqueta <mark> se usa para marcar o resaltar texto importante para fines de referencia o notación. <marca>…</marca>
<citar> El elemento <cite> se usa para describir el título de un trabajo creativo (por ejemplo, un libro, un artículo, un ensayo, un poema, una canción, una pintura, etc.) <citar>…</citar>
<tiempo> El elemento <time> se utiliza para representar un período de tiempo específico. <tiempo>…</tiempo>

HTML

<!DOCTYPE html>
<html>
<head>
   <title> Geeks for Geeks </title>
</head>
<body>
   <!-- bold -->
   <div><b>Bold text</b></div>
   <!--italics  -->
   <div><i>Italics text</i></div>
   <!-- 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>

Listas: las listas pueden ser numéricas, alfabéticas, de viñetas u otros símbolos. Puede especificar el tipo de lista y los elementos de la lista en HTML para el documento limpio. Hay tres tipos de lista en HTML:

  • Lista desordenada: se utiliza para agrupar un conjunto de elementos relacionados sin ningún orden en particular.
  • Lista ordenada: se utiliza para agrupar un conjunto de elementos relacionados en un orden específico.
  • Lista de descripción: se utiliza para mostrar pares de nombre/valor, como términos y definiciones.
Etiquetas Descripción Sintaxis
<ul> El elemento HTML <ul> representa una lista desordenada de elementos. Por lo general, se representa como una
lista con viñetas.		 <ul>…</ul>
<ol> El elemento HTML <ol> representa una lista ordenada de elementos. Por lo general, se representa como una
lista numerada.		 <ol></ol>
<li> El elemento HTML <li> se utiliza para representar un elemento en una lista. <li>…</li>
<dl> El elemento HTML <dl> representa una lista de descripción. El elemento incluye una lista de grupos de
términos (especificados mediante el elemento <dt>) y descripciones.		 <dl>…</dl>
<dd> La etiqueta HTML <dd> se usa junto con <dl> para describir un término/nombre en una lista de descripción. <dd>…</dd>
<dt> El elemento HTML <dt> se usa junto con <dl> para especificar un término en una descripción o lista de definiciones. <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>
      <li>Programming Languages</li>
   </ul>
   <h5>Ordered List</h5>
   <!-- Ordered List -->
   <ol>
      <li>Array</li>
      <li>Linked List</li>
      <li>Stacks</li>
      <li>Queues</li>
      <li>Trees</li>
      <li>Graphs</li>
   </ol>
   <h5> </h5>
   <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: una tabla HTML se utiliza para organizar datos en forma tabular en filas y columnas.

Etiquetas Descripción Sintaxis
<título> El elemento Título de tabla HTML especifica el título o título de una tabla. <título>…</título>
<tabla> El elemento HTML <table> representa datos en una tabla bidimensional compuesta de filas y columnas. <tabla>…</tabla>
<cabeza> El elemento HTML <thead> se usa para agrupar el contenido del encabezado en una tabla HTML. (usado junto con el elemento <tbody> y <tfoot>) <thead>…</thead>
<tbody> El elemento HTML <tbody> se utiliza para agrupar el contenido principal de una tabla HTML. <tcuerpo>…</tcuerpo>
<th> El elemento HTML <th> se utiliza para definir una celda como encabezado de un grupo de celdas de la tabla HTML. <th>…</th>
<td> El elemento HTML <td> define una celda de una tabla que contiene los datos principales de la tabla. <td>…</td>
<tr> La etiqueta HTML <tr> define una fila en una tabla HTML. Un elemento <tr> contiene uno o más elementos <th> o <td> <tr>…</tr>
<pie> El elemento HTML <tfoot> define un conjunto de filas que resumen las columnas de la tabla según el requisito. <tfoot>…</tfoot>

HTML

<!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>
         <th>Placement and Test series</th>
      </tr>
      <!-- Table row ends -->
      <tr>
         <!-- Table data -->
         <td>C programming </td>
         <td>Full stack development</td>
         <td>Google SDE preparation </td>
      </tr>
      <tr>
         <td>Java programming</td>
         <td>Backend development</td>
         <td>Flipkart SDE preparation</td>
      </tr>
      <tr>
         <td>Angular </td>
         <td>Frontend Development</td>
         <td>Amazon SDE preparation</td>
      </tr>
      <!-- Table Footer starts here -->
      <tfoot>
         <tr>
            <td>Footer content</td>
         </tr>
      </tfoot>
      <!-- Table footer ends here -->
   </table>
</body>
</html>

Formularios: un 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 radio, botones de envío, etc.

Etiquetas Descripción Sintaxis
<formulario> El elemento HTML <form> representa una sección de documento que contiene controles interactivos para enviar información. <formulario>…</formulario>
<entrada> El elemento HTML <input> se usa para crear controles interactivos para formularios basados ​​en web para aceptar datos del usuario. <entrada>…</entrada>
<área de texto> El elemento HTML <textarea> se utiliza para crear un control de edición de texto sin formato de varias líneas, a menudo utilizado en un formulario, para recopilar entradas de usuario como comentarios o reseñas. <área de texto>…</área de texto>
<seleccionar> El elemento HTML <select> representa un control que proporciona un menú de opciones para seleccionar. <seleccionar>…</seleccionar>
<opción> La etiqueta <option> se utiliza para definir una opción en una lista de selección. Los elementos <option> van dentro de los elementos <select>, <optgroup> o <datalist>. <opción>…</opción>
<grupo de opciones> El elemento HTML <optgroup> se utiliza para crear una agrupación de opciones dentro de un elemento <select>. <grupo de opciones>.</grupo de opciones>
<progreso> El elemento HTML <progress> muestra un indicador que muestra el grado de finalización de una tarea, que normalmente se muestra en forma de barra de progreso. <progreso>…</progreso>
<lista de datos> El elemento HTML <datalist> se utiliza para dar opciones predefinidas para un elemento <input>. Le agrega una función de autocompletar. <lista de datos>…</lista de datos>
<botón> El elemento HTML <button> representa un botón en el que se puede hacer clic, que se puede usar en formularios o
en cualquier lugar donde se necesite una funcionalidad de botón estándar en un documento.		 <botón>…</botón>
<etiqueta> La etiqueta <label> se usa para especificar una etiqueta o título para un elemento <input> de un formulario. <etiqueta>…</etiqueta>

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>
               <option>Dr.</option>
               <option>Prof.</option>
            </select>
            <!-- select ends -->
         </label>
         <!-- label ends -->
         </p>
         <p>
            <label>First name: <input name="firstName" 
               placeholder="input element used here" /></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: Multimedia es todo lo que puede escuchar o ver en forma de imágenes, videos o sonidos. Viene en varios formatos. HTML lo ayuda a agregar archivos multimedia a su sitio web al proporcionar varias etiquetas multimedia.

Etiquetas Descripción Sintaxis
<img> La etiqueta HTML <img> se utiliza para vincular imágenes a páginas web. <img />
<audio> El elemento HTML <audio> se utiliza para incluir contenido de sonido en los documentos. Puede contener una o más fuentes de audio. <audio>…</audio>
<vídeo> El elemento HTML <video> incorpora un reproductor multimedia que admite archivos de video en
el documento.		 <vídeo>…</vídeo>
<figura> La etiqueta HTML <figure> se usa para agrupar varios diagramas, imágenes, ilustraciones y fragmentos de código en el documento. <figura>…</figura>
<figcaption> La etiqueta HTML <figcaption> se usa dentro de la etiqueta <figure> para proporcionar el título del contenido. <figcaption>…</figcaption>
<incrustar> La etiqueta HTML<embed> ayuda a incrustar multimedia en una página web y reproducirla mientras se abre la página. Utiliza los tres atributos obligatorios, a saber, src, alto y ancho. <incrustar>…</incrustar>
<objeto> La etiqueta HTML <objeto> se usa para incluir objetos, como imágenes, audios, videos, applets de Java, controles ActiveX, formato de documento portátil (PDF) y objetos Flash, en una página web. <objeto>…</objeto>

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: algunos caracteres están reservados en HTML y tienen un significado especial cuando se usan en documentos HTML. HTML proporciona una amplia gama de caracteres y símbolos que incluyen flechas, moneda, letras, matemáticas, puntuación y símbolos. Algunos de los más utilizados son:

Símbolo Descripción Nombre de la entidad Código de número
© Derechos de autor &Copiar; ©
& Y comercial &erio; &
> Mas grande que > >
< Menos que < <
ps Dólar &dólar; $
“ comillas « «
‘ Apóstrofe ‘ ‘

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: los atributos HTML son palabras especiales que se utilizan para definir las características de un elemento HTML. Estos son modificadores de elementos HTML colocados dentro de la etiqueta de apertura del elemento. Los atributos tienen dos partes: el nombre y el valor. El nombre es la propiedad que desea establecer y el valor es el valor deseado del atributo.

Atributos Descripción Sintaxis
alternativa El atributo alt se usa con la etiqueta de imagen. Nos ayuda a especificar el texto alternativo en caso de que la imagen no se pueda mostrar en el sitio web para dar a los usuarios una idea de lo que contiene la imagen. < nombre_de_la_etiqueta =”…” >
href Usamos la etiqueta <a> para definir un hipervínculo. En esta etiqueta, el atributo href especifica la URL de la dirección de destino. Sin el atributo href, el elemento <a> no se convertirá en hipervínculo. < nombre_de_la_etiqueta =”…” >
origen El atributo HTML src se utiliza para especificar la URL de la imagen que se utilizará como botón de envío. Especifica la ruta de la imagen entre comillas dobles. < nombre_de_la_etiqueta =”…” >
ancho La etiqueta también contiene el atributo ancho. Como sugiere el nombre, estos atributos especifican el ancho de la imagen en píxeles). < nombre_de_la_etiqueta =”…” >
altura La etiqueta también contiene el atributo de altura. Como sugiere el nombre, estos atributos especifican la altura de la imagen en píxeles). < nombre_de_la_etiqueta =”…” >
estilo El atributo de estilo nos ayuda a cambiar la apariencia del documento al configurar el estilo, como la fuente, el tamaño, el color, etc. del elemento HTML. < nombre_de_la_etiqueta =”…” >
identificación El atributo id es un identificador único que se utiliza para especificar un área de una página web. Es utilizado por CSS y JavaScript para realizar una determinada tarea para un elemento único. En CSS, el atributo id se usa usando el símbolo # seguido de id. < nombre_de_la_etiqueta =”…” >
clase El atributo de clase se utiliza para especificar uno o más nombres de clase para un elemento y asignar diferentes propiedades dentro de un bloque que, a su vez, se pueden asignar a cualquier elemento. Una vez asignada una clase específica, los elementos tendrán todas las propiedades de esa clase en particular. < nombre_de_la_etiqueta =”…” >
título El atributo de título especifica información adicional sobre un elemento. El texto del atributo de título suele mostrarse como información sobre herramientas cuando el mouse se desplaza sobre el elemento en la mayoría de los navegadores. < nombre_de_la_etiqueta =”…” >
Marcador de posición El atributo de marcador de posición especifica una sugerencia breve que describe el valor esperado de un campo de entrada/área de texto. La sugerencia breve se muestra en el campo antes de que el usuario ingrese un valor. <etiqueta_nombre marcador de posición=” “>

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 el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

También tenemos una hoja de trucos similar para ayudarlo con los conceptos de CSS. Échale un vistazo aquí Hoja de trucos de CSS

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *