Dentro de la codificación HTML y CSS existen varios elementos que componen un documento web.
Cuando convertimos de PSD a HTML es fundamental que conozcamos las diferencias entre los tipos de elementos block y los inline, ya que de ellos dependerá el éxito de nuestra maquetación.
En este articulo te enseño las diferencias entre estos dos importantes elementos.
Como su nombre los indica, ya hay una definición en si, de cada tipo.
– Los elementos de tipo block, son elementos que forman un bloque separado.
– Lo de tipo inline, son aquellos que permanecen en línea con los demás elementos.
Vemos un poco mas en detalle cada elemento.
Los elementos de tipo block
Estos elementos poseen las siguientes características:
- Forma un bloque y se posiciona de forma vertical con un nuevo salto de línea.
- Las anchura es la máxima que puede tomar dentro de siu elemento contenedor (padre)
- La altura cambia en base al contenido que posea.
- Puede contener otros elementos de tipo inline y block
- Por medio de CSS se le puede aplicar una anchura y un altura fija.
Elemento que corresponden al tipo block:
Parrafos
<p>
Titulares
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Cajas
<div>
Listas
<ul>, <ol>, <li>
Otros
<menú>, <dir>, <pre>, <hr>, <blockquote>, <address>, <center>, <noframes>, <isindex>, <fieldset>, <table>, <form>
Los elementos inline
Estos elementos poseen las siguientes características:
- Se posiciona horizontalmente en línea con los otros elementos.
- La altura y altura se define en base al contenido que posea.
- Solo puede contener elementos de tipo inline.
- No se puede aplicar una anchura y un altura fija por medio de CSS.
Elemento que por default corresponden al tipo inline:
<a>, <br>, <span>, <bdo>, <object>, <applet>, <img>, <map>, <iframe>, <tt>, <i>, <b>, <big>, <small>, <u>, <s>, <strike>, <Font>, <basefont>, <em>, <strong>, <dfn>, <code>, <q>, <sub>, <sup>, <samp>, <kbd>, <var>, <cite >, <abbr>, <acronym>, <input>, <select>, <textarea>, <label>, <button>
Por medio de CSS podremos alterar el tipo de elemento.
Esto lo logramos con las reglas display:block y display:inline, aplicándolas en cada elemento.
Por ejemplo, si quisiéramos cambiar el tipo de elemento block, a inline, en una etiqueta de elemento de lista <li>, lo haríamos así:
li {
display:inline;
}
Este ejemplo suele ser muy útil cuando queremos realizar menús donde cada elemento se posicione horizontalmente uno al lado del otro.
Si el menú estuviera realizado por ejemplo con listas <ul> y elementos de lista <li>, podemos aplicarle display:inline para evitar que los elementos <li> se posicionen uno debajo del otro como lo haría por defecto en toda lista.
De esta forma, se posicionarán uno al lado de otro.
Es sumamente importante saber diferenciar estos 2 tipos de elementos ya que de allí se desprenderá un código limpio y bien estructurado.
Si estás interesado en aprender diseño web profesional con HTML y CSS, te recomiendo mi curso completo de maquetación web:
Muy bueno tu articulo, creo que le falta un poco de ejemplos para que los muy novatos como yo le entiendan un poco mejor. Se que es demasiado trabajo pero se agradeceria enorme. Muchas gracias por tu dedicación.
Que tal, pues que bien explicadito esta mi hermano, gracias por la info.. la vdd esque me he leido tus articulos y son muy faciles de digerir! Gracias por el tiempo!!
Gracias Cesar!
Esa es la idea.
Saludos
Muy bien el artículo… yo tengo conocimiento de HTML y CSS muy avanzados pero, esto será una referencia para mis alumnos que no tienen muy claro que significa los tipos de elementos en HTML.
Me gustaría agregar que, muchos se confunden y llaman a los Elementos como Tag (etiquetas)…
cuando las etiquetas son los ángulos de menos y mayor «» y los elementos son el contenido «»
Pues la única recomendación negativa que encuentro en mi página web según woorank es que uso demasiados inline. Ni idea tenía de que era eso. Gracias
Por nada amigo
Me alegra que te sirviera.
Cristian