HTML is the building block of the internet.
Nearly 95% of all websites utilize it, in one form or another.
It is simple, yet flexible and powerful enough to craft pretty, albeit static, web pages.
If you are curious to discover some of its building blocks, here's a collection of the most basic HTML tags:
The Basics
The tags that follow enter at the very beginning of the HTML tag and have informative, rather than building functions, i.e. they don't alter what the end-users
<!DOCTYPE html>
HTML Declaration. Informs the browser that the document type is HTML. Always start HTML documents with this tag.
<html></html>
Specifies the root element. This element encompasses all other elements of the document.
<head></head>
Contains or links to metadata about the document, like the title, meta tags, scripts, and stylesheets. Place it before the body element.
<body></body>
Defines the visible portion of the HTML document. It contains text, images, lists, tables, etc. Limited to one body element per document.
HTML Document Metadata - Contained in the <head> Element
Document metadata is quite important for SEO and overall functionality of the website.
<title></title>
Defines the document title. Browsers display this as the title of the page in the title bar.
<style></style>
Contains style information about the document. Using stylesheets is usually preferred to the style tag.
<link></link>
Links the HTML document to another document. Is usually used to link to stylesheets.
<meta></meta>
Specifies other metadata about the document (e.g., page description, keywords, character encoding, etc.)
Sectioning Elements
With the following tags you can create sunheadings and break lines.
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
Defines headings in the document. <h1></h1> is the highest level of heading (usually used once per document), while <h6></h6> is the lowest.
<br>
Adds a line break (carriage-return).
Text Block Elements
The tags that follow help structure your text.
<p></p>
Defines a paragraph.
<blockquote></blockquote>
Marks a section of the text as an extended quotation. The text is typically rendered as indented from both sides. The reference to the text which follows is usually marked with a <cite> tag.
<cite></cite>
Marks a section of text referencing a previously cited work. The text within the <cite> tag should contain the name of the referenced work. Often embedded into the <footer> tag.
<div></div>
Selects a block of text for styling. Usually styled with CSS using an “id” or “class” attribute. The section of text is rendered as a separate paragraph by the browser.
<ul></ul>
Creates an unordered list.
<ol></ol>
Creates an ordered list
<li></li>
Adds a new item to an ordered or an unordered list.
Inline Text Elements
The tags listed below will allow you to format your text through emphasis, bolding, italics, and so forth.
<strong></strong>
Emphasizes a section of text for strong importance. Usually represented as bold text by browsers.
<b></b>
Brings element to attention (creates bold text). Using <strong> instead of <b> tag is usually preferable.
<em></em>
Emphasizes a section of the text for stress. Usually rendered in italics. <em> tags can be nested for added emphasis.
<i></i>
Creates text in italics. Using the <em> tag instead of <i> is usually preferable.
<s></s>
Creates text with a strikethrough.
<span></span>
Selects a section of inline text for styling. Does not obstruct the paragraph.
<a></a>
Creates a hyperlink. The link is specified by the “href” attribute. The hyperlink can lead to another page, a location on the same page, an email address, etc.
Image Content
Images are an intrinsic part of most websites and HTML has the right tags for managing them.
<img>
Embeds an image into the document.
<map></map>
Maps a clickable part of an image. The part usually links to another location.
<area>
Defines which area of the map is clickable. Is a child of the <map> tag.
Scripting
Now, HTML is awesome and grants a lot of web design possibilities, but it can structure and handle only static content. For more advanced functionalities, scripting languages like JavaScript come in handy.
<script></script>
Links to or embeds executable code. Typically used to execute JavaScript code in the document.
<noscript></noscript>
Displays alternate content if the code in the <script> tag fails to execute.
Tables
Tables are a great way to structure data on a web page. Here are the most popular HTML table tags.
<table></table>
Creates a table.
<caption></caption>
Creates a caption for the table. Is always the first child of the <table> element.
<thead></thead>
Defines a group of rows within the head of a table.
<tbody></tbody>
Defines a group of rows within the body of a table.
<tfoot></tfoot>
Defines a group of rows summarizing the content of the table.
<colgroup></colgroup>
Defines a group of columns within a table.
<col></col>
Defines a column within a table. Is usually used as a child of the <colgroup> element. Used to change the semantics of a particular column (e.g., change its color).
<tr></tr>
Adds a row of cells to the table. The row can contain <th> or <td> elements.
<th></th>
Adds a cell which functions as a header of a group of cells.
<td></td>
Adds a data cell to a row (a typical table cell).
Forms
The HTML tags for forms are numerous With them, you can create a variety of interactive elements to capture data and to improve the on-page experience.
<form></form>
Adds a form to the document.
<label></label>
Creates a caption. Generally used to easily associate a caption with an input element by using the “for” and “name” attributes.
<select></select>
Creates a dropdown list which allows one value to be selected.
<option></option>
Adds a value to the <select> list. Options can be grouped together within the list with the <optgroup> tag.
<meter></meter>
Adds an element that visually represents a fractional value or a scalar value within a specified range.
<button></button>
Adds a clickable button. Can be used anywhere in the document, but is often found in forms.
<input>
Adds an element that allows input of data. There are many types of input elements, selected with the “type” attribute.
Common Input Types
Here are some of the most useful input elements.
Checkbox
Adds a checkbox. The checkbox can be checked or unchecked by default, depending on whether the “checked” boolean is present
Adds a textbox. The form only allows form submission if the text follows the format of an email address.
Date
Adds a calendar that allows specifying a date.
Password
Adds a textbox. The value entered into the textbox is obscured. “Minlength” and “maxlength” attributes are often used to set the minimum and maximum character length of the value.
Radio
Adds a radio button. Only one radio button in a group with the same “name” attribute may be selected.
Submit
Adds a button that submits the form.
Text
Adds a textbox that allows single-line textual input. Any line breaks are removed.
Button
Adds a button with no predefined function.
Reset
Resets all input elements to their original value.
File
Adds a browse button that allows file upload.
HTML5 Tags
HTML5 differs from the previous iterations of the markup language, allowing for
Semantic Tags
Semantic tags give the browser and search engines information about the role of a section of content. They section blocks of text, but they also help browsers with displaying parts of a page properly and help search engines with understanding the purpose of sections of content.
<section></section>
Defines a thematically grouped section of the document, such as header, footer, etc. A section typically contains at least one heading.
<article></article>
Defines an independent part of the document. It is typically on a lower level than the <section> element, but the content in it should make sense standing alone (without the rest of the document).
<header></header>
Places introductory elements into the header. Often used for navigational elements, website logos, search bars, etc.
<footer></footer>
Places a section of the text into the footer. Usually used for references to other works or links to relevant content.
<main></main>
Marks the most important section of the document.
<aside></aside>
Defines content that will be put to the side. Usually used for creating sidebars.
<nav></nav>
Marks a section of a document containing navigational elements (e.g. homepage button).
<mark></mark>
Highlights a section of text.
<details></details>
Creates a widget that can be toggled (opened) to display the text in the tag.
<summary></summary>
Used as a child of the <details> element. The summary is the text displayed by the <details> element before being clicked. When clicked, the <details> element expands to display the text.
<figure></figure>
Used to group an image together with its corresponding caption.
<figcaption></figcaption>
Child of the <figure> element. Used to specify a caption (explanation) for a visual element.
Media Embedding
These tags let browsers display other file types without having to rely on plugins.
<audio>
Embeds an audio file into the document.
<video>
Embeds a video file into the document.
<embed>
Embeds an external piece of content or an interactive application into the document.
Branko is a round-the-clock tech geek and loving it. His ideal vacation destination is the Akihabara District (or really any place he can take his computer). If there’s a server out there, count on him to find out what it’s made of… and tell you all about it.
