Last Updated: 31 December 2022

📊 Table of Contents

You’ve probably heard of it before...

HTML stands for Hypertext Markup Language and is the basis for every website on the internet. The foundations of HTML are rooted in XML: a format and specification for documents allowing them to be both human and machine readable.

HTML consists of a series of elements and describes the structure of a web page. All the elements tell the browser how to display the content. Each element label that piece of content as a “heading”, “paragraph”, “link” etc.

🧰 The DOM

For every webpage, a tree of HTML elements is generated. This tree is called the DOM (Document Object Model), and its structure outlines how the webpage will look and what elements are parents/children/siblings of each other. Whenever you try to reference and modify a certain element, the DOM is searched to find the desired element.

For writing plain HTML, the DOM tree isn’t used much. But, for styling elements with CSS or modifying HTML through JavaScript, the DOM structure is crucial.

📦 What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

Here are some basic HTML Tags:

<h1>, …, <h6> - Headers, where the 1-6 signify different heading levels/sizes
<p> - Paragraph for placing text of a webpage
<div> - Divider element for breaking up different groups of content
<ol>/<ul> - Ordered (123, abc, etc) and Unordered (bullet points) list elements
<li> - List items, nested inside of <ol> or <ul> elements
<a> - Link elements to other pages or websites
<img> - Image elements