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 ImportanceIn 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
