HTML Block Elements (Español)

HTML Block Elements, estos son todos los elementos que son considerados bloques los cuales tienen cierta características. La caracteristica mas importante es que estos toman todo el ancho que pueden(full width)

En este post tomaremos como block element a los elementos con display: ‘block’

<address>

<address> define las formas de contacto con el autor o autores que crearon la pagina generalmente se utiliza en el <footer> o al final de <main>

<article>

<article> define un elemento en un documento HTML, el cual es hecho con la intención de ser distribuible o reusable

<aside>

<aside> define contendió que esta relacionado con el contenido de esta, esta puede ofrecer otro contenido por ejemplo en nuestro blog la barra lateral ofrece los últimos 4 artículos si los deseas leer.

<blockquote>

<blockquote> Crea un bloque que sera una cita sobre otra pagina o lugar de donde se tomo la información

<canvas>

<canvas> es un elemento de HTML que se utiliza para dibujar gráficos en la página web mediante el uso de JavaScript

<div>

<div> el div element es un elemento en bloque que podemos utilizar para dar estilo, antes de HTML5 este elemento se utilizaba para representar varias partes de una pagina web así pues si ves que una pagina web lo utiliza demasiado no la critiques.

Sirve para crear secciones o agrupar contenidos

<dl>

<dl> Representara una lista descriptiva en HTML5

<dt>

<dt> sera el elemento que definirá el termino

<dd>

<dd> es el elemento dentro de una lista descriptiva que describirá el termino

<ol>

<ol> define una lista ordenada

<fieldset>

<fieldset> define un grupo de campos en un formulario

<figure>

<figure> este elemento nos permite agrupar tato una imagen como su leyenda, por tanto <img> y <figcaption> serán elementos hijos.

La etiqueta <figure> se utiliza para representar cualquier contenido que se considera independiente del flujo principal del documento, como una imagen, un diagrama, una tabla, un fragmento de código, etc

<figcaption>

<figcaption> hace una leyenda para una figura, este elemento es un elemento hijo de <figure>

<footer>

<footer> indicara el pie de pagina de una pagina web, en general todo sitio web tiene el mismo pie de pagina. En esta etiqueta se tiende a dar información sobre la pagina como puede ser las distintas redes sociales en algunos casos, lugar donde contactar dirección, tel, etc, terminos y condiciones,copyright, etc.

<footer>
Los elementos del footer deben ir aqui.
</footer>

<form>

<form> y </form> nos indicara el inicio y el final de un formulario. Dentro de un formulario puede usar una larga cantidad de etiquetas como pueden ser textarea, inputs, label, butttons, etc.

<h1>-<h6>

Desde <h1> a <h6> indicaran títulos en un documento HTML, por ejemplo con H1 definirá el titulo principal de la pagina. Solo debe haber un H1 por pagina. de los demás puede haber la cantidad que desee.

Tenga en cuenta de hacer los títulos escalonados h1,h2,h3,h4 etc.

<h1>
Este es el titulo principal
<h1>

<header>

<header> define el encabezado de la pagina, en general es donde esta nuestro logo, login, logout algunas veces también tenemos categorías y el search de nuestra pagina.

<hr>

<hr> define una linea separadora

<main>

<main> es la etiqueta donde deberas presentar el main content en HMTL5

<nav>

<nav> cumple con la funcion de agrupar enlaces de navegacion

<noscript>

<noscript> en caso de no poder ejecutar scripts

<p>

Definirá un párrafo, todo lo que este entre las etiquetas <p> y </p> sera un párrafo

<pre>

Definira una sección preformateada

<section>

<section> define una sección en una pagina, esta sera una sección en nuestro texto la cual sera conformada por un titulo, párrafo y elementos como pueden ser imágenes y separadores perteneciente a estas incluso otras secciones con sus respectivos titulos y parrafos. etc.

<H1>Mi titulo principal</H1>
<section>
  <h2>Titulo 2</h2>
  <p>Parrafo del segundo titulo</p>
  <section>
     <h3>Titulo de la subseccion</h3>
     <p>parrafo de la subseccion</p>
  </section>
</section>

<table>

<table> representara una tabla o definira una tabla en nuestro documento HTML

<video>

<video> definirá una zona para el video

Referencia: https://www.w3.org/wiki/Category:HTML