Pagine Web modello loro contenuto in elementi HTML. Gli elementi HTML in linea di massima si dividono in due categorie: inline e blocco. Quale categoria è un tipo di elemento in determina i tipi di struttura che può apparire all'interno, così come il tipo di strutture che possono essere visualizzati in esso, in modo che una pagina di formarsi correttamente. Lo stato di un elemento come un inline o un livello di blocco influisce anche sulla visualizzazione del suo contenuto all'interno del browser Web.
Tipi di elemento
I vari tipi di elemento nel codice HTML modello diversi tipi di contenuto della pagina Web. Pagine HTML utilizzano strutture ad albero, il che significa che gli elementi possono contenere elementi figlio. Nella maggior parte dei casi che un singolo elemento viene visualizzato all'interno di una pagina tra apertura e chiusura tag, come nell'esempio seguente, che rappresenta un paragrafo:
< p > qui è parte del testo all'interno di un elemento paragrafo. </p >
Gli elementi HTML possono contenere testo, media e altri elementi. Quando si crea una struttura di pagina Web, gli sviluppatori di decidono quali tipi di elemento da utilizzare per il contenuto che hanno bisogno di visualizzare. Una struttura di pagina Web globale prevede normalmente più elementi contenuti in strutture nidificate, che possono essere molto complesse in alcuni casi.
Nidificazione
In ordine per una pagina Web di funzionare in modo affidabile in browser diversi, il contenuto all'interno di esso deve rispettare le regole standard di nidificazione per HTML. Elementi di blocco possono contenere altri elementi di blocco, nonché elementi inline. Gli elementi inline possono contenere solo altri elementi inline, come pure il loro contenuto, che è di solito solo testo. Ad esempio, il seguente codice di esempio viene illustrato un genitore "div", che è un elemento blocco, contenente un altro "div" come elemento figlio, che a sua volta contiene un "arco", che è un elemento inline:
< div id = "superiore" >
< div id = "bambino" >
< span > testo < / span >
< / div >
< / div >
Gli elementi "div" possono contenere più altri elementi figlio. La "portata" può contenere più altri elementi inline, ma non, potrebbe ad esempio contenere un altro "div."
CSS
Il CSS o Cascading Style Sheet, dichiarazioni per una pagina Web possono specificare se il browser dovrebbe visualizzare determinati elementi come blocco o in linea. Questo consente agli sviluppatori di personalizzare l'aspetto di tali elementi indipendentemente se sono naturalmente blocco o in linea. Ad esempio, un paragrafo è un elemento blocco, ma il codice CSS seguente specifica che i paragrafi con un attributo di classe particolare dovrebbero apparire in linea:
p.inl () {
display: inline;
}
Browser Web visualizzano automaticamente gli elementi di blocco con interruzioni di riga prima e dopo di loro, con elementi inline naturalmente cadere in linea all'interno di uno altro. Specifica che un elemento deve essere visualizzato come uno o l'altro utilizzando la proprietà display in CSS impone questa presentazione indipendentemente dal tipo di elemento.
Restrizioni
Anche se il codice CSS può specificare che un elemento blocco dovrebbe essere visualizzato in linea o che un elemento inline deve essere considerato come livello di blocco, questo non cambia le restrizioni di nidificazione su tali elementi. Ciò significa che anche se un elemento inline come un "arco" è una dichiarazione di CSS che indica che deve essere visualizzato come livello di blocco, ancora non deve avere elementi di livello blocco nidificati al suo interno o la pagina verrà generati errori nel markup.