Etiquetas más utilizadas en HTML

Posted on by Rudeus Greyrat

HTML contiene muchas etiquetas predefinidas. Algunas de ellas se describen a continuación:
 

Etiqueta de estructura del documento: 

  • Etiqueta HTML : Es la raíz del documento HTML que se utiliza para especificar que el documento es HTML.

Sintaxis: 

<html> Statements... </html>

Código: 

html

<html>
    <head>
        <title>Title of your web page</title>
    </head>
    <body>HTML web page contents </body>
</html>

Producción :

 

  • Etiqueta de encabezado: la etiqueta de encabezado se utiliza para contener todos los elementos de encabezado en el archivo HTML. Contiene la etiqueta de título, estilo, meta, etc.

Sintaxis:  

<head> Statements... </head>

Código:  

html

<head>Contains elements describing the document</head>

Producción :

 

  • Etiqueta de cuerpo: se utiliza para definir el cuerpo de un documento HTML. Contiene imágenes, tablas, listas,… etc.

Sintaxis:  

<body> Statements... </body>

Código: 

html

<body>The content of your HTML page</body>

Producción :

 

  • Etiqueta de título: se utiliza para definir el título de un documento HTML.

Sintaxis: 

<title> Statements... </title>

Código: 

html

<title>tab name</title>

Producción :

 

Etiqueta de contenedor de contenido: 

Etiqueta de encabezado: se utiliza para definir el encabezado de un documento HTML.
 

Sintaxis: 

<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>

Código: 

html

<h1>Heading 1 </h1> 
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>

Producción : 

 

  • Etiqueta de párrafo: se utiliza para definir el contenido de un párrafo en un documento HTML.

Sintaxis: 

<p> Statements... </p>

Código: 

html

<p>GeeksforGeeks: Computer science portal</p>

Producción : 

 

  • Etiqueta de énfasis: se utiliza para representar como texto enfatizado.

Sintaxis: 

<em> Statements... </em>

Código: 

html

<em>GeeksforGeeks</em>

Producción :

 

  • Etiqueta en negrita: se utiliza para especificar contenido en negrita en un documento HTML.

Sintaxis: 

<b> Statements... </b>

Código: 

html

<b>Bold word</b>

Producción :

 

  • Etiqueta cursiva: Se utiliza para escribir el contenido en formato cursiva.

Sintaxis: 

<i> Statements... </i>

Código: 
 

html

<i>GeeksforGeeks</i>

Producción :

 

  • Etiqueta pequeña (de texto): se utiliza para establecer el tamaño de fuente pequeño del contenido.

Sintaxis: 

<small> Statements... </small>

Código: 

html

<small>Example</small>

Producción :

 

  • Etiqueta de subrayado: se utiliza para establecer el subrayado del contenido.

Sintaxis: 

<u> Statements... </u>

Código: 

html

<u>GeeksforGeeks</u>

Producción :

 

  • Etiqueta de texto eliminado: se utiliza para representar texto eliminado. Cruza el contenido del texto.

Sintaxis: 

<strike> Statements... </strike>

Código: 

html

<strike>geeksforgeeks</strike>GeeksforGeeks

Producción :

 

  • Etiqueta de anclaje: se utiliza para vincular una página a otra página.

Sintaxis: 

<a href="..."> Statements... </a>

Código: 

html

Visit <a href="https://www.geeksforgeeks.org/">
GeeksforGeeks</a> for better experience.

Producción :

 

  • Etiqueta de lista: se utiliza para enumerar el contenido.

Sintaxis: 

<li> Statements... </li>

Código: 

html

<li>List item 1</li>
<li>List item 2</li>

Producción :

 

  • Etiqueta de lista ordenada: se utiliza para enumerar el contenido en un orden particular.

Sintaxis: 

<ol> Statements... </ol>

Código: 

html

<ol>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ol>

Producción :

 

  • Etiqueta de lista desordenada: se utiliza para enumerar el contenido sin orden.

Sintaxis: 

<ul> Statements... </ul>

Código: 

html

<ul>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ul>

Producción :

 

  • Etiqueta de comentario: se utiliza para establecer el comentario en un documento HTML. No es visible en el navegador.

Sintaxis: 

<!-- Statements... -->

Código:  

html

<!--Comment section-->
  • Etiqueta de texto desplazable: se utiliza para desplazar el texto o el contenido de la imagen.

Sintaxis: 

<marquee> Statements... </marquee>

Código: 

html

<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">
Example Marquee</marquee>

Producción :

 

  • Etiqueta central: se utiliza para establecer el contenido en el centro.

Sintaxis: 

<center> Statements... </center>

Código: 

html

<center>GeeksforGeeks</center>

Producción :

 

  • Etiqueta de fuente: se utiliza para especificar el tamaño de fuente, el color de fuente y la familia de fuentes en un documento HTML.

Sintaxis: 

<font> Statements ... </font>

Código: 

html

<font face="Times New Roman">Example</font>

Producción :

 

Etiquetas vacías (sin contenedor): 
 

  • Etiqueta de salto de línea: Se utiliza para romper la línea.

Sintaxis: 

<br>

Código: 

html

GeeksforGeeks<br>A computer science portal

Producción :

 

  • Etiqueta de imagen: se utiliza para agregar elementos de imagen en documentos HTML.
     

Sintaxis: 

<img>

Código: 

html

<img src="gfg.PNG" alt="GeeksforGeeks Image">

Producción :

 

  • Etiqueta de enlace: Se utiliza para enlazar el contenido de una fuente externa.

Sintaxis: 

<link>

Código:  

html

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
  • Etiqueta de regla horizontal: se utiliza para mostrar la línea horizontal en un documento HTML.

Sintaxis: 

<hr/>
  • Código: 
     

html

<hr width="100%" size="5" />

Producción :

 

  • Metaetiqueta: Se utiliza para especificar la descripción de la página. Por ejemplo, último modificador, autores, … etc.

Sintaxis: 

<meta> Statements ... <meta>

Código: 

html

<meta name="Description"
    content="Description of your site">
<meta name="keywords"
    content="keywords describing your site">
  • Etiqueta de tabla: una etiqueta de tabla se utiliza para crear una tabla en un documento HTML. 

Sintaxis: 

<table> Statements... </table>

Código: 

html

<table border="4" cellpadding="2" cellspacing="2" width="50%">
<tr> <td>Column 1</td>
<td>Column 2</td> </tr> </table>

Producción :

 

  • Tr tag: Se utiliza para definir una fila de una tabla HTML.

Sintaxis: 

<tr> Statements... </tr>

Código: 

html

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Producción :

 

  • Th tag: Define la celda de cabecera en una tabla. De forma predeterminada, establece el contenido con la propiedad de negrita y centro.

Sintaxis:

<th> Statements ... </th>

Código: 

html

<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

Producción :

 

  • Etiqueta Td: Define la celda estándar en un documento HTML.

Sintaxis: 

<td> Statements ... </td>

Código: 

html

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Producción :

 

Etiquetas de entrada: 
 

  • Etiqueta de formulario: se utiliza para crear un formulario HTML para el usuario.

Sintaxis: 

<form> Statements ... </form>

Código: 

html

<form action="mailto:you@yourdomain.com ">
  Name: <input name="Name" value="" size="80"><br>
  Email: <input name="Email" value="" size="80"><br>
  <br><center><input type="submit"></center>
</form>

Producción :

 

  • Enviar etiqueta de entrada: se utiliza para tomar la entrada del usuario.

Sintaxis: 

<input>

Código: 

html

<form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff;
 font-family: Verdana; font-weight: bold;
 fontsize: 12px; background-color: #72a4d2;"
 size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Producción :

 

  • Etiqueta de opción desplegable: se utiliza para seleccionar una opción de una lista desplegable.

Sintaxis: 

<option> Statements ... </option>

Código: 

html

<form method=post action="/cgibin/example.cgi">
<center> Select an option:<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</form>

Producción :

 

  • Etiqueta de botón de radio: se utiliza para seleccionar solo una opción de las opciones dadas.

Sintaxis: 

<input>

Código: 

html

<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3

Producción :

 

Navegadores compatibles:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

HTML es la base de las páginas web y 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 .

Publicación traducida automáticamente

Artículo escrito por Sabya_Samadder 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 *