DESN2006 harder ver

The root element that contains the entire HTML document. Include lang="en" to identify the page language

< html lang="en" >...< /html >

Contains information about the webpage rather than the visible page content. Used for things such as the page title and external resources

< head >< title >Gallery< /title >< /head >

Defines the webpage title shown in the browser tab. It belongs inside the head element

< title >Exhibitions | Design Museum< /title >

Contains all visible webpage content including headings, paragraphs, navigation, images and articles

< body >< h1 >Welcome< /h1 >< p >Explore our gallery.< /p >< /body >

Contains introductory content for a webpage, section or article such as a heading, logo or navigation

< header >< h1 >Design Museum< /h1 >< /header >

Contains a major group of navigation links. Each link needs href="" to specify its destination

< nav >< a href="about.html" >About< /a >< a href="visit.html" >Visit< /a >< /nav >

Contains the main unique content of the webpage. A page should normally have one main element

< main >< h1 >Current Exhibitions< /h1 >< p >Explore our exhibitions.< /p >< /main >

Contains concluding or supporting information such as copyright, contact information or related information

< footer >< p >Design Museum 2026< /p >< /footer >

Groups content that belongs to one clear topic or theme. It will usually have its own heading

< section >< h2 >Opening Hours< /h2 >< p >Open daily from 10am.< /p >< /section >

Contains content that can make sense independently such as a news story, blog post, review or event listing

< article >< h2 >New Exhibition Opens< /h2 >< p >The exhibition opens Friday.< /p >< /article >

Contains related but secondary information that is not essential to the main content such as related links or extra information

< aside >< h2 >Related Events< /h2 >< p >Artist talk this Friday.< /p >< /aside >

Contains a list of actions or commands rather than normal site navigation. It commonly contains list items and buttons

< menu >< li >< button type="button" >Save< /button >< /li >< /menu >

Defines headings and creates the hierarchy of a page. h1 is the main heading and h2 through h6 are increasingly deeper levels. Choose the level based on meaning rather than text size

< h1 >Exhibitions< /h1 >< h2 >Current Exhibitions< /h2 >< h3 >Photography< /h3 >

Defines a paragraph of text. Use it for actual paragraph content rather than spacing or layout

< p >The gallery is open every day.< /p >

Creates a hyperlink to another page, website or resource. href="" is needed to specify the destination

< a href="tickets.html" >Book exhibition tickets< /a >

Displays an image. src="" is needed to specify the image file and alt="" is needed to provide appropriate alternative text for accessibility

< img src="images/gallery.jpg" alt="Visitors inside the main gallery" >

Groups media such as an image, diagram or illustration with related content such as a caption

< figure >< img src="images/gallery.jpg" alt="Gallery interior" >< figcaption >Main gallery space< /figcaption >< /figure >

Provides a caption for content inside a figure element. It must be placed inside the figure it describes

< figcaption >Main gallery space< /figcaption >

Embeds video content. Add controls when the user needs playback controls. Video files can be provided using source elements

< video controls >< source src="media/interview.mp4" type="video/mp4" >< /video >

Specifies a media file for an element such as video. src="" specifies the file and type="" identifies the media format

< source src="media/interview.mp4" type="video/mp4" >

Creates an unordered list. Use it when the order of the items does not matter. It contains li elements

< ul >< li >Painting< /li >< li >Sculpture< /li >< /ul >

Creates an ordered list. Use it when sequence, ranking or order matters. It contains li elements

< ol >< li >Choose a ticket< /li >< li >Confirm booking< /li >< /ol >

Defines an individual item inside an ordered list, unordered list or menu

< li >Photography< /li >

Represents information organised meaningfully into rows and columns. Use it for tabular data rather than page layout

< table >< caption >Opening Hours< /caption >< tr >< th >Day< /th >< th >Hours< /th >< /tr >< tr >< td >Monday< /td >< td >10am to 5pm< /td >< /tr >< /table >

Provides a title or description for a table. It belongs directly inside the table element

< table >< caption >Opening Hours< /caption >...< /table >

Represents an extended quotation from another source

< blockquote >< p >Good design is as little design as possible.< /p >< /blockquote >

Identifies the title of a creative work such as a book, film, artwork or publication. It does not simply identify the person who said a quotation

< cite >The Design of Everyday Things< /cite >

Creates a control that performs an action. Use a button when something happens rather than when navigating to another page. type="button" can specify a normal button action

< button type="button" >Open menu< /button >

Creates content that the user can expand or collapse. It is normally used with a summary element that provides the visible label

< details >< summary >Opening hours< /summary >< p >Open from 10am to 5pm.< /p >< /details >

Connects the HTML document to an external resource and normally belongs inside the head. rel="" describes the relationship and href="" specifies the resource location

< link rel="icon" href="images/favicon.png" >

Contains CSS written directly inside an HTML document and normally belongs inside the head. Do not use this in the HTML Sprint test because styling is not permitted

< style >p { color: black }< /style