Elementos en bloque

Los elementos de bloque van a ocupar todo el ancho disponible aunque su contenido no lo haga, por lo que los elementos que se pongan a continuación saltarán a la siguiente línea.

Elementos de bloque principales:

Títulos <h1> hasta <h6>

Párrafos <p>

<Header>:

Contenedor para la cabecera visual de la página.

<Main>:

Contenedor para englobar el contenido principal de la página.

<Section>:

Contenedor genérico que agrupa contenido que está relacionado.

<Article>:

Contenedor que respresenta contenido independiente.

<Aside>:

Agrupación de contenido indirectamente relacionado pero que no forma parte del contenido principal.

<Address>:

Se utiliza para aportar información de contacto para el article más cercano o para todo el body.

<Footer>:

Pie de página del documento o de una sección de este.

<div>:

Se usa como división del documento, semánticamente no significa nada, es un contenedor genérico que se usa generalmente para dar estilos a través de css o para usar algo denominado "delegación de eventos" en javascript.

Listas:

Elementos: <ol>, <ul> <li>, <dl> <dt> & <dd>

Tablas:

Elementos: <table>, <tr>, <caption>, <thead>, <th>, <tbody> & <tfoot>

Formularios:

Elemento <form>, <fieldset> & <legend>

Figuras:

Elementos <figure> & <figcaption>

Otros elementos en bloque:

<blockquote>:

Se utiliza para marcar las citas a otros autores o documentos. Se puede incluir el atributo cite para poner un enlace al documento original o fuente.

<pre>:

Se utiliza para tener código preformateado que necesita ser representado igual que se escribió.

<hr>:

horizontal rule, se utiliza para decirle al navegador que se va a cambiar de tema.

Ejemplos:

<h1> Soy un elemento de bloque </h1>

<p>Soy otro elemento de bloque </p>

Detras de esta mascara hay algo mas que carne, detras de esta mascara hay una idea, y las ideas son aprueba de balas.

                    Hola mundo
                

Elementos en linea

Los elementos en linea ocupan solo el ancho de su contenido y no realizan salto de linea

Elementos en linea principales:

Enlaces <a>

Contenido embebido:

Imágenes, videos, audios e iframes.

<span>:

Es un contenedor de línea, equivalente a div, se suele usar para encerrar palabras o pequeños textos y darles estilo a través de CSS o localizarlos desde javascript. Semánticamente no significa nada.

Otros elementos en linea:

<em>:

Enfasis.

<strong>:

Texto importante o palabras clave.

<i>:

italic.

<b>:

bold.

<u>:

underline.

<mark>:

Fragmento de texto resaltado.

<s>:

Fragmento de texto inexacto o que ya no es relevante.

<cite>:

Fragmento de texto con el título de un trabajo creativo.

<small>:

Anotaciones menores.

<sup>:

Superíndice. 2 ² = 4

<sub>:

Subíndice. H₂O

<q>:

Es el equivalente a blockquote, significa quote, por eso el de bloque se llama block - quote. Sirve para poner citas pero en línea.

<dfn>:

Término que posteriormente será definido.

<abbr>:

Abreviatura o acrónimo. Km

<br>:

Forzar un salto de línea.

<wbr>:

Salto de linea si hiciera falta.

<time>:

Se usa para representar un contenido de hora/fecha. Hoy es 22 de enero

<code>:

Sirve para encerrar código que se quiera representar visualmente, suele ir unido con la etiqueta pre.

<var>:

Variable. X = 5.

<del>:

Tachar el texto. Representa fragmento de texto o información eliminada.

<ins>:

Un texto adicional que se ha insertado al archivo.