Elementos HTML: agrupación según estructura

Los elementos HTML se pueden agrupan según su estructura dividiéndolos en tres grupos: básicos, de cabecera y de cuerpo.

Los elementos básicos: Son los elementos que conforman la columna vertebral de un documento HTML:

Para un documento normal

html head body

para uno de marcos

html head frameset frame

De cabecera: Contienen la información necesaria para el correcto funcionamiento del documento.

Elementos de cabecera son

 

El obligatorio: title

Los opcionales: base meta link

Los mixtos: style script object y el transicional: isindex. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.

De cuerpo: Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo.
En bloque:

Elementos en bloque son

 

p dl div address hr blockquote form table fieldset pre noscript noframes Y los transicionales: center isindex

Los elementos de encabezados: h1 h2 h3 h4 h5 h6

los elementos para listas: ul y ol. Y los transicionales: dir menu

En línea:

Elementos en línea son

 

Los elementos de frase: abbr acronym cite code em strong dfn kbd samp var

Los elementos de estilo de fuente: b big i small tt y los desaprobados: u s strike

Los elementos especiales: a bdo br img map object q script span sub sup y los desaprobados: applet font basefont iframe

Los elementos de controles de formulario: button input label select textarea

Los elementos DIV y SPAN, junto con los atributos id y class, ofrecen un mecanismo genérico para añadir estructura a los documentos. Estos elementos especifican si su contenido es en línea (SPAN) o en bloque (DIV) pero no imponen ningún otro estilo de presentación al contenido. Así, los autores pueden usar estos elementos junto con hojas de estilo, el atributo lang, etc., para adaptar el HTML a sus propios gustos y necesidades.

Supongamos, por ejemplo, que quisiéramos generar un documento HTML basado en una base de datos de información sobre clientes. Como HTML no incluye elementos que identifiquen objetos tales como "cliente", "número de teléfono", "dirección de correo electrónico", etc., utilizamos DIV y SPAN para lograr los efectos estructurales y presentacionales deseados. Podríamos usar el elemento TABLE del modo siguiente para estructurar la información:

<!-- Ejemplo de registro de la base de datos de clientes: -->
<!-- Nombre: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="cliente-boyera" class="cliente">
<P><SPAN class="cliente-titulo">Información sobre el cliente:</SPAN>
<TABLE class="cliente-datos">
<TR><TH>Apellido:<TD>Boyera</TR>
<TR><TH>Nombre:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="cliente-lafon" class="cliente">
<P><SPAN class="cliente-titulo">Información sobre el cliente:</SPAN>
<TABLE class="cliente-datos">
<TR><TH>Apellido:<TD>Lafon</TR>
<TR><TH>Nombre:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV> 

Ni en bloque ni en línea:

Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.

Elementos subordinados son

 

Subordinados a table: caption tr th td thead tbody tfoot col colgroup

Subordinados de listas: li dd dl Subordinados a select son: optgroup option

Por último, area subordinado a map. param subordinado a object. y legend subordinado a fieldset.

En bloque y en línea:

Los elementos ins y del pueden ser elementos en línea o en bloque según convenga.

Fuentes:  html.conclase.net

developer.mozilla.org

 https://www.websiteplanet.com