Rick Pomalaza's Dev Blog

1. Introduction

codes on tilt shift lens

The concept of markup languages predates the digital era, with analog equivalents existing in many forms in the past, such as typesetting instructions used in printing, and tablature in music. However, the advent of computers and the internet led to the development of markup languages tailored specifically for digital content creation and documents meant for distribution on the web.

HTML is perhaps the most well-known markup language in the world and forms the backbone of the World Wide Web. It enables the creation of interconnected documents containing text, images, links, and other media, which can be accessed and viewed through specialized software called web browsers.

Other common examples of markup languages include:

  • XML (Extensible Markup Language): A versatile markup language used for storing and transporting data in a structured format. It’s commonly used in data exchange and configuration files.
  • Markdown: A lightweight markup language that is often used for creating simple, formatted text documents. It’s widely used for writing documentation and README files.
  • LaTeX: A markup language commonly used in typesetting documents, especially in academia and scientific fields. It is often used in Math documents at universities.

As an example of markup, this is what I used for the bullet point list above:

<p>Other common examples of markup languages include:</p>
<ul>
<li><strong>XML (Extensible Markup Language)</strong>: A versatile markup language used for storing and transporting data in a structured format. It’s commonly used in data exchange and configuration files.</li>

<li><strong>Markdown</strong>: A lightweight markup language that is often used for creating simple, formatted text documents. It’s widely used for writing documentation and README files.</li>

<li><strong>LaTeX</strong>: A markup language commonly used in typesetting documents, especially in academia and scientific fields. It provides precise control over document formatting.</li>
</ul>

Don’t worry if you don’t fully understand this yet. This is only to give you an idea of what markup looks like when we look behind the curtain.

HTML Tags

Developers can format and structure things on a webpage through the use of “tags” which are words enclosed within angle brackets (< and >).

HTML tags are the building blocks of web documents and are used to define the structure and formatting of elements. Most tags come in pairs: an opening tag and a closing tag, with content sandwiched between them. Here are a few examples of tags used to format text:

<span style="color:red">This text is red</span>

This text is red

<strong>Hi, this is a stronger, bolder text!</strong>

Hi, this is a stronger, bolder text!

<center>This text is centered on the page!</center>

This text is centered on the page!

Creating a Valid HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   
</body>
</html>

A valid HTML document requires:

  • A doctype declaration
  • An HTML tag
  • A head tag
  • A title tag
  • A body tag
  • The <!DOCTYPE html> declaration defines that a document is an HTML5 document. It is information to the browser about what document type to expect. Every document must start with a doctype declaration.
  • The <html> element is the root element of an HTML page and follows after the doctype. It is the start of the actual HTML portion of the document.
  • The <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
  • The <title> element specifies a title for the HTML page (which is shown in the browser’s top bar or in the page’s tab)
  • The <body> element contains the document’s body, and all the visible contents, such as headings, paragraphs, images, links, tables, lists, etc.

Saving an HTML Document

Once you have a text file written with tags inside of it, you can turn it into an HTML document simply by saving it in the .html file type. So, for example, you could call it something like mywebsite.html on your computer.

The size of an HTML document can vary significantly depending on various factors such as the complexity of the content, the number of elements and tags used, the presence of multimedia assets (images, videos, audio), the inclusion of external resources (stylesheets, scripts), and any additional markup or metadata.

However, for a simple HTML document with basic structure and minimal content, the file size is typically quite small. A basic HTML document containing only text, headings, paragraphs, and a few links may be just a few kilobytes (KB).

HTML in the Larger Web Ecosystem

HTML’s role in shaping the modern internet cannot be overstated. It facilitated the creation of interconnected websites. With HTML, users were given the ability to browse, search, and access a vast array of information and services with just a few clicks.

HTML has evolved through various iterations, with HTML5 emerging as the latest major revision in 2014. HTML5 introduced new features and capabilities, such as native support for multimedia elements, improved semantics for structuring content, and support for mobile devices and responsive design.

While HTML provides the structure, it’s often used in conjunction with CSS (Cascading Style Sheets) and JavaScript to enhance the presentation and interactivity of web pages, forming the trifecta of core technologies for developing any application on the web.

Go back to HTML Course Page
Next Article