Etiqueta <a>
Define el inicio y cierre de un texto que contiene un enlace a un hipervínculo, su propiedad principal es HREF que le permite definir la ruta a la que apunta. Especialmente útil para que los menús, botones u otros puedan ir a otra dirección web o a un bloque con determinado identificadorEjemplos:
<a href="#">Yo soy un anchor sin enlace</a>
<a href=https://inlearningcode.blogspot.com/>Yo soy un anchor con enlace</a>Etiqueta <p>
Define el inicio y cierre de un párrafo de texto. Antes de HTML5 tenían una propiedad llamada ALIGN que permitía definir la alineación del parrafo, en HTML5 ya no es soportada esa propiedad, reemplazándose por el uso de CSSEjemplos:
<p>Yo soy un párrafo...</p>Yo soy un párrafo:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Permiten definir encabezados en las páginas web, donde el tamaño y algunas características como el uso de negrita son sus principales propiedades, los h1 son más grandes que los h2 y así sucesivamente.Ejemplos:
<h1>Yo soy un h1</h1>
Yo soy un h1
<h3>Yo soy un h3</h3>
Yo soy un h3
<h5>Yo soy un h5</h5>
Yo soy un h5
Etiqueta <span>
Define el inicio y cierre de un texto que se puede encontrar dentro de otro texto, permite hacer diversas cosas como modificar características de parte de un texto de un párrafoEjemplos:
<p>Texto <span style="color:blue;">span</span> común y corriente</p>
Etiqueta <pre>
Define el inicio y cierre de un texto que mantiene saltos de línea y espacios, en las otras etiquetas de texto, solo se puede dar un salto de línea con la etiqueta </br>Ejemplos:
<pre>Yo soy un
texto que mantiene
los saltos de línea
y espacios</pre>
Yo soy un
texto que mantiene
los saltos de línea
y espacios
Etiqueta <code>
Define el inicio y cierre de un texto que contiene código de computadora, no es una etiqueta obsoleta, pero se puede obtener efectos visualmente más atractivos utilizando CSSEjemplos:
<code>Yo soy un pedazo de código</code>
Yo soy un pedazo de código
Etiqueta <div>
Define el inicio y cierre de una sección del documento HTML, extremadamente usado como contenedor de otras etiquetas y de mucho apoyo para diseño de páginas con Responsive Desing una vez que se emplea propiedades de CSS sobre estos contenedoresEjemplos:
<div style="width:200px; color: green; background-color:#dedede;">
Yo soy un contenedor DIV
</div>
Yo soy un contenedor DIV
Etiqueta <iframe>
Define el inicio y cierre de un bloque que contiene un elemento HTML como vídeo embebido, otra página web, plugins de redes sociales, etc. Mediante el uso de su propiedad SRCEjemplos:
<iframe src="https://inlearningcode.blogspot.com/"></iframe>Etiqueta <img>
Permite insertar una imagen en el documento HTML, mediante la propiedad SRCEjemplos:
<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"/>
Etiqueta <map>
Permite definir áreas de una imagen que al recibir un click realizarán acciones como cambiar la imágenEjemplos:
<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"
width="112" height="27"
usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="0,0,60,27" href="#zona1">
<area shape="rect" coords="60,0,112,27" href="#zon2">
</map>
Nota: observa la parte baja del navegador y dependiendo donde coloquemos el puntero sobre la imagen aparece una dirección u otra
Etiquetas <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>
Permite crear una tabla, pero debe ir acompañada de sus diversos elementos, tendresmos un encabezado de tabla, un cuerpo de la tabla y un pie de tabla: thead, tbody y tfoot, estas secciones de la tabla contienen filas y columnas, en HTML se declara primero las filas que son los tr, luego las columnas que los componen que pueden ser td o thEjemplos:
<table>
<thead>
<tr>
<th>Columna1</th>
<th>Columna2</th>
<th>Columna3</th>
<th>Columna4</th>
</tr>
</thead>
<tbody>
<td>Columna1</td>
<td>Columna2</td>
<td>Columna3</td>
<td>Columna4</td>
</tbody>
<tfoot>
<td>Columna1</td>
<td>Columna2</td>
<td>Columna3</td>
<td>Columna4</td>
</tfoot>
</table>
| Columna1 | Columna2 | Columna3 | Columna4 |
|---|---|---|---|
| Columna1 | Columna2 | Columna3 | Columna4 |
| Columna1 | Columna2 | Columna3 | Columna4 |
Etiquetas <form>, <fieldset>, <legend>, <input>, <button>, <select>, <option>, <textarea>, <label>
Son las etiqeutas para generar formularios que envían información mediante el método POST o GET, tenemos la etiqueta del formulario en sí : FORM, luego sus campos o FIELDSET y dentro de ellos colocamos los elementos como cajas de texto o botones.Ejemplos:
<form>
<fieldset>
<legend>Leyenda</legend><br/>
<label>Campo texto<label><br/>
<input type="text" value="caja de texto"/><br/><br/>
<label>Campo texto<label><br/>
<input type="text" placeholder="escribe texto aquí"/><br/><br/>
<button>Boton</button>
</fieldset>
</form>
Etiquetas <canvas>, <svg>, <circle>, <rect>, <polygon>, <lineargradient>, <ellipse>, <text>
Permiten realizar gráficos en el documento HTML, sin recurrir a imágenes externas. HTML5 provee de dos formas de realizar estos gráficos, la primera es mediante la etiqueta CANVAS que es un contenedor rectangular y donde se dibujan las formas aplicando código en JavaScript, y la segunda mediante SVG que actúa como un contenedor rectangular dentro del cual se colocan las diversas formas que uno deseaEjemplos:
Usando canvas
<canvas id="myCanvas"
width="200" height="100" style="border:1px solid black;">
</canvas>
Y su código JavaScript
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
Usando SVG
<svg width="200" height="100"
style="border:1px solid black;">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4"
fill="yellow" />
</svg>
Etiquetas <ul>, <li>, <ol>, <dl>, <dt>, <dd>
Estas etiquetas permiten crear listados ordenados, su potencial se ve incrementado al construir menús con CSS y la etiqueta <a>. Mientras UL hace listado sin orden, OL realiza listados ordenados.Ejemplos:
<ul>
<li>Hola</li>
<li>Chau</li>
</ul>
- Hola
- Chau
<ol>
<li>Hola</li>
<li>Chau</li>
</ol>
- Hola
- Chau
Etiquetas <header>, <footer>, <main>, <section>, <article>
Define contenedores similares al DIV con la diferencia que estos tienen ya usos estandarizado en el diseño HTML en general. Por ejemplo, el HEADER se usa para colocar el logo, y menú, el FOOTER para el pie de página donde se pone mapa del sitio u otros.Etiqueta <script>
Define el inicio y cierre de un bloque de código JavaScript que puede ejecutar diversas operaciones.Principales Etiquetas de bloque:
<address><article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Principales Etiquetas de línea:
<a><abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
