Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Enviar email

Manual de HTML5 y CSS3

[3]
Edición básica en HTML

Publicidad

[3.1] fundamentos básicos de HTML

[3.1.1]etiquetas y elementos

Un documento HTML contiene texto. Ahora bien, hay texto que sirve para indicar elementos y propiedades de la página. Es decir el texto contiene lo que se denomina etiquetas.

Las etiquetas sirven para delimitar elementos de la página. Los elementos son cada uno de los elementos de la misma; por ejemplo, un párrafo es un elemento de la página, una tabla también. Incluso hay elementos que contienen otros elementos (las tablas constan de filas y las filas de celdas, por ejemplo).

Las etiquetas son textos encerrados entre los signos de mayor y menor (< >). Cuando un navegador se encuentra un texto así encerrado, entenderá que dentro de los símbolos menor y mayor lo que se indica es el inicio de un elemento. El inicio del elemento se marca con el nombre del elemento entre los símbolos < y >.

Ejemplo:

<strong>

La etiqueta strong sirve para indicar texto importante (se suele mostrar en negrita)

La mayoría de etiquetas afectan a un determinado texto, el cual estará encerrado por las etiquetas. Por lo tanto, casi siempre, existe una etiqueta de apertura y otra de cierre, que se interpretará como el inicio y fin de un determinado elemento de la página.

El cierre de una etiqueta se marca poniendo el símbolo /, seguido del nombre del elemento estamos cerrando. Ejemplo:

Texto normal <strong>texto negrita</strong>

Literalmente lo que indicamos en el ejemplo anterior es que el texto contiene un elemento de tipo strong, que contiene el texto: texto negrita. Un navegador reaccionará mostrando ese texto con un tipo de letra más fuerte. Es decir:

Texto normal texto negrita

Ya se ha comentado que un elemento puede contener dentro más elementos, por lo que entre la apertura y el cierre de una etiqueta puede haber más etiquetas. Una norma importante es que siempre debemos de cerrar primero las etiquetas abiertas más tarde.

Es decir, este código no es correcto.

Texto normal <strong><em>texto negrita y cursiva
</strong></em>

Se está cerrando la etiqueta em después de strong y eso no es correcto porque em es la última que se abrió. Lo correcto es:

Texto normal <strong><em>texto negrita y cursiva</em>
</strong>

Es decir, se cierra primero el elemento em que fue el último en abrirse.

Lo cierto es que los navegadores no suelen dar problemas cuando cometemos errores en el código. Incluso un fallo como el que muestra la Ilustración 43, no sería considerado. Lo que hacen es arreglar nuestros falos, siempre que sea posible. La razón es que les interesa que las páginas se vean correctamente y no actuar como validadores del código.

[3.1.2]atributos

Algunas etiquetas tienen atributos. Los atributos son propiedades de cada elemento a las que podemos asignar un valor, de modo que dicho valor varía el comportamiento del elemento. La forma de utilizar atributos es:

<elemento nombreDeAtributo1=”valor1” 
nombreDeAtributo2=”valor1” … >

A los atributos se les asignan valores que deben ir entre comillas. El símbolo de igualdad (=) es obligatorio.

Ejemplo:

<p lang=”es”>

Indica que el elemento está marcado en idioma español.

La sintaxis de atributos es:

<etiqueta atributo1=”valor1” atributo2=”valor2” ...>
....
</etiqueta>

En el cierre sólo se cierra la etiqueta, sin indicar los atributos. Ejemplo: 

<p class=”normal”>Texto del párrafo normal</p>

[3.2] estructura básica de un documento HTML

Para crear una página web usando HTML 5 la estructura básica es la siguiente:

<!DOCTYPE html>
<html lang=”es”>
    <head>
        <meta charset=”UTF-8” >
            <title></title>
    </head>
    <body>
        
    </body>
</html>

Donde el significado de los elementos es el siguiente:

[3.3] espacios en blanco

[3.3.1]funcionamiento de los espacios en blanco

El texto dentro de las páginas web no respeta los espacios en blanco ni tabuladores que coloquemos en el código, a la hora de mostrar el contenido por pantalla. Solo se considera el primer espacio en blanco, el resto se eliminan.

Por ejemplo:

<!DOCTYPE html>
<html lang=”es”>
    <head>
        <meta charset=”UTF-8”>
            <title></title>
    </head>
    <body>
        Este texto 
                                tiene                               muchos     
                         espacios
    </body>
</html>

El resultado mostraría en la página este texto:

Este texto tiene muchos espacios

La razón es permitir una mayor legibilidad del código, permitiendo en él que coloquemos el código con sangrías y espacios que mejoren su lectura, para que el mantenimiento del mismo sea más cómodo.

[3.3.2]etiqueta pre

Si deseamos que los espacios que colocamos en el código sí sean tenidos en cuenta, podemos utilizar la etiqueta pre.

Realmente, con carácter general, no se aconseja el uso de pre porque ayuda a adquirir malos hábitos y dificulta el aprendizaje de las formas avanzadas de maquetar páginas web. ´

Sí hay contextos en el que es obligado su uso, por ejemplo para mostrar textos referidos a ejemplos de código de lenguajes de programación. Ejemplo:

<!DOCTYPE html>
<html lang=”es”>
    <head>
        <meta charset=”UTF-8”>
            <title>Hola mundo</title>
    </head>
    <body>
			<p>Programa <strong>Hola mundo</strong> 
			escrito en Java

    </body>
</html>
			<pre>
public class HolaMundo{
	public string void main(String[] args){
		System.out.println(“Hola Mundo”);
	}
}
			</pre>

Como la página anterior muestra un ejemplo de código en Java, lo más apropiado es usar pre para mantener las tabulaciones tal cual se hicieron al escribir el código. El resultado, sería:

[3.3.3]uso de &nbsp;

Otra forma de obligar a tener en cuenta espacios en blanco es el código &nbsp. Dicho código es una entidad (las entidades se explican más adelante en este mismo capítulo). Si, por ejemplo, escribimos cuatro veces seguidas &nbsp; estaremos dejando cuatro espacios en blanco que el navegador sí tendrá en cuenta. Ejemplo:

texto &nbsp; &nbsp; &nbsp; &nbsp; otro texto

El segundo texto aparecerá cuatro espacios en blanco detrás del primero.

[3.4] codificación de caracteres en HTML

[3.4.1]uso de la etiqueta meta charset

Los documentos de texto se pueden codificar de diferentes formas. Ejemplos de esas formas son la codificación ASCII clásica, o la tabla ISO 8859-1 que es una tabla ASCII extendida pensada para las lenguas de Europa Occidental1.

Hay que tener en cuenta que las páginas web se pueden ver, una vez publicadas en Internet, en cualquier parte del mundo y el mismo código puede interpretarse de forma diferente si no avisamos de la forma en la que hemos codificado el documento.

Hasta hace unos años, para escribir en español se aconsejaba usar la codificación ISO-8859-1 (todavía hay millones de páginas que usan dicha codificación), pero ahora lo recomendable es usar Unicode, concretamente en su forma UTF-8. Para indicar que nuestra página utiliza Unicode UTF-8 basta con indicar en la cabecera, la etiqueta:

<meta charset=”UTF-8”>

En páginas escritas en versiones anteriores a HTML 5 se usaba esta versión, más compleja:

<meta http-equiv=”content-type” 
      content=”text/html; charset=UTF-8”>

[3.4.2]indicación en el software de escritura de la página

No vale sólo con hacer esa indicación. Debemos estar seguros de que realmente estamos codificando en Unicode. Por ejemplo si usamos el Bloc de notas de Windows para escribir la página web y guardamos sin cuidado, no estaremos codificando el texto en Unicode. Hay que estar seguros que al guardar estamos realmente guardando el texto usando Unicode UTF-8:

Si no aseguramos que estamos codificando de esa forma, al abrir la página no se mostrarán bien los caracteres fuera del ASCII, cuando la persona que ve nuestra página usa otro sistema diferente del nuestro (por ejemplo si abre la página en un sistema Linux y nosotros habíamos usado la codificación nativa de Windows).

Hoy en día todos los editores profesionales guardan de forma nativa en UTF8, pero no está de más asegurarnos.

[3.4.3]uso de entidades

6introducción a las entidades

Para evitar los problemas de la codificación, otra opción (menos recomendable hoy en día) es sólo utilizar caracteres dentro del ASCII original. Los caracteres fuera del ASCII original se escribirían usando las entidades de

Además hay símbolos que no pueden ser escritos como texto normal ya que se malinterpretarían por los navegadores como los símbolos > o < por ejemplo.

El problema es que el ASCII no permite símbolos de otros idiomas como la eñe y por ello se ideó poder escribir códigos nacionales usando una notación especial. Son las entidades.

Las entidades son códigos especiales que comienzan con el símbolo & tras el cual se indica el nombre de la entidad (un nombre mnemotécnico) y final se delimita con un punto y coma (;). Por ejemplo &ntilde; es la entidad que representa a la eñe. Es lo mismo escribir ñ que escribir &ntilde;

También es posible codificar utilizando la notación: 

&#n;

Donde n es el número del código dentro de la tabla Unicode (hay que recordar que los primeros 256 caracteres son los correspondientes a la tabla ISO-8859_1).

Evidentemente es muy pesado escribir todos los símbolos nacionales usando entidades (aunque hay software que es capaz de hacer la traducción automáticamente a medida que escribimos el texto), por ello y porque ahora ya está muy implantado Unicode para codificar el texto, ya no se usan las entidades con ese propósito.

7entidades de uso obligatorio en XML

Las entidades hoy en día se usan para escribir símbolos que están fuera del teclado y, símbolos que causan problemas al escribir texto HTML.

El lenguaje XML prohíbe usar en el texto 5 caracteres y obliga a utilizar entidades en su lugar. Se trata de estas entidades:

Carácter

Número

Nombre

“

&#34;

&quot;

‘

&#39;

&apos; (el navegador Explorer no le reconoce, por lo que no se aconseja su uso)

&

&#38;

&amp;

<

&#60;

&lt;

>

&#62;

&gt;

8entidades que representan caracteres fuera del ASCII y pertenecientes a la ISO 88509-1

Carácter

Número

Nombre

À

&#192;

&Agrave;

Á

&#193;

&Aacute;

Â

&#194;

&Acirc;

Ã

&#195;

&Atilde;

Ä

&#196;

&Auml;

Å

&#197;

&Aring;

Æ

&#198;

&AElig;

Ç

&#199;

&Ccedil;

È

&#200;

&Egrave;

É

&#201;

&Eacute;

Ê

&#202;

&Ecirc;

Ë

&#203;

&Euml;

Ì

&#204;

&Igrave;

Í

&#205;

&Iacute;

Î

&#206;

&Icirc;

Ï

&#207;

&Iuml;

Ð

&#208;

&ETH;

Ñ

&#209;

&Ntilde;

Ò

&#210;

&Ograve;

Ó

&#211;

&Oacute;

Ô

&#212;

&Ocirc;

Õ

&#213;

&Otilde;

Ö

&#214;

&Ouml;

Ø

&#216;

&Oslash;

Ù

&#217;

&Ugrave;

Ú

&#218;

&Uacute;

Û

&#219;

&Ucirc;

Ü

&#220;

&Uuml;

Ý

&#221;

&Yacute;

Þ

&#222;

&THORN;

ß

&#223;

&szlig;

à

&#224;

&agrave;

á

&#225;

&aacute;

â

&#226;

&acirc;

ã

&#227;

&atilde;

ä

&#228;

&auml;

å

&#229;

&aring;

æ

&#230;

&aelig;

ç

&#231;

&ccedil;

è

&#232;

&egrave;

é

&#233;

&eacute;

ê

&#234;

&ecirc;

ë

&#235;

&euml;

ì

&#236;

&igrave;

í

&#237;

&iacute;

î

&#238;

&icirc;

ï

&#239;

&iuml;

ð

&#240;

&eth;

ñ

&#241;

&ntilde;

ò

&#242;

&ograve;

ó

&#243;

&oacute;

ô

&#244;

&ocirc;

õ

&#245;

&otilde;

ö

&#246;

&ouml;

ø

&#248;

&oslash;

ù

&#249;

&ugrave;

ú

&#250;

&uacute;

û

&#251;

&ucirc;

ü

&#252;

&uuml;

ý

&#253;

&yacute;

þ

&#254;

&thorn;

ÿ

&#255;

&yuml;

Otros símbolos de la tabla ISO 8859_1 son:

Carácter

Número

Nombre

 

&#160;

&nbsp; (espacio obligatorio, los navegadores respetan estos espacios en blanco)

¡

&#161;

&iexcl;

¢

&#162;

&cent;

£

&#163;

&pound;

¤

&#164;

&curren;

¥

&#165;

&yen;

¦

&#166;

&brvbar;

§

&#167;

&sect;

¨

&#168;

&uml;

©

&#169;

&copy;

ª

&#170;

&ordf;

«

&#171;

&laquo;

¬

&#172;

&not;

&#173;

&shy;

®

&#174;

&reg;

¯

&#175;

&macr;

°

&#176;

&deg;

±

&#177;

&plusmn;

²

&#178;

&sup2;

³

&#179;

&sup3;

´

&#180;

&acute;

µ

&#181;

&micro;

&#182;

&para;

·

&#183;

&middot;

¸

&#184;

&cedil;

¹

&#185;

&sup1;

º

&#186;

&ordm;

»

&#187;

&raquo;

¼

&#188;

&frac14;

½

&#189;

&frac12;

¾

&#190;

&frac34;

¿

&#191;

&iquest;

×

&#215;

&times;

÷

&#247;

&divide;

€

&euro;

Hay que tener en cuenta que en la tabla 8859_1 no aparece el símbolo del euro (sí en la 8859_2). Por lo que se permite usar el código &euro; para el símbolo €.

9símbolos matemáticos

Carácter

Número

Nombre

∀

&#8704;

&forall;

∂

&#8706;

&part;

∃

&#8707;

&exist;

∅

&#8709;

&empty;

∇

&#8711;

&nabla;

∈

&#8712;

&isin;

∉

&#8713;

&notin;

∋

&#8715;

&ni;

∏

&#8719;

&prod;

∑

&#8721;

&sum;

−

&#8722;

&minus;

∗

&#8727;

&lowast;

√

&#8730;

&radic;

∝

&#8733;

&prop;

∞

&#8734;

&infin;

∠

&#8736;

&ang;

∧

&#8743;

&and;

∨

&#8744;

&or;

∩

&#8745;

&cap;

∪

&#8746;

&cup;

∫

&#8747;

&int;

∴

&#8756;

&there4;

∼

&#8764;

&sim;

≅

&#8773;

&cong;

≈

&#8776;

&asymp;

≠

&#8800;

&ne;

≡

&#8801;

&equiv;

≤

&#8804;

&le;

≥

&#8805;

&ge;

⊂

&#8834;

&sub;

⊃

&#8835;

&sup;

⊄

&#8836;

&nsub;

⊆

&#8838;

&sube;

⊇

&#8839;

&supe;

⊕

&#8853;

&oplus;

⊗

&#8855;

&otimes;

⊥

&#8869;

&perp;

⋅

&#8901;

&sdot;

10Símbolos griegos

Carácter

Número

Nombre

Α

&#913;

&Alpha;

Β

&#914;

&Beta;

Γ

&#915;

&Gamma;

Δ

&#916;

&Delta;

Ε

&#917;

&Epsilon;

Ζ

&#918;

&Zeta;

Η

&#919;

&Eta;

Θ

&#920;

&Theta;

Ι

&#921;

&Iota;

Κ

&#922;

&Kappa;

Λ

&#923;

&Lambda;

Μ

&#924;

&Mu;

Ν

&#925;

&Nu;

Ξ

&#926;

&Xi;

Ο

&#927;

&Omicron;

Π

&#928;

&Pi;

Ρ

&#929;

&Rho;

Σ

&#931;

&Sigma;

Τ

&#932;

&Tau;

Υ

&#933;

&Upsilon;

Φ

&#934;

&Phi;

Χ

&#935;

&Chi;

Ψ

&#936;

&Psi;

Ω

&#937;

&Omega;

α

&#945;

&alpha;

β

&#946;

&beta;

γ

&#947;

&gamma;

δ

&#948;

&delta;

ε

&#949;

&epsilon;

ζ

&#950;

&zeta;

η

&#951;

&eta;

θ

&#952;

&theta;

ι

&#953;

&iota;

κ

&#954;

&kappa;

λ

&#955;

&lambda;

μ

&#956;

&mu;

ν

&#957;

&nu;

ξ

&#958;

&xi;

ο

&#959;

&omicron;

π

&#960;

&pi;

ρ

&#961;

&rho;

ς

&#962;

&sigmaf;

σ

&#963;

&sigma;

τ

&#964;

&tau;

υ

&#965;

&upsilon;

φ

&#966;

&phi;

χ

&#967;

&chi;

ψ

&#968;

&psi;

ω

&#969;

&omega;

ϑ

&#977;

&thetasym;

ϒ

&#978;

&upsih;

ϖ

&#982;

&piv;

11otros símbolos

Carácter

Número

Nombre

Œ

&#338;

&OElig;

œ

&#339;

&oelig;

Š

&#352;

&Scaron;

š

&#353;

&scaron;

Ÿ

&#376;

&Yuml;

ƒ

&#402;

&fnof;

ˆ

&#710;

&circ;

˜

&#732;

&tilde;

&#8194;

&ensp; (deja un espacio del tamaño de la letra ene)

&#8195;

&emsp; (deja un espacio del tamaño de la letra eme)

&#8201;

&thinsp; (espacio corto)

&#8204;

&zwnj; (espacio del tamaño el número cero sin coma)

‍

&#8205;

&zwj; (espacio del tamaño del número cero, incluida la coma)

‎

&#8206;

&lrm;

‏

&#8207;

&rlm;

–

&#8211;

&ndash;

—

&#8212;

&mdash;

‘

&#8216;

&lsquo;

’

&#8217;

&rsquo;

‚

&#8218;

&sbquo;

“

&#8220;

&ldquo;

”

&#8221;

&rdquo;

„

&#8222;

&bdquo;

†

&#8224;

&dagger;

‡

&#8225;

&Dagger;

•

&#8226;

&bull;

…

&#8230;

&hellip;

‰

&#8240;

&permil;

′

&#8242;

&prime;

″

&#8243;

&Prime;

‹

&#8249;

&lsaquo;

›

&#8250;

&rsaquo;

‾

&#8254;

&oline;

€

&#8364;

&euro;

™

&#8482;

&trade;

←

&#8592;

&larr;

↑

&#8593;

&uarr;

→

&#8594;

&rarr;

↓

&#8595;

&darr;

↔

&#8596;

&harr;

↵

&#8629;

&crarr;

⌈

&#8968;

&lceil;

⌉

&#8969;

&rceil;

⌊

&#8970;

&lfloor;

⌋

&#8971;

&rfloor;

◊

&#9674;

&loz;

♠

&#9824;

&spades;

♣

&#9827;

&clubs;

♥

&#9829;

&hearts;

♦

&#9830;

&diams;

12en resumen...

Salvo para poder escribir símbolos que no están disponibles en el teclado, las entidades no se usan mucho actualmente. Pero es muy bueno conocerlas para representar códigos extraños o para evitar acudir a programas de escritura de códigos especiales como el mapa de caracteres de Windows u otros, cuya codificación no siempre coincide con Unicode.

Sí es imprescindible usar la entidad &gt; para representar el símbolo “mayor que” (>) ya que, de otro modo, causaría confusión en el navegador. Otros símbolos como los prohibidos en XML conviene también convertirlos a su forma con entidades (aunque no es imprescindible en HTML 5).

[3.5] códigos de idioma

Como se ha indicado anteriormente, el atributo lang permite indicar dos letras que significan el idioma en el que está escrito el texto del elemento. Lo normal es indicarle en el elemento html (por ejemplo <html lang=”es”>), pero hay veces que una página contiene elementos cuyo contenido está escrito en un idioma diferente al indicado como general en el apartado <html>.

Como el atributo lang, es común a todos los elementos, se puede indicar el mismo cuando sea necesario. Ejemplo:

<p>
	Como dirían en Estados Unidos: 
	<span lan=”en”>Welcome!</span>
</p>

¿Por qué tomarse tantas molestias? Para que, por ejemplo, los buscadores de Internet distingan el texto en el idioma apropiado y adapten mejor nuestras búsquedas. Otras herramientas (como correctores ortográficos, traductores en línea, etc.) funcionan mucho mejor marcando adecuadamente el idioma.

Los códigos de idioma utilizan la norma ISO 639-1 la cual indica estos códigos:

código

idioma

código

idioma

aa

afar

lb

luxemburgués

ab

abjaso (o abjasiano)

lg

luganda

ae

avéstico

li

limburgués

af

afrikaans

ln

lingala

ak

akano

lo

lao

am

amárico

lt

lituano

an

aragonés

lu

luba-katanga

ar

árabe

lv

letón

as

asamés

mg

malgache (o malagasy)

av

avar

mh

marshalés

ay

aimara

mi

maorí

az

azerí

mk

macedonio

ba

baskir

ml

malayalam

be

bielorruso

mn

mongol

bg

búlgaro

mr

maratí

bh

bhojpurí

ms

malayo

bi

bislama

mt

maltés

bm

bambara

my

birmano

bn

bengalí

na

nauruano

bo

tibetano

nb

noruego bokmål

br

bretón

nd

ndebele del norte

bs

bosnio

ne

nepalí

ca

catalán

ng

ndonga

ce

checheno

nl

neerlandés (u holandés)

ch

chamorro

nn

nynorsk

co

corso

no

noruego

cr

cree

nr

ndebele del sur

cs

checo

nv

navajo

cu

eslavo eclesiástico antiguo

ny

chichewa

cv

chuvasio

oc

occitano

cy

galés

oj

ojibwa

da

danés

om

oromo

de

alemán

or

oriya

dv

maldivo

os

osético

dz

dzongkha

pa

panyabí (o penyabi)

ee

ewe

pi

pali

el

griego (moderno)

pl

polaco

en

inglés

ps

pastú (o pashto)

eo

esperanto

pt

portugués

es

español (o castellano)

qu

quechua

et

estonio

rm

romanche

eu

euskera

rn

kirundi

fa

persa

ro

rumano

ff

fula

ru

ruso

fi

finés (o finlandés)

rw

ruandés

fj

fiyiano (o fiyi)

sa

sánscrito

fo

feroés

sc

sardo

fr

francés

sd

sindhi

fy

frisón (o frisio)

se

sami septentrional

ga

irlandés (o gaélico)

sg

sango

gd

gaélico escocés

si

cingalés

gl

gallego

sk

eslovaco

gn

guaraní

sl

esloveno

gu

guyaratí (o guyaratí)

sm

samoano

gv

manés (gaélico manés o de Isla de Man)

sn

shona

ha

hausa

so

somalí

he

hebreo

sq

albanés

hi

hindi (o hindú)

sr

serbio

ho

hiri motu

ss

suazi (swati o siSwati)

hr

croata

st

sesotho

ht

haitiano

su

sundanés

hu

húngaro

sv

sueco

hy

armenio

sw

suajili

hz

herero

ta

tamil

ia

interlingua

te

telugú

id

indonesio

tg

tayiko

ie

occidental

th

tailandés

ig

igbo

ti

tigriña

ii

yi de Sichuán

tk

turcomano

ik

inupiaq

tl

tagalo

io

ido

tn

setsuana

is

islandés

to

tongano

it

italiano

tr

turco

iu

inuktitut

ts

tsonga

ja

japonés

tt

tártaro

jv

javanés

tw

twi

ka

georgiano

ty

tahitiano

kg

kongo

ug

uigur

ki

kikuyu

uk

ucraniano

kj

kuanyama

ur

urdu

kk

kazajo (o kazajio)

uz

uzbeko

kl

groenlandés (o kalaallisut)

ve

venda

km

camboyano (o jemer)

vi

vietnamita

kn

canarés

vo

volapük

ko

coreano

wa

valón

kr

kanuri

wo

wolof

ks

cachemiro

xh

xhosa

ku

kurdo

yi

yídish (o yiddish)

kv

komi

yo

yoruba

kw

córnico

za

chuan (o zhuang)

ky

kirguís

zh

chino

la

latín

zu

zulú

Podemos ser más específicos en el idioma e indicar no solo el idioma sino el dialecto concreto del mismo. Para ello se acompaña de un guión al código del idioma seguido de dos letras mayúsculas. La norma ISO que contiene los códigos disponibles es la norma 639-2.

Por ejemplo si queremos marcar un elemento con el idioma español, pero indicando que es español de México, haríamos lo siguiente:

<p>
	Como dirían en México: 
	<span lan=”es-MX”>¡Híjole!</span>
</p>

[3.6] contenido y contenedores

En HTML los elementos que muestran algo en la página, se colocan dentro de la sección body.

Además hay que tener en cuenta que hay elementos pensados para contener grandes cantidades de información (como div) y elementos que contienen poco texto (como strong). Es correcto que aparezca un elemento strong dentro de un elemento p, pero no al revés:

<strong><p>Hola</p></strong> -->¡¡Incorrecto!!
<p><strong>Hola</p></strong> -->Correcto

La mayoría de elementos en HTML son contenedores de otros textos y elementos. Hay que conocer que tipos de elementos tenemos. Los tipos están relacionados con la propiedad CSS display, que se encarga de decir cómo tiene que mostrarse un elemento. Por defecto los elementos funcionan de esta forma:

En todo caso, el display de un elemento se puede modificar desde lenguaje CSS, pero no conviene hacer combinaciones anti naturales ya que se pierde el sentido semántico del código.

[3.7] atributos comunes

Todos los elementos tienen una serie de atributos comunes a todos ellos. Eso significa que podemos utilizarles independientemente de cuál sea el elemento.

El atributo común más conocido es id, que permite identificar a un elemento con un identificador único, pero hay muchos más. Los principales son:

atributo

significado

lang

Indica el lenguaje en el que está escrito el texto del elemento

style

Permite indicar código CSS directamente. Ese código solo afectará a ese elemento.

class

Permite indicar una clase CSS para el elemento

id

Permite identificar al elemento. Un identificador es un nombre único que se le da al elemento y que no se puede repetir en otro elemento dentro de la misma página web.

El identificador sólo puede contener letras (del alfabeto inglés) y números (no se pueden usar espacios en blanco). Además debe empezar por una letra.

El atributo id es uno de los fundamentales.

title

Permite poner un título al elemento. Es una especie de descripción corta que es muy útil en aquellos elementos que requieren de una explicación semántica como un abreviatura, una sigla, una imagen, etc. Normalmente, los navegadores reaccionan a este atributo mostrando un cartelito con el texto indicado en title, cuando el cursor del ratón se aproxima a un elemento que use este atributo

Hay muchos más atributos comunes:

atributo

significado

dir

Indica la dirección de lectura del texto contenido en el elemento (permitiría aplicar correctamente la forma de mostrar texto en árabe por ejemplo). Puede ser uno de estos dos valores: ltr (left to right, de izquierda a derecha) o rtl (right to left, de derecha a izquierda).

contenteditable

Si vale true, el usuario puede modificar el contenido del elemento. Es de HTML 5

draggable

Atributo incluido en HTML 5. Especifica (con valor true) que el párrafo tiene posibilidad de ser arrastrado con el ratón o los dedos (en dispositivos táctiles). El control del arrastre de todos modos debe de ser controlado por JavaScript.

hidden

No soportado por Internet Explorer. Cuando aparece este atributo (sin valor) hace que el elemento que lo contiene se le marque como no relevante y quede oculto.

spellcheck

Si vale true el párrafo queda marcado como revisable por herramientas de corrección de texto. Es de HTML 5

onclick

ondblclic

onkeyup

onkeydown

onkeypress

onmouseover

onmouseout

onmousedown

onmouseup

onmousemove

Permiten asignar código Javascript a alguna de esas acciones (un clic de ratón, un doble clic, pulsar tecla, dejar de pulsar tecla, mantener pulsada la tecla, entrar con el ratón en el elemento, mover el ratón por encima, sacar el ratón del elemento, pulsar tecla de ratón, liberar tecla de ratón,…)

accesskey

Permite especificar una tecla para hacer que el control del usuario pase al elemento que la contiene. Su uso más habitual es con las etiquetas de enlace (a). Lo malo es que no funciona de forma muy intuitiva, en el ejemplo: 

<p>
 Puedes ir a 
 <a href=”http://www.elpais.es” accesskey=”p”>
 El Pais
 </a> o 
 <a href=”http://www.elmundo.es” accesskey=”m”>
 El Mundo
 </a> 
</p>

Cada elemento a permite, haciendo clic, ir al periódico El Pais y El Mundo respectivamente. Las teclas indicadas son p para El País y m para El Mundo. En realidad la mayoría de navegadores usarán como teclas Alt+p y Alt+m, algunos ignorarán este atributo y otros pueden pedir además usar la tecla Intro.

No obstante este atributo es interesante con uso de software especial que facilite la navegación para personas con necesidades especiales (como por ejemplo los invidentes).

tabindex

Atributo al que se le indica un número. Los elementos con tabindex más bajo obtienen primero el foco. Al pulsar el tabulador se resaltará ese elemento para poder utilizarle con el teclado.

Es decir establece los saltos que ocurrirán al pulsar la tecla tabulador

[3.8] inserción de archivos CSS y JavaScript

[3.8.1]CSS

Si deseamos aplicar en nuestro documento código CSS procedente de un archivo aparte, debemos utilizar el elemento link cuya sintaxis es:

<link href=”ruta” rel=”stylesheet”>

Los archivos CSS contienen instrucciones que permiten modificar la apariencia de nuestro documento.

La etiqueta link debe ir en el apartado head de la página, normalmente después del título y las etiquetas meta.

[3.8.2]inserción de archivos externos JavaScript

En este caso la etiqueta que lo permite es script. Esta etiqueta, a diferencia de link, sí tiene cierre.

Sirve para incrustar código JavaScript en el documento. Ejemplo:

<script>
  alert(“Hola”);
</script>

Si el código JavaScript procede de otro archivos, el código de ese archivos se incrusta de esta forma:

<script src=”archivo.js”>
  alert(“Hola”);
</script>

1 Para más información:
http://jorgesancheznet/manuales/xml/introduccion-lenguajes-de-marcas.html