### Undlad namespaces
SVG and MathML kan anvendes direkte i et HTML dokument.
Dårligt:
...
Godt:
...
### Undgå at bruge XML-attributter
Det er HTML vi skriver!
Dårligt:
...
Godt:
...
### Undgå at blande `data-*`, Microdata og RDFa Lite attributter med gængse attributter
for at sikre læsbarhed, bør de ovennævnte attribut-typer grupperes for sig.
Dårligt:
...
...
chemises
...
Do not wash!
Godt:
chemises Do not wash!
## Document metadata
### Tilføj `title`-element
Et `title`-element bruges af adskillige applikationer - ikke kun browseren.
Dårligt:
HTML Best Practices
### Undgå `base`-element
En absolut sti eller URL er mere sikker for både udviklere og brugere
Dårligt:
...
HTML Best Practices
Godt:
HTML Best Practices
### Undgå at ancende forældede character encoding formater
HTTP-headers bør specificeres af serveren.
Dårligt:
HTML Best Practices
For writing maintainable and scalable HTML documents.
Godt:
HTML Best Practices
For writing maintainable and scalable HTML documents.
### Brug kun `address`-elementet til kontaktinformation
`address`-element er til email-adresser, social media konti, fysisk addresse, telefonnummer eller noget der kan bruges til at kontakte med
Dårligt:
No rights reserved.
Godt:
Contact: Kyo Nagashima
## Indholdsgruppering
### Undlad at starte ned et linjeskift (newline) i et `pre`-element
Det første linjeskift bliver ignoreret i browseren, men andet og senere linjer bliver anvendt.
Dårligt:
<!DOCTYPE html>
Godt:
<!DOCTYPE html>
### Brug passende element i et `blockquote` element
`blockquote`-elementers indhold forventes at være et citat. Ikke blot en bunke karakterer.
Dårligt:
For writing maintainable and scalable HTML documents.
Godt:
For writing maintainable and scalable HTML documents.
### Undlad at inkludere citatets ophavsperson direkte i `blockquote` element
`blockquote`-elementets indhold er blot et citat
Dårligt:
For writing maintainable and scalable HTML documents.
— HTML Best Practices
Godt:
For writing maintainable and scalable HTML documents.
— HTML Best Practices
Også Godt:
For writing maintainable and scalable HTML documents.
— HTML Best Practices
### Skriv elementer i en liste på hver sin linje
Laaaaaaaaaaaaaaaaaaaaaaaaaaaaaannnnnnnnnnnnnnnnnnnnge
linjer er svære at lææææææææææææææææææææææææææææææææææææææææææææææææse
Dårligt:
General The root Element Sections ...
Godt:
General
The root Element
Sections
...
### Brug `type`-attribut for `ol`-elementer
Brug `type`-attributten til at bestemme hvilken type markering hver linje i en liste skal anvende, for at sikre fremtidige referencer.
Dårligt:
General
The root Element
Sections
...
Godt:
General
The root Element
Sections
...
### Undgå at bruge `dl` til dialog
`dl`-element er begrænset til association list i HTML.
Dårligt:
Costello
Look, you gotta first baseman?
Abbott
Certainly.
Costello
Who’s playing first?
Abbott
That’s right.
Costello becomes exasperated.
Costello
When you pay off the first baseman every month, who gets the money?
Abbott
Every dollar of it.
Godt:
Costello: Look, you gotta first baseman?
Abbott: Certainly.
Costello: Who’s playing first?
Abbott: That’s right.
Costello becomes exasperated.
Costello: When you pay off the first baseman every month, who gets the money?
Abbott: Every dollar of it.
### Placer `figcaption` element som det første eller sidste child af et `figure` element
HTML specifikationen foryder at placere `figcaption`inden i et `figure` element.
Dårligt:
“HTML Best Practices” Cover Art
Godt:
“HTML Best Practices” Cover Art
### Brug `main` element
`main` elementet ckan bruges til at omslutte det generelle indhold.
Dårligt:
...
Godt:
...
### Undgå `div` element i videst muligt omfang
`div` elementet er en sidste udvej
Dårligt:
...
Godt:
## Text-level semantik
### Undgå at splitte det samme link som kan grupperes
`a` elementer kan omkranse næsten alle elementer (undtagen interaktive elementer som en form-kontrol eller et andet `a` element) .
Dårligt:
A community maintaining and evolving HTML since 2004.
Godt:
WHATWG
A community maintaining and evolving HTML since 2004.
### Brug `download`-attribut hvis der kan downloades en resource
Det tvinger browseren til at downloade en linked sti til enhedens lager
Dårligt:
offline version
Godt:
offline version
### Brug `rel`, `hreflang`, og `type` attributter hvis nødvendigt
Disse hints hjælper apps med at håndtere en linked resurse
Dårligt:
Japanese PDF version
Godt:
Japanese PDF version
### Link tekst skal være til at gennemskue
Label til et link bør beskrive hvad der linkes til.
Dårligt:
Click here to view PDF version.
Godt:
PDF version is also available.
### Undgå at bruge `em` elementer til en advarsel
Disse omhandler vigtighed og seriøsitet. Derfor er et `strong` element mere passende
Dårligt:
Caution!
Godt:
Caution!
### Undgå `s`, `i`, `b`, and `u` elementer i videst muligt omfang
disse elementers semantik er for vanskelige at læse for mennesker (udviklere)
Dårligt:
“For writing maintainable and scalable HTML documents”
Godt:
For writing maintainable and scalable HTML documents
Også Godt:
“For writing maintainable and scalable HTML documents”
### tilføj `title` attribut til `abbr` element
Der er ikke nogen anden måde at repræsentere dens udvidelse
Dårligt:
HBP
Godt:
HBP
### Skriv `ruby` element helt ud
`ruby` element er ikke understøttet på tværs af moderne browsere.
Dårligt:
HTMLえいちてぃーえむえる
Godt:
HTML ( えいちてぃーえむえる )
### Tilføj `datetime` attribut to ikke-maskin-læseligt `time` element
når `datetime` attribut ikke eksisterer, er formatet af `time` elementets indhold begrænset
Dårligt:
Dec 19, 2014
Godt:
Dec 19, 2014
### Udspecificer kodesprog med `class` attribut, anført med `language-`
Dette er ikke en formel måde, men spec nævner det.
Dårligt:
<!DOCTYPE html>
Godt:
<!DOCTYPE html>
### Hold `kbd` element så simpelt som muligt
Indlejring af `kbd` elementer i rekursive niveauer er for svært for mennesker at læse
Dårligt:
Ctrl +F5 Ctrl+F5
### Undgå `span` elementet i videst muligt omfang
`span` element er en sidste udvej.
Dårligt:
HTML Best Practices
Godt:
HTML Best Practices
### Linjeskift efter `br` element
Linjeskift bør tilføjes når der anvendes et `br` element. Læsbarhed.
Dårligt:
HTML
Godt:
HTML
### Brug ikke `br` element kun af præsentationsmæssige årsager
`br` elementet er ikke til linjeskift af synsmæssige årsager, men til at lave ophold i indhold.
Dårligt:
Rule name: Rule description:
Godt:
Rule name:
Rule description:
## Redaktionelle overvejelser
### Undlad `ins` og `del` elementer på tværs af andre elementer
Elementet kan ikke strække sig til andre elementer.
Dårligt:
For writing maintainable and scalable HTML documents. And for mental stability.
Don’t trust!
Godt:
For writing maintainable and scalable HTML documents. And for mental stability.
Don’t trust!
Godt:
### Tilføj `alt` attribut til `img` element hvis nødvendigt
`alt` attribut helps those who cannot process images or have image loading disabled.
`alt` attribut hjælper dem der ikke kan processere billedindhold eller har hentning af billedindhold slået fra.
Dårligt:
audio test istedet.)
### tomt `iframe` element
Der er nogle begrænsninger i indholdet af en `iframe`. Det er altid sikkert at lade denne være tom.
Dårligt:
Godt:
### Opmærk indhold i `map` element
Dette indhold bliver præsenteret for en screen reader (skærmlæser, for folk med synshandicap)
Dårligt:
General
The root element
Sections
Godt:
General
The root element
Sections
### Angiv indhold at falde tilbage på for `audio` og `video` elementer
Indhold der kan faldes tilbage på sikrer bagudkompatibilitet for indholdstyper der for nyligt er tilføjet til HTML.
Dårligt:
...
Godt:
...
## Data på tabelform
### Skriv en celle per linje
Lange linjer er svære at læse og overskue.
Dårligt:
General The root Element Sections
Godt:
General
The root Element
Sections
### Brug `th` elementet til et beskrivende tebelhoved
Dette bør ikke undlades
Dårligt:
Element Empty Tag omission
preNo
Neither tag is omissible
imgYes
No end tag
Godt:
Element
Empty
Tag omission
preNo
Neither tag is omissible
imgYes
No end tag
## Formularer
### Omkrans form controls med `label` element
`label` elementet hjælper brugeren med at fokusere på elementet
Dårligt:
Query:
Godt:
Query:
### Undlad `for` attribut hvis muligt
`label` element can contain some form elements.
Dårligt:
Query: Query:
### Brug passende `type` attribut til `input` element
Med passende `type`, giver browseren relevante features til `input` elementer.
Dårligt:
Search keyword:
Godt:
Search keyword:
### Tilføj `value` attribut til `input type="submit"`
Standardlabel for en submit-knap er ikke standardiseret på tværs af browsere og sprog.
Dårligt:
Email:
### Skriv én `option` element per line
Lange linjer er svære at overskue.
Dårligt:
Godt:
### Tilføj `max` attribut til `progress` element
Med `max` attribut, kan `value` attributten blive skrevet i et nemt og mere passende format.
Dårligt:
50%
Godt:
50%
### Tilføj `min` and `max` attribut til `meter` element
Med `min` and `max` attributterne, kan `value` attributterne blive skrevet i et nemt og mere passende format.
Dårligt:
512GB used (1024GB total)
Godt:
512GB used (1024GB total)
### Placer `legend` element som det første element af et `fieldset` element
Dårligt:
Is this section useful?:
...
About "General"
Godt:
About "General"
Is this section useful?:
...
## Scripting
### Undlad `type` attribut for JavaScript
I HTML er standardværdien af en `type` attribut i et `script` element
`text/javascript`.
Dårligt:
Godt:
### Undlad at udkommentere indhold af et `script` element
Dette er gammel strøm fra gamle browsere
Dårligt:
Also Dårligt:
Godt:
### Undlad at bruge script-injected `script` element
`async` attribut er det bedste for både simplicitet of performance.
Dårligt:
Godt:
## Other
### Konsistens med indentering
Korrekt indentering er vigtig for læsbarhed.
Dårligt:
...
...
Godt:
...
...
### Anvend absolut sti til interne links
En absolut sti virker bedre på en lokal maskine uden internetforbindelse.
Dårligt:
You can find more at contact page .
Godt:
You can find more at contact page .
### Undlad at anvende protokol-relative URL til eksterne resurser
Med den korrekte protokol kan man loade eksterne resurser pålideligt og sikkert.
Dårligt:
Godt: