Web Development
HTML Course
CSS Course
JavaScript Course
PHP Course
Python Course
SQL Course
SEO Course

Complete HTML Course

What HTML is has already been established in the Web Development tutorial.
If you haven't gone through the tutorial, I recommend doing so before continuing with this tutorial.

To build websites, you should know HTML – the fundamental technology used to define the structure of a web page. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements, or even a new element that you define.

Basic HTML Concepts

What is DOM?

DOM stands for Document Object Model. It is a widely used API and defines the logical and standardized structure of documents, a hierarchy of elements and content from HTML or XML documents.

DOM was not initially specified – it emerged when browsers began to massively implement JavaScript.

DOM is a way to represent the web page in a hierarchically structured manner, so that programmers and users can more easily navigate the document. With DOM, we can easily access and manipulate tags, IDs, classes, attributes, or elements using commands or methods provided by the Document object.

Thus, the DOM structure is a hierarchy of objects, compatible with the JavaScript language or any object-oriented language.

Each element of a document can therefore be viewed as an object, each object having its own identity and functions.

When an HTML document is loaded into a web browser, it becomes an object (document object). Before the browser renders the page, it must create the DOM and CSSOM trees. As a result, we must ensure that the browser receives both the HTML and CSS code as quickly as possible.

How HTTP Works

HTTP provides a communication technique through which web pages can be transmitted from a remote computer to your own computer. If a request is made to a link or web address such as Example.com, then the host computer is asked to display a web page (e.g.: index.html).

In the first phase, the name (address) www.example.com is converted by the DNS protocol into an IP address. Then follows the transfer via the TCP protocol on the standard port 80 of the HTTP server, in response to the HTTP-GET request.

Additional information such as browser instructions, desired language, etc. can be added in the header of the HTTP packet. Following the HTTP-GET request, the server responds with the requested data, such as: pages in (X)HTML, with attached files like images, style files (CSS), scripts (JavaScript), but also dynamically generated pages (SSI, JSP, PHP, and ASP.NET).

If for some reason the information cannot be transmitted, then the server sends back an error message. The exact way this action (request and response) unfolds is defined in the HTTP specifications.

Navigation and Viewing Page Source

This is easily done by right-clicking on any web page and then clicking "View page source" from the context menu. The displayed code is the representation of the page in HTML language, but not only.

HTML in Action

Creating a simple page in Notepad++:

An HTML page is like a building:

🔧 Example: HTML Page

Description of Main Elements

DTD (Doctype Declaration)

Doctype Declaration

This declaration is needed to tell the web browser which version of HTML is being used, so it knows how to render the page content.

When rendering a document, the browser triggers Quirks Mode (compatibility mode). Quirks Mode is a mode of operation for web browsers such as Internet Explorer (IE), Firefox, and Opera, etc. Basically, Quirks Mode means that a relatively modern browser intentionally simulates many bugs found in older browsers.

Quirks Mode is triggered by doctype sniffing, also known as switching doctype. This means the browser inspects the beginning of an HTML document to see if it contains a valid doctype declaration according to specifications.

html lang="en" Tag

The html tag is absolutely necessary, while the "lang=en" attribute, which indicates the language used within the document, is not strictly required. Practically, an HTML page begins with the <html> instruction and ends with </html>.

Attributes provide additional information about HTML elements.

HTML attributes are special words used in the opening tag to control the behavior of the element. HTML attributes are a modifier of an HTML element type.

An attribute either modifies the default functionality of an element type or provides functionality to certain types of elements that cannot work properly without them. In HTML syntax, an attribute is added to an HTML opening tag.

Some attributes are specific to a particular element, while others are global (can be used for any element).

🔧 Example of Functional Attribute

The head Tag

This tag contains the page title between the <title> and </title> tags, the <meta> tags, and may include CSS code, scripts, and links to external files. Nothing from this section is displayed in the browser.

The meta charset="utf-8" Tag

Charset Parameter

☞ Meta tags are self-closing, meaning they do not require a closing tag.

The standard character encoding charset="utf-8" is required for every page and informs the user agent (web browser) about the data format used, allowing it to choose the appropriate encoding to render the site. HTML5 uses only UTF-8 (Unicode).

This encoding system is the successor of the ASCII code, which had 128 characters, and the ISO-8859-1 code with 256 characters (used by HTML4).

UTF-8 is a character encoding method that can be as compact as ASCII but can also include any Unicode characters (with an increase in file size). UTF stands for Unicode Transformation Format. "8" means it uses blocks between 1 and 8 bits to represent a character.

Encoding is the process of converting data from one form to another. Since computers only recognize binary data, text must be represented in a binary form.

☞ Some browsers (e.g., Chrome) automatically fix incorrect encodings, so depending on the browser you use, you may not see this issue. However, you should still set a UTF-8 encoding on your page to avoid potential problems in other browsers.

We can add a whole series of other meta tags in the document's head section, each with its own role, more or less important:

<meta name="author" content="Page author's name">
<meta name="description" content="Most accurate description of the page content.">

There are also meta tags that are ignored by search engines, such as the <meta name="keywords" content="keyword 1, keyword 2, etc."> tag. This tag was abused and aggressively used to influence search engine results. Therefore, avoid using this tag!

Complete list of meta tags

ASCII - American Standard Code for Information Interchange

The standard ASCII code encodes characters using 7 bits, allowing the encoding of 27=128 characters. Not too many! In fact, only letters from the English alphabet, digits from 0 to 9, punctuation marks and operators, as well as other symbols are encoded.

Characters specific to other Latin alphabets (so-called diacritic letters, such as ă Ă î Î â Â ș Ș ț Ț ş Ş Ţ ţ), as well as letters from other alphabets: Cyrillic, Hebrew, Arabic, Chinese, etc., are completely missing.

For these, extended ASCII or UNICODE can be used.

For example, the ASCII code for uppercase M is 77 (ALT + 77 : M). Most computers use ASCII codes to render text, which makes it possible to transfer data from one computer to another.

The ASCII code is used to translate the computer's encoded text into readable text. ASCII is used as a method to give all computers the same language, allowing them to share documents and files.

The meta name="description" content="..." Tag

It used to be very important for SEO, but now search engines are much more sophisticated, and because it was abused in the past, it no longer holds such importance.

The title Tag

The page title is mandatory to avoid displaying the default browser title "Untitled Document".

The body Tag

Body contains the visible part (body) of a document and is a sibling to the Head tag, being on the same level of importance.

Adding Custom Icons

To enhance the design of the site, you can add references to custom icons directly from the metadata, and these will be displayed in certain contexts. The most commonly used among these is the favicon (favorite icon, referring to its use in browser “favorites” or “bookmarks” lists).

Favicon has been used for many years. It is the first icon of this type: a 16-pixel square icon used in multiple places. You can see (depending on the browser) the favicon displayed in the browser tab containing each open page, and next to bookmarked pages in the bookmarks panel.

A favicon can be added to the document as follows:

  1. Save it in .ico format, in the same directory as the site's index page. Most browsers will also support more common formats such as .gif or .png, but using the ICO format will ensure it works even in Internet Explorer 6.
  2. Add the following line in the HTML <head> block to reference it:

favicon example

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

There are many other types of icons to consider, but don't worry too much about implementing all these types of icons right now – this is a fairly advanced feature.

The main goal here is to inform you, in case you encounter these icons while studying the source code of other websites.

Applying CSS and JavaScript to HTML

All modern websites use CSS to make them look good and JavaScript to enrich interactive functionality, such as video players, maps, games, and more. These are most commonly applied to a web page using the <link> and <script> elements respectively.

The <link> element always goes inside the document's head section. It requires two attributes: rel = "stylesheet", which indicates that it is the document's stylesheet, and href, which contains the path to the style file:

<link rel="stylesheet" href="style.css">

The <script> element does not necessarily have to be placed in the head section. In fact, it is often better to place it at the bottom of the document body, just before the </body> tag, to ensure that all HTML content has been read by the browser before attempting to execute the JavaScript code (if JavaScript tries to access an element from a DOM that doesn't yet exist, the browser will generate an error).

<script src="main.js"></script>

☞ The <script> element may appear empty, but it is not, and it requires a closing tag. Instead of loading an external file, you can also choose to place the script directly in the page, inside the script element.

<script>
   javascript code...
</script>

Setting the Primary Language of the Document

Finally, it's worth mentioning that you can (and should) set the language of the document page. This can be done by adding the lang attribute to the opening HTML tag as shown below:

<html lang="en-EN">

This is useful in many ways. The HTML document will be indexed more efficiently by search engines, allowing it to appear correctly in language-specific results, for example, and it is helpful for visually impaired users who use screen readers.

You can also set document subsections to be indexed as different languages. For example, we could set a Japanese language subsection to be recognized as Japanese, like this:

<p>Example in Japanese: <span lang="ja">ご飯が熱い。</span></p>

These language codes are defined by the ISO 639-1 standard.

🧠 Quiz – HTML Introduction

Content Models ➔

Top