The elements listed in the summary below are parent elements, meaning they often contain child elements, not all of which are listed here. Note that obsolete elements used before HTML5 aren’t included, even though modern browsers often accept them. A huge amount of extra information about the workings of elements can be found online, although some of it may be out of date.
address article aside audio blockquote canvas details dialog div dl figure footer form h1 h2 h3 h4 h5 h6 header hr iframe main menu nav noscript ol p pre section table ul videoFortunately, although understanding these elements is useful, you don’t need them all to create a fully compliant and working web page. In fact, many simple pages only use div and p.
The following elements can be used to divide a page up into its constituent areas:
address - your geographical addressarticle - a complete article inserted into a pageaside - something not entirely related, perhaps an advertblockquote - a quoted extract from another sourcefooter - bottom of a page, often with contact information and other linksheader - introductory content or a set of navigational links at the top of a pagemain - the dominant part of a pagenav - an area providing navigation linksp - paragraph of standard textpre - block of preformatted (monospaced) textsection - a large portion of a page’s contentOf these, div is most frequently used, often with multiple div elements nested within other div elements. However, unlike the others listed here, div doesn’t suggest the purpose of the block. Instead it indicates an area whose styling is defined in a linked stylesheet. Wherever possible, it’s better to replace div by a semantic element, such as header, which gives some meaning for a specific part of the page, a feature that’s useful for both designers and search engines.
Elements h1 through to h6 are for headings in ever-decreasing sizes. Where possible, use them in order, without gaps. The relative sizes of the text used for each can be adjusted in a stylesheet.
The following types of list can be used:
dl - a list of dd (definition data) with a dt (definition term) before each ddol - ordered list of li (list item) elementsul - unordered list, again containing li elementsA definition list contains the name of each definition (term), followed by the actual definition of that term. Using a stylesheet, an ordered list can be provided with numbers or letters at the beginning of each entry, whilst an unordered list can incorporate bullets or other symbols.
A table element typically contains the following:
caption - title at the top of the table, centred by defaultthead - table header, containing tr (table row) and th (table heading) elementstbody - table body, again with tr elements, but holding td (table data) elementstfoot - table footer, with tr and td elements: often used for totalsTables can be complex to construct, but the thead, tbody and tfoot elements allow the body of a table to be scrolled independently of the head and foot.
Audio and video content can be included in a web page. The following elements can be used to include such material, with a controller bar or other options:
audio - contains a source element specifying the required audio file.video - again with source for the video fileThese elements allow a user to interact with a site, permitting them to view additional material or to enter their own information. Some of these features are not available in certain browsers.
details - this creates a widget that expands when clicked on, using a summary element containing the widget text and a p (paragraph) for the extra informationdialog - provides a dialogue box via a form element (see below)form - a form to fill in, made with input, label, select, textarea, button, fieldset, legend, datalist, output, option and optgroup elementsmenu - containing menuitem elements, nested as required, this allows the user of a page to select items from a popup menucanvas - a container for ‘live’ graphics created with JavaScript figure - contains img (image) and figcaption (figure caption)hr - a horizontal ruler line across the page, although it may be better to use section elements and a stylesheet for borders (this element has no closing tag)iframe - embeds the entire content of another page into the pagenoscript - included following a script element (see later), this contains a message for browsers that don’t support JavaScript