Elementos HTML en bloque y en linea
Cada elemento HTML tiene un valor de visualización predeterminado, según el tipo de elemento que sea.
Hay dos valores de visualización: bloque y en linea (inline).
Elementos a nivel de bloque
Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como sea posible).
El elemento <div> es un elemento a nivel de bloque.
Listado de elementos a nivel de bloque
Veamos una lista con los elementos a nivel de bloque:
- <address>
- <article>
- <aside>
- <blockquote>
- <canvas>
- <dd>
- <div>
- <dl>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>-<h6>
- <header>
- <hr>
- <li>
- <main>
- <nav>
- <noscript>
- <ol>
- <p>
- <pre>
- <section>
- <table>
- <tfood>
- <ul>
- <video>
Elementos en línea
Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho que sea necesario.
Este es un elemento <span> dentro de un párrafo.
Listado de elementos en línea
Veamos una lista con los elementos en línea:
- <a>
- <abbr>
- <acronym>
- <b>
- <bdo>
- <big>
- <br>
- <button>
- <cite>
- <code>
- <dfn>
- <em>
- <i>
- <img>
- <input>
- <kdb>
- <label>
- <map>
- <object>
- <output>
- <q>
- <samp>
- <script>
- <select>
- <small>
- <span>
- <strong>
- <sub>
- <sup>
- <textarea>
- <time>
- <tt>
- <var>
El elemento <div>
El elemento <div> a menudo se usa como contenedor para otros elementos HTML.
El elemento <div> no tiene atributos requeridos, pero el estilo, la clase y la identificación son comunes.
Cuando se usa junto con CSS, el elemento <div> se puede usar para diseñar bloques de contenido.
Ejm
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>
El elemento <span>
El elemento <span> es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
El elemento <span> no tiene atributos requeridos, pero el estilo, la clase y la identificación son comunes.
Cuando se usa junto con CSS, el elemento <span> se puede usar para dar estilo a partes del texto.
Ejm
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold"> dark green</span> eyes.</p>
Resumen
- Hay dos maneras de mostrar valores: en línea (inline) y en bloque.
- Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible.
- Un elemento en línea no comienza en una nueva línea y solo ocupa tanto ancho como sea necesario.
- El elemento <div> es un nivel de bloque y a menudo se usa como contenedor para otros elementos HTML.
- El elemento <span> es un contenedor en línea utilizado para marcar una parte de un texto o una parte de un documento.