The Basic Web Page Structure – HTML5 List of Tags
You can think of an HTML page as a series of containers. After an opening statement that defines the type of page to follow, there is one large element, the <html> tag, that contains the two primary structural elements, and <body>.
HTML documents consist of a tree of elements and text. Each element is denoted in the source by a start tag, such as “<body>“, and an end tag, such as “</body>“. (Certain start tags and end tags can in certain cases be omitted and are implied by other tags.)
Here’s how the basic essential code for an HTML5 web page looks:
<!DOCTYPE html>
<html>
<head>
<title> Title of document goes here </title>
</head>
<body>
Visible text goes here…
</body>
</html>
Before we can fully appreciate what these containers or placeholders do to our webpage we need to know how they function. Below is a list of HTML5 compliant tags we can use to study and familiarize ourselves with as to the description and function of each tag. Let’s do a little exercise. As you go through the list, pick a web page (any, even this one) and right click on it. Select “view page source” and try to find the tags listed here and look for them in the page source. Try to classify which ones are basic tags, formatting tags, image tags, and so on. While you are at it, challenge yourself to decode the code. Have fun!
<bdi> |
Isolates a part of text that might be formatted in a different direction from other text outside it |
<mark> |
Defines marked/highlighted text |
<meter> |
Defines a scalar measurement within a known range (a gauge) |
<progress> |
Represents the progress of a task |
<rp> |
Defines what to show in browsers that do not support ruby annotations |
<rt> |
Defines an explanation/pronunciation of characters (for East Asian typography) |
<ruby> |
Defines a ruby annotation (for East Asian typography) |
<time> |
Defines a date/time |
<wbr> |
Defines a possible line-break |
<datalist> |
Specifies a list of pre-defined options for input controls |
<keygen> |
Defines a key-pair generator field (for forms) |
<output> |
Defines the result of a calculation |
<figure> |
Specifies self-contained content |
<audio> |
Defines sound content |
<source> |
Defines multiple media resources for media elements ( and ) |
<track> |
Defines text tracks for media elements ( and ) |
<video> |
Defines a video or movie |
<nav> |
Defines navigation links |
<command> |
Defines a command button that a user can invoke |
<header> |
Defines a header for a document or section |
<footer> |
Defines a footer for a document or section |
<hgroup> |
Groups heading elements |
<section> |
Defines a section in a document |
<article> |
Defines an article |
<aside> |
Defines content aside from the page content |
<details> |
Defines additional details that the user can view or hide |
<summary> |
Defines a visible heading for a details element |
<embed> |
Defines a container for an external (non-HTML) application |
Don’t forget that WordPress uses PHP but PHP is a server-side technology (runs on a server) that dynamically generates the HTML that will be sent to the browser (IE, Safari, Firefox, Chrome). HTML is whatever you view on a website.
