HTML Tags:
About HTML TagsThe above code is an example of a basic web page. It contains text, surrounded by HTML tags. HTML tags define which HTML elements appear on the page.
Any web page you build will almost certainly start with the above HTML elements. You can then add more elements — such as images, forms, tables, etc — as required.
We'll be adding more HTML tags throughout this tutorial.
In case you're wondering, HTML stands for HyperText Markup Language — it is the language that describes the structure and meaning of web pages.
Using HTML Tags
HTML elements usually consist of a start and end tag. The end tag is the same as the start tag, but with a forward slash inserted before the tag name. So a paragraph's start tag looks like this <p> and its end tag looks like this </p>. Any contents are inserted between the start and end tags.
You might have noticed that the browser doesn't display the actual tags. But this doesn't mean that it ignores the tags. The browser interprets the tags to determine what to display to the user. So when it sees text surrounded by <h1> tags for example, it knows to display that text as a level one heading. And if it sees <p> tags, it will display a paragraph. Like this:
Some HTML elements only have a start tag. These are called void elements. For example, the line break element is a void element. As you can see here, it has no end tag:
End tags are not allowed on void elements—they must have a start tag only.However, some (non-void) elements' start and/or end tag can be omitted in certain circumstances. But this is optional. The rules around this are quite complex and depend on the tags involved, so it's usually safer just to use start and end tags unless you know what you're doing.
Example Web Page Explained
In case you're interested, here's an explanation of the HTML tags on the example web page at the top. Don't worry, you don't need to memorize all this right now — you can always come back later.
<!DOCTYPE>: Represents the document type. Must only appear once, at the top of the page (before any HTML tags). All HTML5 documents should have<!doctype html>at the top of the page. Strictly speaking,<!DOCTYPE>isn't an element—it's simply a required preamble.<html>: Represents the root of an HTML document. It is the container that contains all other HTML elements. Therefore, it must come first (except for the<!DOCTYPE>which is located prior to the opening HTML element).<head>: Represents the "head" of an HTML document. It contains a collection of metadata content (i.e. content that sets up the presentation or behavior of the rest of the document) such as the document's title, meta description, style sheets, scripts, etc.<title>: Represents the title or name of the HTML document. The<title>element's contents are typically displayed in the browser's title bar. It is also often displayed out of context, such as in browser bookmarks and search results. For this reason, the<title>tag should be used to provide a title that identifies the document even when it's taken out of context.<body>: This element is used for declaring the main content section of the HTML document. Most web page content is inserted between the opening and closing<body>tags.<h1>: Represents a level 1 heading. This is the highest level of all HTML headings. Headings range from<h1>(highest ranked) to<h6>(lowest ranked).<p>: Represents a paragraph. To add a new paragraph, simply insert the new paragraph inside a new set of<p>tags.
Some Tags:
<!DOCTYPE>: Defines the document type and version of HTML being used.<html>: Defines the root of an HTML document.<head>: Contains metadata and links to external resources for the document.<title>: Sets the title of the document displayed in the browser's title bar or tab.<base>: Specifies the base URL/target for all relative URLs in a document.<link>: Defines relationships between the current document and external resources.<meta>: Provides metadata about the HTML document, such as character set, description, keywords, etc.<style>: Contains CSS rules for styling the document.<script>: Defines client-side JavaScript code or links to external script files.<noscript>: Defines alternate content to be displayed if a browser does not support scripting or scripting is disabled.<body>: Contains the visible content of the document.<h1>to<h6>: Defines headings of different levels (from highest to lowest).<p>: Defines a paragraph.<br>: Inserts a single line break.<hr>: Represents a thematic break or horizontal rule.<pre>: Defines preformatted text, preserving both spaces and line breaks.<a>: Creates a hyperlink to another web page, file, email address, etc.<img>: Embeds an image in the document.<audio>: Embeds sound content in the document.<video>: Embeds video content in the document.<iframe>: Embeds another HTML document within the current document.<ul>: Defines an unordered (bulleted) list.<ol>: Defines an ordered (numbered) list.<li>: Defines a list item within<ul>or<ol>.<dl>: Defines a description list.<dt>: Defines a term in a description list.<dd>: Defines a description in a description list.<table>: Defines a table.<tr>: Defines a row in a table.<th>: Defines a header cell in a table.<td>: Defines a data cell in a table.<thead>,<tbody>,<tfoot>: Group table rows into a header, body, and footer section, respectively.<caption>: Defines a caption for a table.<form>: Defines an HTML form for user input.<input>: Defines an input control.<textarea>: Defines a multiline text input control.<button>: Defines a clickable button.<select>: Defines a dropdown list.<option>: Defines an option in a dropdown list.<label>: Defines a label for an<input>element.<fieldset>: Groups related form elements together.<legend>: Defines a caption for a<fieldset>.<div>: Defines a division or section in an HTML document.<span>: Defines a section in a document for styling purposes.<header>,<footer>,<nav>,<article>,<section>: HTML5 semantic elements for structuring page content.<main>: Defines the main content of a document.<aside>: Defines content aside from the main content.<details>: Defines additional details that the user can view or hide.<summary>: Defines a visible heading for the<details>element.<canvas>: Defines an area for drawing graphics with JavaScript.
These are some of the most commonly used HTML tags. Each tag serves a specific purpose in structuring and presenting content on web pages.
The Most Common HTML Tags
There are nearly 100 different types of HTML tags that you can use for your web pages. Here is a list of the most common HTML tags:
Tag | Type | What It Is |
<p> | HTML Text Tags | Paragraph |
<h1> | HTML Text Tags | Heading 1 |
<h2> | HTML Text Tags | Heading 2 |
<h3> | HTML Text Tags | Heading 3 |
<h4> | HTML Text Tags | Heading 4 |
<h5> | HTML Text Tags | Heading 5 |
<h6> | HTML Text Tags | Heading 6 |
<strong> | HTML Text Tags | Strong |
<em> | HTML Text Tags | Emphasis |
<abbr> | HTML Text Tags | Abbreviation |
<address> | HTML Text Tags | Contact Information |
<bdo> | HTML Text Tags | Override The Current Text Direction |
<blockquote> | HTML Text Tags | Content From Another Source |
<cite> | HTML Text Tags | Title Of The Work, Book, Website |
<q> | HTML Text Tags | Inline Quotation |
<code> | HTML Text Tags | Display A Part Of Programming Code |
<ins> | HTML Text Tags | Text Inserted |
<del> | HTML Text Tags | Text Deleted From The Document |
<dfn> | HTML Text Tags | Term Defined Within A Sentence/Phrase |
<kbd> | HTML Text Tags | Keyboard Input |
<pre> | HTML Text Tags | Preformatted Text |
<samp> | HTML Text Tags | Sample Output Of A Computer Program |
<var> | HTML Text Tags | Variable Name Used In Mathematical Or Programming Context |
<br> | HTML Text Tags | Single Line Break |
<div> | HTML Text Tags | Division |
<a> | HTML Link Tags | Anchor Tag For A Link |
<base> | HTML Link Tags | Base Url For All Relative Url Within The Document |
<img> | HTML Image And Object Tags | Image |
<area> | HTML Image And Object Tags | Area Of An Image Map |
<map> | HTML Image And Object Tags | Image Map |
<param> | HTML Image And Object Tags | Parameter For An <Object> Element |
<object> | HTML Image And Object Tags | Embed An Object |
<ul> | HTML List Tags | Unordered List |
<ol> | HTML List Tags | Ordered List |
<li> | HTML List Tags | List |
<dl> | HTML List Tags | Description List |
<dt> | HTML List Tags | Term In Description List |
<dd> | HTML List Tags | Definition/Description Of A Term In Description List |
Final Thoughts
Understanding HTML doesn't have to be complicated. With the cheat sheet in this guide, you should identify and implement HTML tags for your web pages.