Il miglior tutorial elementi semantici HTML5 Nel 2024, in questo tutorial puoi imparare Che cosa è elementi semantici?,Supporto per il browser,HTML5 nuovi elementi semantici,HTML5 elemento <section>,Esempi,HTML5 <article> elemento,Esempi,HTML5 <nav> elemento,Esempi,HTML5 <aside> elemento,Esempi,HTML5 <header> elemento,Esempi,HTML5 <footer> elemento,Esempi,HTML5 <figure> e <figcaption> elemento,Esempi,Siamo in grado di iniziare a utilizzare questi elementi semantici fanno?,Internet Explorer 8 e versioni precedenti di problemi di IE,
Semantica = significato.
elementi semantici = Elemento senso.
A elementi semantici possono descrivere chiaramente la loro importanza per il browser e sviluppatori.
Esempi di elementi non-semantici: <div> e <span> - indipendentemente dal contenuto.
Esempi di elementi semantici: <form>, <table> , e <img> - definisce chiaramente il suo contenuto.
Internet Explorer 9+, Firefox, Chrome, Safari e Opera supporta elementi semantici.
Nota: Internet Explorer 8 e le versioni precedenti non supportano tale elemento, ma il fondo di questo articolo fornisce una soluzione compatibile.
Molti siti web esistenti includono il seguente codice HTML: <div id = "nav">, <div class = "header"> o <div id = "footer">, per indicare link di navigazione, la testa e la coda.
HTML5 fornisce un nuovo elementi semantici per definire una parte diversa della pagina Web:
<Section> definisce la sezione del documento (sezione sezione). Come ad esempio i capitoli, intestazioni, piè di pagina o altre parti del documento.
Secondo il documento del W3C HTML5: la sezione contiene una serie di contenuti e il suo titolo.
<Article> definisce contenuti indipendenti. .
<Article> elemento di esempio:
<Nav> tag per definire la sezione link di navigazione.
<Nav> elemento viene utilizzato per definire la navigazione pagina dei link alcune aree, ma non tutti i collegamenti devono essere inclusi nell'elemento <nav>!
<Aside> definisce il contenuto della pagina al di là della principale area di contenuti (come ad esempio la barra laterale).
Contenuti da parte l'etichetta deve essere associata con l'area del contenuto principale.
<Header> elemento descrive la zona della testa del documento
<Header> elemento nota descrive l'area di visualizzazione è utilizzato per definire il contenuto.
Nella pagina è possibile utilizzare più <header> elemento.
Il seguente esempio definisce il capo di questo articolo:
<Piè di pagina> elemento descrive l'area inferiore del documento.
<Piè di pagina> elemento deve contenere gli elementi in esso contenuti
A piè di pagina contiene tipicamente autore del documento, le informazioni di copyright, i collegamenti condizioni di utilizzo, le informazioni di contatto, etc.
Documento è possibile utilizzare più elemento <footer>.
<Figure> tag specificato contenuto flusso separato (immagini, grafici, fotografie, codice, ecc).
Contenuti <figure> elemento deve essere associato con il contenuto principale, ma se viene rimosso, non rispondono all'impatto flusso di documenti.
<Figcaption> tag definisce il titolo <figure> elemento.
<Figcaption> elemento deve essere posto in elemento di "figura" della prima o ultima posizione elemento secondario.
Gli elementi di cui sopra sono elementi di blocco (ad eccezione di <figcaption>).
Per questi blocchi ed elementi abbiano effetto in tutte le versioni del browser, è necessario impostare gli attributi di file foglio di stile (codice di stile di seguito consente i vecchi browser supportano gli elementi a livello di blocco in questo capitolo):
IE8 e le versioni precedenti di IE non possono essere resi in questi elementi, effetti CSS, in modo non è possibile utilizzare <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, o altro gli elementi HTML5.
Soluzione: È possibile utilizzare lo script HTML5 Shiv Javascript per risolvere i problemi di compatibilità di IE. HTML5 Shiv Download: http://code.google.com/p/html5shiv/
Una volta scaricato, il seguente codice nella pagina:
Il codice di cui sopra, quando la versione del browser meno di IE9 caricherà html5shiv.js file, è necessario posizionarlo nella <head>, in quanto è necessario il browser IE dopo aver caricato il capo rendendo questi nuovi elementi HTML5