HTML, short for HyperText Markup Language, is the programming language at the heart of the World Wide Web. Computer scientist Tim Berners-Lee created HTML in 1989 to help colleagues cross-reference their research. In 1991, the first website went live — a page written by Berners-Lee explaining how to use HTML. To say it caught on rapidly is an understatement. Within just a few years there were millions of sites, all written in HTML.
These days, HTML has expanded to embrace Cascading Style Sheets (CSS), which handle a page's formatting and visual appearance, and morphed into a semantic language designed to be read and understood by machines and humans alike.
Any business that publishes content on the web can benefit from some HTML know-how, whether to comprehend all the ways a web page can display content, to improve communication with web developers and designers or to be able to make modifications without outside help.
What Is HTML?
HTML provides the basic structure for web pages. It consists of a series of commands, known as tags, that instruct a browser on how to interpret content. For example, specific HTML tags indicate a page’s headline, where a new paragraph begins, when text should be boldfaced or italicized and when to link to another document.
HTML also provides the technical underpinning for a web page with a tag that notes it was written in HTML. It establishes clear-cut sections that identify the page’s “head” — where browsers can find meta information and links to scripts and style sheets — and the “body,” meaning the content to be displayed. Importantly, HTML tags have a significant influence on the way search engines index web pages. And unlike many other programming languages, when confronted with an unknown tag, HTML will simply ignore the tag and display the page.
In the 31 years since the first HTML website launched, the language has undergone many changes and is now in Version 5. In addition, most HTML documents now also contain formatting applied via “style sheets” written in CSS. Embedded in the HTML, CSS specifies the look and feel of a web page, such as background and font colors. Another programming language, JavaScript, is used for creating dynamic, interactive elements.
Key Takeaways
- HTML is a simple language for creating pages that are viewable on the web.
- With the arrival of CSS in 1994, HTML began to transition away from design specifications to primarily address a web page's structure.
- HTML and CSS have grown in tandem over the years and can now render very sophisticated sites on any screen size.
HTML Explained
The web requires three elements to function: a web server, a web browser and content. HTML is a simple language for writing the content. A page written in HTML is placed on a server and can then be accessed by a web browser. HTML provides the basic functionality for tagging content to display as headlines, subheadings and bulleted lists, for example, as well as for linking one document to another.
To truly understand why HTML is so powerful, consider that it was born into an environment already burgeoning with online services like Prodigy, AOL and CompuServe — all proprietary and closed systems. But since its inception, HTML has been an open system, and in 1993 CERN, the European research organization where HTML was invented, officially put the language into the public domain.
Origins of HTML
HTML was created in 1989 by Tim Berners-Lee, a computer scientist at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland. Berners-Lee observed a need for researchers to be able to share documents; in response, he wrote the original specification for HTML, as well as the first browser and server. The specifications for HTML drew heavily from an earlier markup effort called SGML, or Standard Generalized Markup Language.
The innovation HTML brought to the table was its ability to connect one document to another using a “hyperlink.” This enabled HTML's original audience — scientists — to not only reference another piece of research, but also make it “clickable,” taking readers to the linked document. This eliminated the need for readers to find the referenced research on their own.
What Is HTML Used For?
HTML is a markup language that uses tags for encoding web pages and document elements, such as text and images. It continues to serve the basic need it was invented to satisfy more than 30 years ago: to instruct web browsers on how to render digital content to anybody with an internet connection.
Today, any organization or individual can use HTML to publish content. It has also given rise to entire industries, such as the multibillion-dollar marketing-tech sector.
The Evolution of HTML
Early HTML pages were rudimentary, offering little more than formatting tags and hyperlinks; the original specification did not even support images. That innovation was created by Mosaic, the first commercial browser, which was introduced in 1993. It wasn't until the late 1990s that now-standard elements like forms and tables emerged, and then another decade elapsed before video became part of the specification.
Initially, HTML simply specified a web page's overall structure and design. For example,
the main headline would be tagged as <h1> and subheadings as
<h2>. However, HTML's styling capabilities were limited, leading to
the development of another language, Cascading Style Sheets (CSS), to govern web page design
elements such as a page's layout and font. Indeed, as browser support for CSS grew,
HTML tags began to be less about the design elements and more about the meaning of the
encoded content. In other words, where once the <h1> tag boldfaced a
page's main headline, now it signified that the page's main headline was an
important piece of text.
HTML Markup
HTML consists of numerous markup tags that surround pieces of content to specify how a web
browser should display them. For example, six levels of heading tags —
<h1> to <h6> — convey the relative importance of
headlines and subheadings and determine font size. Other tags indicate individual
paragraphs, display lists, insert images, create forms, create hyperlinks to other documents
and much more. Importantly, search engines use these tags to determine what a piece of
content is about, how to rank it and how to present it on a search engine results page
(SERP).
Semantic HTML
Initially, basic HTML tags dictated the style of a particular piece of content. For example,
a headline with an <h1> tag told a web browser to render the text larger
than a subheading tagged as an <h2>. But the inclusion of style sheets
several years later separated a web page's overall structure from the content's
appearance.
This was when the idea of “semantic HTML” emerged. Semantic HTML tags and
elements clarify
the meaning of HTML code. For instance, <h1> indicates that it's the
most important heading tag.
The 2008 arrival of HTML5, the fifth generation of HTML, introduced many new semantic HTML
elements. One that illustrates the value of semantic HTML is the
<article>...</article> tag, which surrounds the main
content of a web page and makes perfectly clear what the section contains. Before the
<article> tag, developers could mark that central content in any number
of ways — if they marked it at all.
Semantic HTML is also valuable from a search engine optimization (SEO) perspective. When a
search engine reads a web page and encounters a tag like <article>, it
will be better able to index and rank the document.
Basics of HTML
There are hundreds of HTML elements, used for a variety of content and structure purposes. The following table contains some of the more common elements and what they designate. The ellipses represent where content is placed.
<html>...</html>
|
Web pages are completely encapsulated in the tag, which defines the entire document as written in HyperText Markup Language. |
<head>...<head>
|
Web pages generally have a <head> section at the top
of the page where linked resources, such as JavaScript and CSS files,
are referenced. |
<title>...<title>
|
The official title of a page is contained within the
<title> tag. The content of this tag displays in the
browser tab and is most often used by search engines for display. There
should be only one <title> tag per page.
|
<body>...</body>
|
The <body> tag tells the browser that this is the
part of the page where viewable text occurs. |
<h1>...</h1>
|
There are six heading tags, each displaying text slightly smaller than
the one before it. These are structural elements, indicating level of
importance. Best practice is that each page should have one
<h1> tag, indicating the main headline.
|
<p>...</p> |
The paragraph tag tells the browser that a chunk of text is a paragraph; the browser will automatically put a line space before and after it. |
<br> |
The line break tag is similar to the return key on a standard keyboard:
It adds a single line break where indicated, with no extra line of
space. The <br> tag does not require a closing tag.
|
<a href="URL">...</a> |
The basic syntax for a hyperlink is to surround the link text with an
anchor, or <a>, tag. The destination URL of the link
goes inside “href,” which is an attribute of
the anchor
tag. |
<b>...</b>
|
The <b> tag (generally replaced by the
<strong> tag) boldfaces text.
|
<i>...</i>
|
These tags provide emphasis in the form of italicized text. |
HTML5, released in 2008, added many new tags, helping HTML further evolve as a content and
structure system. One example is the <address>...< /address> tag,
which is used to surround an email address, URL, physical address, phone number, social
media handle or other contact information for the author or owner of a document. Also worth
noting: Design elements can be applied to HTML elements via CSS.
HTML Elements
An HTML element typically consists of open and close HTML tags, with content between the two.
However, some HTML elements, referred to as empty elements, don't require an end tag,
such as the line break <br> and image-inclusion <img>
tags.
All HTML elements can be nested inside other HTML elements. For example, the
<html>...</html> tags that surround every web page written in HTML
have all HTML elements nested within the pair. Some HTML elements require other HTML
elements nested within them. For example, the <ul>...</ul> tags,
which designate contents as a list, would make no sense without the nested
<li>...</li> tags, which define each item in the list. Similarly,
the <table>...</table> element has its own strict set of elements
that must be inside of it to delineate each row (<tr>...</tr>),
each header cell (<th>...</th>) and each body cell
(<td>...</td>).
Even so, there are typically few requirements regarding the order of HTML elements —
one
exception is that the <head>...</head> tags must be nested just
inside the <html>...</html> tags.. Most HTML tags can be placed
anywhere on the page and still hold the structure component of HTML. For example, an
<h1>...</h1> tag denotes the headline of the page but can
technically appear anywhere on the page.
HTML elements are not case-sensitive. Generally, they're written in lowercase, but they
can also appear in all uppercase <ARTICLE> and mixed case
<Article>. Here is an example of a simple HTML-coded web page to better
understand how HTML elements work together:
<html>Title of the document
<head>
<title></title>This is a heading
</head>
<body>
<h1></h1>This is a paragraph.
<p></p>
</body>
</html>
HTML Headings
HTML has six heading tags. They are considered structural elements in that each
provides a reference to its relative importance. The first, and arguably most important,
heading tag is the <h1>. Best practices call for only one
<h1> tag on a page, and its content should be the page's main
headline.
The five remaining heading tags are
<h2>, <h3>, <h4>, <h5> and <h6>. Each one
indicates that the heading, referred to as a subheading, is less important than the one
before it. Generally, these tags are nested, meaning, a section of the page tagged as an
<h2> could have <h3> tags within it. Think of the
presentation as you would a traditional outline, where a main point
(<h2>) includes two subordinate points (<h3>), the
latter of which has two smaller points (<h4>). Of note, though most web
pages typically contain at least one <h1> and one
<h2>, neither is required.
HTML Paragraphs
Within the body of an HTML document, individual paragraphs are defined by the
<p>...</p> tags. Browsers interpret this tagging to mean a blank
line should be placed above and below the tags. Paragraphs are also considered
“block-level”
elements. More on that below, under “HTML Block & Inline.”
HTML CSS Styles & Formatting
HTML has evolved so that the HTML file dictates the content and structure of the web page, while CSS files dictate its formatting and visual appearance. They work together to render what viewers see on the web.
A CSS file is incorporated into an HTML page via a “link” reference. The CSS file is generally stored on the same server as the HTML page, though it can be pulled from any web-connected server. The code looks like this:
<link rel="stylesheet" "href=/css/bootstrap.min.css">
CSS can be added to a web page in three ways:
- As a separate CSS file referenced in the
<head>of a web page. - Within the web page itself, encased in
<style>tags. - Written as an attribute to an individual HTML tag.
In all three cases, there is a tag within the HTML and a corresponding instruction within the CSS for how to display the tag.
For example, let's look at a common <p> tag, which indicates the
start of a new paragraph within a document. In the HTML file, it might be written as:
<p>This is a new paragraph</p>.
p{
font-size: 1.1em;
color: #00000;
line-height: 1;
}
or
<p style="font-size:1.1em;color: #00000;line-height:1;">This is a new paragraph</p>
To comprehend the difference between these methods, it's important to understand the
meaning of the word “cascading” in Cascading Style Sheets. When encountering a
CSS element,
browsers always look to the most recent command to determine what style to use. So the font
size for a <p> styling in a tag overwrites any previous CSS commands.
Associating a CSS command at the tag level will add styling only to that tag, while a
<p> styling in a separate CSS file or as a <style>
section of a web page will apply styling to every paragraph.
Styling and formatting can also be handled by associating a “class” with a
specific HTML tag.
This is particularly useful if a developer does not want all of a particular tag formatted a
certain way. Say the designer wants the first paragraph on a page to be in all uppercase.
The web developer could append the first <p> tag on the page with the
class “intro” (<p class="intro">...</p>).
The associated style command would refer to only this one paragraph in the following way:
p {
font-size: 1.1em;
color: #00000;
line-height: 1;
}
p .intro {
text-transform: uppercase;
}
Everything tagged with the paragraph (<p>) tag is impacted by the first
command in this sample CSS. In this case, the first command declares the font size, font
color and line height. Any paragraph with the “.intro” class attached would
first inherit
the styling already set for all paragraphs and amend it with the instruction from the second
command to style in all uppercase letters.
CSS brings to HTML an incredibly robust number of sophisticated styling abilities. The best practice is to keep the CSS styling as centralized and orderly as possible.
And remember: In case of a conflict, the latest CSS command wins.
HTML Links
The first big innovation HTML provided was the ability to link one document to another for reference purposes — primarily so scientists could point to relevant documents within their content and readers could easily click over to them. This is what “hypertext,” the “HT” part of HTML, means.
The syntax for a link has barely changed since its original specification. The text to be
linked (link text) is surrounded by the <a href=" ">...</a> tags,
and the URL of the target document is placed within tags. For example, this is what a link
to the NetSuite home page looks like:
<a href="https://www.netsuite.com/">NetSuite</a>.
Various attributes can be added to the basic tag syntax. For example,
target="_blank" tells a browser to open the linked document in a new window.
The rel=" " attribute defines the relationship between the current document and
linked document — for instance, rel="author" specifies that the link
should go
to a document about the author.
HTML Images
HTML originally did not provide for the inclusion of images. That innovation came about with
the launch of NCSA Mosaic, the first commercial web browser, in 1993. Since then, images
have been incorporated into web pages as references. To do that, the
<img> tag makes a reference to an image that has been uploaded and has
its own URL. The tag defines the location of the image and instructs a web browser to
display the image within the document, where the tag is placed. Here is an example of an
image tag:
<img src="https://www.netsuite.com/portal/assets/img/business-articles/data-warehouse/bnr-data-mart.jpg">
The <img> tag doesn't require an ending tag. It is a standalone, or
empty, tag. That said, an <img> tag can include attributes that define
the image's display, such as width, height, align and border. Another attribute, alt
(for “alternative text”), calls for text to describe the image should it not
display
properly, for example, or to be read aloud for sight-impaired visitors. The added text
provided with the alt attribute is also important for SEO.
HTML Tables
Tables created in HTML present text in a spreadsheet-like display, with columns and rows. There are four basic table tags:
<table>...</table> |
All tables are surrounded by the <table> tag, which
tells the browser to display the content as a table. All other table
tags are nested inside the <table> tags. |
<tr>...</tr> |
Each new row in a table is encapsulated by the <tr>
tag. |
<th>...</th> |
The <th> tag indicates a new header cell, which
explains the content of a row or column. Default HTML generally displays
these in boldface and centered, but this treatment can be overridden by
a CSS tag. |
<td>...</td> |
Each item, or cell, in the table needs to be surrounded by the
<td> tag. These cells are nested within a
<tr> tag and defaulted to display as left-aligned,
normal text. As with the <th> tags, formatting can be
modified through CSS.
|
The <td> tag has several optional attributes to account for cells that
need to span across multiple columns or rows, or be aligned in specific ways:
colspan="…"indicates the number of columns a cell should span.rowspan="…"indicates the number of rows a cell should span.align="…"indicates how the content in a cell should be positioned horizontally: right, center or left.valign="…"indicates how the content in a cell should be positioned vertically: top, middle or bottom.
It’s worth noting that code for a table can become difficult to read and manage, especially when colspans and rowspans are included. In addition, HTML tables have mostly fallen out of favor because their rigid and complex structure does not work well with different screen sizes, especially those on mobile devices.
HTML Lists
HTML supports two types of lists: “ordered” and “unordered.” In an ordered list, each item is numbered; in an unordered list, each item has a bullet point before it. Lists can be nested to present themselves as an outline. List types can be combined so that, for example, an ordered list can be nested within an unordered list and vice versa.
<ol>...</ol>
|
A list is surrounded by a main command to indicate whether it's
ordered (<ol>) or unordered
(<ul>).
|
<li>...</li>
|
Each item on a list is surrounded by the <li> tag. If
the list is ordered, the tag automatically numbers the list. If
it’s an
unordered list, the tag places a bullet point at the beginning of each
item.
|
In practice, the code for a combined list may look like this:
<ol>The first item in a numbered list
<li></li>The second item in a numbered list
<li></li>A bulleted nested list, item 1
<ul>
<li></li>A bulleted nested list, item 2
<li></li>The third item in a numbered list
</ul>
</li>
<li></li>
</ol>
This snippet of code shows an ordered (numbered) list with a bulleted (unordered) list nested inside it.
HTML Block & Inline
HTML elements are either block- or inline-level. A block-level element, such as a paragraph tag, forces an extra line of space before and after it, and extends the entire width available to it. An inline-level element, such as a bold tag, displays within the running text, with no added spacing.
| Block-Level HTML Elements | Inline-Level HTML Elements | ||
|---|---|---|---|
<address> |
<h4> |
<a> |
<map> |
<article> |
<h6> |
<acronym> |
<output> |
<aside> |
<h6> |
<acronym> |
<output> |
<blockquote> |
<header> |
<b> |
<q> |
<canvas> |
<hr> |
<bdo> |
<samp> |
<dd> |
<li> |
<big> |
<script> |
<div> |
<main> |
<br> |
<select> |
<dl> |
<nav> |
<button> |
<small> |
<dt> |
<noscript> |
<cite> |
<span> |
<fieldset> |
<ol> |
<code> |
<strong> |
<figcaption> |
<p> |
<dfn> |
<sub> |
<figure> |
<pre> |
<em> |
<sup> |
<footer> |
<section> |
<i> |
<textarea> |
<form> |
<table> |
<img> |
<time> |
<h1> |
<tfoot> |
<input> |
<tt> |
<h2> |
<ul> |
<kbd> |
<var> |
<h3> |
<video> |
<label> |
|
HTML Classes
To connect with CSS design elements, HTML tags are assigned a “class” type.
Classes take the
form of an attribute associated with a tag and can be any word or phrase a developer
chooses. For example, <p class="intro"> could indicate that the text in a
paragraph should be displayed in all uppercase letters. Another example: A CSS file
associated with an HTML document could assign the default font size of a
<p> tag at 1em, but any <p> tag that includes
class="intro" should instead have a font size of 1.25em, or 25% larger than the default.
Classes are very powerful and can be used to assign any kind of design instruction to almost any HTML tag.
Responsive HTML
As more people began accessing the internet with their mobile devices, the need for page designs to accommodate smaller formats became apparent. Initially, many publishers created second versions of their websites that would display only if a mobile device was detected. However, this soon proved impractical and expensive. Not only did every piece of code and every change need to be rewritten and managed multiple times, but the plethora of small screen sizes meant there were just too many options for developers to accommodate.
The opposite scenario — but same issue — began to hold true, too, as people started to access the internet on larger screens, such as televisions.
The introduction of CSS2's “media-queries” component, released in mid-1998 but not fully adopted by browsers for a few more years, provided a solution called “responsive HTML.” Media-queries, also known as @media, in CSS files, let developers create styles based on minimum/maximum widths of a web page. Commands dictate how a style should be handled, based on the width of a browser window. For example, for content to be readable on a smaller screen, text generally needs to be slightly larger and with more space between each line than on a 15-inch laptop monitor.
CSS media-queries handle this. In the following example, the first media-query dictates that for a screen size with a minimum width of 800 pixels, paragraphs will display at the font size of 1.1em, in the font color black (that's what #000000 means) and at a line height of 1. The second media-query instructs that if the screen is no wider than 480 pixels, paragraphs should display at a slightly larger font (1.25em), still in black, and with a 20% increase in line height.
@media (min-width:800px) {
p {
font-size: 1.1em;
color: #000000
line-height: 1;
}
}
@media (max-width: 480px) {
p {
font-size: 1.25em;
color: #000000
line-height: 1.2;
}
}
This structure grants flexibility. In the example above, the first media-query is applied when the browser window is 800 pixels wide or larger. Similarly, the second media-query works on all screens up to a maximum width of 480 pixels.
The creation of the HyperText Markup Language, or HTML, in 1989 ushered in a new decade during which the number of online users proliferated — a trend that continues to this day. With its simple and flexible tags, the HTML coding language provides the basic structure for web pages, consisting of a plethora of commands that tells a browser how to interpret the page’s content. While originally viewed as a formatting system, the arrival of Cascading Style Sheets, or CSS, enabled HTML to offload design elements and pivot to life as a semantic language.
Award Winning
Warehouse Management
Software
HTML FAQs
Q: How can I learn HTML?
A: HTML can be self-taught, with the seemingly unending number of online and in-person tutorials, videos, classes and books available. Then it's time to practice: The best way to learn HTML is to try building a simple web page. Save a text or Word document as an HTML file, and then open it through a web browser to view what you created. Then modify, save and reload to quickly see what HTML can do and how easily it can be modified.
Q: What are tags and attributes?
A: HTML tags tell browsers how to display the different elements of a web
page. For example, <h1>All About HTML</h1> tells the
browser that “All About HTML” is the main headline for a page. Some HTML tags
have
attributes associated with them. For example, the anchor (<a>) tag paired
with the “href” attribute creates a hyperlink. Other attributes can instruct the
hyperlinked
page either to open in another tab or to download the content.
Q: Why learn HTML?
A: Any business that wants to publish on the internet will benefit from learning basic HTML. It's a must for web developers and designers, of course, but it's also a useful skill for those who use content management systems. Understanding the basic principles can help amateurs figure out why a piece of content is not rendering properly.
Q: What is HTML used for with an example?
A: HTML is used to publish content on the web. HTML tags specify the way different elements of a page should display. This example shows a very basic HTML web page, with the HTML tags in red.
<html>Title of the document
<head>
<title><title>This is a heading
</head>
<body>
<h1><h1>This is a paragraph
<p><p>
</body>
</html>
Q: Is there a way to add developer notes to a web page?
A: When coding in HTML, developers often include notes, or comments, that
are invisible to the display of the web page. Any text that is preceded by
“<!—” and followed by
“—>” will be hidden from sight.
Similarly, within CSS, elements surrounded by “/*” and
“*/” will
be hidden. These two formats can also be used to prevent certain code from executing. Such
hidden code is referred to as being “commented out.”
