HTML: HyperText Markup Language – A simple look

HTML letter tiles on a grey surface

On this Page

Page Sections

Page Sections

Before going into the core of HTML, let’s start from the nuts and bolts.

HTML = Hyper Text Markup Language

Hyper = Extensive (i.e., an Extension of another thing)

HyperText = ExtensiveText (i.e., a text that acts as an extension of another text)

HyperSpace = ExtensiveSpace (i.e., a space that acts as an extension of another space)

HyperLink = ExtensiveLink (i.e., a link that acts as an extension of another link)

Markup = Annotate (i.e., a note added to a piece of writing)

Text Markup = Note added to a text to help typesetters/computers understand the type of text the marked-up text is.

So, What is HTML?

HTML (HyperText Markup Language) is an Extensive Textual Annotation Language used to annotate documents that a web browser will display. It is these annotations that help web browsers understand how to display a document.

Plain Text Example

my father’s name is emmanuel.

The text above is a plain text with no markup.

Markup Text Example

[m]y [[father’s]] [name] is [[emmanuel]].

The text above is a Markup Text, where the square brackets represent a Markup Language.

Note that a Markup language can be a company-defined language, created for effective communication with its typesetters on the specific way to display the company’s text.

In other words, a Markup doesn’t have to be in the public domain before it can be called a Markup language. For instance, the markups, in the example above, have been specially crafted for this article. But guess what? It is still a Markup language!

Furthermore, based on my chosen editorial guideline, the square-bracket markups, in example 2 above denote:

[ ] Orange Brackets = UPPERCASE

[ ] Blue Brackets = Bold

[ ] Purple Brackets = Italics

Hence, with the text marked up adequately, a typesetter can now easily render the text as:

My FATHER’S name is EMMANUEL.

HTML Example

<h1>Home Design</h1>

<p>
The Home Design for <em>John’s</em> family; which will cost a Total of
<strong>3 Billion Pounds</strong> only.
</p>

The text above is a HyperText Markup Language (HTML), where the tags (i.e., <tagName>) are Markups that relate the text’s display specification to browsers.

Based on the HTML’s design (editing) guideline, the tags above denote:

<h1>…</h1>		= Heading 1
<p>…</p>		= Paragraph
<em>…</em>		= Emphasis
<strong>…</strong>	= Strong Importance

In summary

HTML is an extension of plain texts. That is, it is a note to browsers about a document’s data. Thus, when web browsers read the tag, they understand the appropriate way to display the annotated text.

Useful HTML Resources

Below are links to other content containing valuable information on HTML.

  • The <b> vs. <strong> article by MDN is a good read on the difference between the Bring Attention To <b> tag and the Strong Importance <strong> tag.
  • The <i> vs. <em> article, also by MDN, explains the difference between the Interesting Text <i> tag and the Emphasis <em> tag.
  • Learning Typesetting is a fascinating short video on Typesetting.

Credit

HTML keyboard key photo by Miguel Á. Padriñán

Last Updated on October 15, 2020 by Oluwatobi Sofela

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on pinterest
Pinterest
Share on linkedin
LinkedIn