Hypertext Markup Language (HTML)

TL;DR

HTML (HyperText Markup Language) is a language used to create web pages. Some pages can be written directly in HTML, while others may use page builders or other tools in order to create web pages that also produce HTML outputs, which in turn can be read by browsers.

What does HTML mean?

HTML stands for HyperText Markup Language and it is the language used to create web pages. It uses markups to define and style elements. For instance, it can define fonts, colors, position, links etc. Even though most website builders don’t write directly in HTML, the final outputs that are read and interpreted by web browsers are in HTML format. This is why, when right clicking on any web page and selecting “View page source”, the first line of text in the resulting window should be <!doctype html>.

What is the structure of an HTML page?

While structures may vary, some of the elements you should find in any HTML are the following (with explanations in italic). Check this on any webpage by right clicking anywhere and selecting “View page source”:

<!DOCTYPE html>  - this shows the web browser that this is an HTML file it can read

<html lang="en"> - this shows the language in which the webpage is written

<head> - this marks the beginning of the head section, where general codes are placed

<title>Title of the page</title> - this is a meta tag showing the title of the page, which appears in the browser tab

<meta name="description" content="..." /> - this is used to describe what the page is about, for search engines

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=0" /> - this is a command telling how the web page should be displayed on various screen sizes

<meta name="robots" content="index,follow" /> - this tells the bots that crawl the page that they can index it and add it to search engine results

<link rel="stylesheet" type="text/css" href="/css/style/style.css”> - this connects the HTML to a CSS file, where more detailed styling for the text is placed

<script src="/js/random.js"></script> - this connects to a JavaScript file, used to run an action on the web page 

<link rel="canonical" href="https://yourpage.com"/> - if there are pages with similar content or the page can be found at more than one URL, this shows crawlers which URL is to be taken into account for authority purposes

</head> - this closes the head section

<body> - this opens the body section, where actual page content is placed

<div class="container"> - this opens a section called container, which usually creates the frame for content

<a href="https://yoursiteshomepage.com"><img class="navbar-brand-logo-normal" src="/images/logo.svg" alt="alt text" height="52" width="180"></a> - this is one way of placing a logo image which links to your homepage

<div class=”first-text”>These are the first words to actually display on your website</div> - some text that can be styled in the connected CSS file

...

</body>

up-arrow.svg