HTML5 è il ultimo e più grande Che cos'è HTML5 e come cambia il modo in cui navigo? [MakeUseOf Explains]Negli ultimi anni, potresti aver sentito il termine HTML5 di tanto in tanto. Che tu sappia qualcosa sullo sviluppo web o meno, il concetto può essere alquanto nebuloso e confuso. Ovviamente,... Leggi di più versione del linguaggio di markup più utilizzato sul web. Ci sono alcuni grandi cambiamenti rispetto all'ultima versione della lingua e, se non li stai usando, perdi alcune funzionalità davvero interessanti.
Non abbiamo spazio per coprire ogni nuovo elemento nella quinta versione di HTML, ma questi nove sono alcuni dei più importanti. Per ulteriori informazioni sui nuovi elementi e API in HTML5, assicurati di controlla W3Schools.
Un'introduzione agli elementi semantici
Come gran parte di Internet, HTML5 si è spostato per concentrarsi sulla semantica. Ora, invece di utilizzare semplicemente i tag per la formattazione, vengono utilizzati anche per indicare ai browser
e motori di ricerca I 7 migliori motori di ricerca semantici in alternativa a Google Leggi di più il significato di ciò che circondano.
Per esempio,
dice semplicemente a un browser che contiene un paragrafo. , di cui parleremo tra poco, dice a un browser che contiene il contenuto principale della pagina.
La rete semantica si sta ancora sviluppando e abbiamo appena iniziato a grattare la superficie di ciò che può fare. HTML5 sta aiutando a portare markup semantico Che cos'è il markup semantico e come cambierà per sempre Internet [Spiegazione della tecnologia] Leggi di più a una porzione molto più ampia di Internet, e ciò può essere positivo solo per il futuro dell'elaborazione semantica.
1.
Il tag definisce "contenuto indipendente e autonomo". L'esempio più semplice è, ovviamente, un articolo. Per questo particolare articolo, apriremo il tag prima dell'introduzione e lo chiuderemo dopo la conclusione.
Tutto il testo nella tua sezione indipendente.
Ma ci sono anche altri modi per usarlo. Ad esempio, molti blog di cucina includono storie personali su come è nata una ricetta o perché è importante per lo scrittore. È quindi seguito dalla ricetta stessa. Potresti sostenere che ciascuno di questi elementi potrebbe essere autonomo.
In un forum, ogni post o thread può essere considerato autonomo e ognuno può essere contrassegnato con il proprio etichetta. Per la maggior parte, verrà utilizzato sul contenuto principale di una pagina. Ma tieni presente che puoi usarlo anche in modo più creativo.
2.
Strettamente correlato a è . Ciò definisce un "raggruppamento tematico di contenuti, in genere con un'intestazione". Così sarà dentro … destra?
Non necessariamente. W3 sottolinea che dipende dalla struttura del tuo sito. Potresti avere contenuti autonomi in diverse sezioni della tua pagina (ad esempio, pensa alla prima pagina di un sito di notizie). Potresti quindi avere sezioni all'interno di quell'articolo.
Perché hai bisogno di un DAC
Tutto suona meglio.
Come impostare un DAC
Ecco cosa devi fare.. .
Puoi anche avere sezioni all'interno delle sezioni se si adatta alla tua pagina. Ricorda che una sezione è semplicemente un "raggruppamento tematico di contenuti" e troverai molti luoghi in cui utilizzarli.
3.
Questo elemento "dovrebbe essere usato come contenitore per il contenuto introduttivo". In breve, è la parte della tua pagina che aiuta le persone a capire cosa stanno per leggere.
Ma non lasciarti ingannare: puoi usare questo contenitore più di una volta. Ad esempio, potresti usarlo per identificare il titolo della pagina e il paragrafo introduttivo del tuo post sul blog. Ma potresti anche usarlo per contrassegnare il contenuto introduttivo per ogni sezione.
Tutto ciò che devi sapere sui DAC
Ecco un'utile introduzione ai DAC ...
Il resto del tuo articolo va qui.
Le sezioni di intestazione in genere contengono almeno un tag di intestazione: H1, H2 e così via. Non è necessario, ma in generale, se si utilizza un tag di intestazione, c'è una buona scommessa che si include il contenuto dell'intestazione.
4.
W3 afferma che i tag footer in genere contengono "l'autore del documento, le informazioni sul copyright, i collegamenti ai termini di utilizzo, le informazioni di contatto, ecc." Puoi pensarlo come roba da “pulizie”.
La documentazione afferma inoltre che è possibile avere più di una sezione piè di pagina nella pagina. È probabilmente una buona idea, tuttavia, conservare tutte queste informazioni in un'unica posizione.
5.
Questo tag contiene i collegamenti di navigazione per una determinata pagina. Nota che solo la sezione di navigazione ottiene questo tag, non tutti i collegamenti sulla tua pagina. È per le barre di navigazione e strumenti simili.
Questo è un tag davvero semplice - questo è tutto quello che c'è da fare. Usalo per definire la sezione di navigazione e non riutilizzarlo sulla tua pagina.
6.
Uno dei nuovi elementi più interessanti in HTML5 è il lato. W3 gli dà la definizione alquanto inutile di "alcuni contenuti oltre al contenuto in cui sono inseriti."
In breve, un accantonamento è tutto ciò che è correlato (ma separato dalle) informazioni circostanti. Potrebbe essere una barra laterale che aggiunge dettagli ai tuoi contenuti. Quando viene utilizzato in un set di tag, fornisce informazioni aggiuntive non necessarie alla comprensione del contenuto principale.
Ad esempio, se in questo articolo avessimo incluso una barra laterale che fornisse informazioni sulla storia di HTML5, questo sarebbe un accantonamento.
Ma il
L'articolo principale va qui. L'articolo continua qui.
Poiché esistono molti usi per questo tag, può essere fonte di confusione. Se tieni presente che si tratta di "contenuti secondari" e che non deve sempre essere una barra laterale, avrai un'idea migliore di come utilizzarlo.
7.
Molti siti Web contengono informazioni che devono essere visualizzate, ma non in modo rilevante. Forse sono le informazioni sul copyright di una foto. O la stampa fine su un concorso. Questo tipo di informazioni è esattamente lo scopo del tag dettagli.
Quando si utilizza il tag dettagli, si crea un testo nascosto che può essere facilmente visualizzato. Ecco un esempio:
Clicca qui per vedere le informazioni.
Ecco informazioni più dettagliate che non ti servono subito.
Basta fare clic sulla freccia per ottenere i dettagli. Semplice. La creazione è altrettanto facile. Ecco il codice utilizzato per l'esempio sopra:
Clicca qui per vedere le informazioni. Ecco informazioni più dettagliate che non ti servono subito.
Il tag definisce la frase che verrà mostrata, mentre gli altri contenuti sono nascosti. Tieni presente che puoi utilizzare altri tag nella sezione dei dettagli: titoli, sezioni e così via.
Ci sono altri cose interessanti che puoi fare con HTML 8 fantastici effetti HTML che chiunque può aggiungere al proprio sito WebNon devi conoscere CSS o PHP per costruire un sito di fantasia. Usa questi trucchi HTML per generare effetti fantastici. Leggi di più anche se non conosci molto CSS o JSON.
8-9. e
Non ti preoccupare, il il tag che usi da anni non se ne andrà. fa il giro del tag immagine e fa sapere al browser che si tratta di un'immagine autonoma, diagramma, elenco di codici o altra figura.
Se una figura viene rimossa dalla pagina, non influirà sul flusso del contenuto.
rientra nel tag della figura e specifica una didascalia per un'immagine. Potrebbe assomigliare a questo:
Questo è il nostro logo!
Questo ti dà un modo integrato per aggiungere una didascalia alle tue immagini. Non è più necessario passare attraverso il CMS.
Approfitta della potenza di HTML5
I nuovi elementi in HTML5 aggiungono molta potenza, specialmente per scopi semantici. Esistono elementi aggiuntivi per la formattazione, le misurazioni scalari, l'avanzamento delle attività e altro. Puoi vedere tutti i nuovi elementi a W3Schools.
Ma se riesci a padroneggiare questi nove, sarai sulla buona strada per fare buon uso di HTML5. E se non conosci HTML, dai un'occhiata questi esempi di codice 17 semplici esempi di codice HTML che puoi imparare in 10 minutiVuoi creare una pagina Web di base? Scopri questi esempi HTML e provali in un editor di testo per vedere come appaiono nel tuo browser. Leggi di più !
Hai iniziato a usare HTML5? Quali nuovi elementi trovi più utili? Condividi i tuoi pensieri nei commenti qui sotto!
Dann è un consulente di marketing e strategia dei contenuti che aiuta le aziende a generare domanda e lead. Inoltre blog su strategia e content marketing su dannalbright.com.
