Holy Grail (Den hellige gral) refererer til et layout med flere like høye kolonner på en webside. Dette brukes for bedre oversiktlighet og brukervennlighet. Layoutet kjennes igjen fra tabeller med hode, kropp og fot. Via HTML5 ble Holy Grail semantisk ved å bruke de semantiske «taggene» header, footer, aside, main, section, og article. Senere har også RWD (Responsive Web Design) funnet veien inn i layoutet, da kolonnene ikke fikk plass på håndholdte enheter som nettbrett og smarttelefoner. Dette gjøres ved kreativ bruk av media forespørsler (engelsk CSS media queries) i HTML5 og CSS3.

Holy Grail web design med semantisk layout

Kilder