HTML - Etiqueta div

  »   HTML  »   Tutorial HTML - Etiqueta div

La etiqueta div no es más que un contenedor para otras etiquetas. Estos son los atributos mas importante de la etiqueta div:

  • id - define una id para hacer referencia el div vía javascript
  • title - muestra un titulo del elemento
  • style - define estilo vía CSS inline
  • height - altura del div. Es recomendable usar CSS
  • width - ancho del div. Es recomendable usa CSS

El resto de los atributos no son usados con frecuencia, ademas se pueden sustituir por las propiedades de CSS.

Aquí hay un ejemplo usando la etiqueta <div>:

html<div id="my_menu" align="right">
	<a href="#">HOME</a> | <a href="#">CONTACT</a> | <a href="#">ABOUT</a>
</div>

<div id="my_content" align="left" bgcolor="white">
	<h4>HTML title here</h4>
	<p>The div tag is a non-visual (by default) element that can be used to apply additional properties to content contained within it. Unlike the span tag</p>
</div>

Demo

HTML title here

The div tag is a non-visual (by default) element that can be used to apply additional properties to content contained within it. Unlike the span tag

La etiqueta div es más fácil de usar que la etiqueta table, por eso es recomendable que la utilices cada vez que la necesites.

HTML - La etiqueta div - fácil de modificar

Una de las razones por las cuales es más fácil de usar, es porque se puede introducir nueva información con facilidad y te mostraremos esto.

En este ejemplo, hemos agregado algunos nuevos campos a la página ejemplificada arriba.

html<div id="my_menu" align="right">
	<a href="#">HOME</a> | 
	<a href="#">CONTACT</a> | 
	<a href="#">ABOUT</a> |
	<a href="#">SITEMAP</a>
</div>

<div id="my_content" align="left" bgcolor="white">
	<h4>HTML title here</h4>
	<p>An HTML tag that is widely used to break apart a Web page into elements, each with its own layout attributes. The SPAN tag is somewhat similar to DIV, except that SPAN defines a small amount of text, whereas DIV defines an entire block of data on the page.</p>
	<h4>Second HTML title here</h4>
	<p>The Div macro wraps content in a div tag with optional class and styles.   The div tag is a non-visual (by default) element that can be used to apply additional properties to content contained within it. Unlike the span tag</p>
</div>

Demo

HTML title here

An HTML tag that is widely used to break apart a Web page into elements, each with its own layout attributes. The SPAN tag is somewhat similar to DIV, except that SPAN defines a small amount of text, whereas DIV defines an entire block of data on the page.

Second HTML title here

The Div macro wraps content in a div tag with optional class and styles. The div tag is a non-visual (by default) element that can be used to apply additional properties to content contained within it. Unlike the span tag