Semantic HTML
HTML Semantico
HTML Semantico significa scegliere elementi HTML per ciò che fanno, non solo per come appaiono. La pagina mantiene la sua struttura e il comportamento integrato anche senza CSS.
Un altro esempio
Un sito di notizie costruisce un articolo con article, h1, time, figure e nav. Quando il CSS è disattivato, la storia mantiene comunque un ordine chiaro. La tecnologia assistiva può saltare all'intestazione o alla navigazione.
Parti principali
- 01Struttura del documento
- 02Semantica degli elementi
- 03Comportamento nativo
Usalo quando
Inizia con l'elemento HTML nativo che corrisponde al contenuto e all'azione. Aggiungi ARIA solo quando l'HTML nativo lascia un vero vuoto.
Non usarlo quando
Non utilizzare elementi div semplici per imitare link, pulsanti, titoli o tabelle solo perché sono facili da stilizzare.
Nome usato nel codice
native HTML elements before ARIA roles Prima di spedire
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with HTML Semantico (Semantic HTML). User context: Un sito di notizie costruisce un articolo con article, h1, time, figure e nav. Quando il CSS è disattivato, la storia mantiene comunque un ordine chiaro. La tecnologia assistiva può saltare all'intestazione o alla navigazione. Recommended pattern: HTML Semantico (Semantic HTML). Why it fits: Inizia con l'elemento HTML nativo che corrisponde al contenuto e all'azione. Aggiungi ARIA solo quando l'HTML nativo lascia un vero vuoto. Do not use it when: Non utilizzare elementi div semplici per imitare link, pulsanti, titoli o tabelle solo perché sono facili da stilizzare. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Lo standard copre solo l'ambito elencato. Non sceglie lo stile visivo, la decisione sul prodotto o l'esempio di vocabolario. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Controlla questa richiesta
Review how HTML Semantico (Semantic HTML) is used now. Definition: HTML Semantico significa scegliere elementi HTML per ciò che fanno, non solo per come appaiono. La pagina mantiene la sua struttura e il comportamento integrato anche senza CSS. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.