/ / HTML: HyperText Markup Language – A Simple Look

HTML: HyperText Markup Language – A Simple Look

ByOluwatobi Sofela Last modified:
HTML letter tiles on a grey surface

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.

Moreover, 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

Featured Image: HTML keyboard key by Miguel Á. Padriñán

Similar Posts