Code has been added to clipboard!

HTML Basics: Main Concepts and Principles Explained

Reading time 4 min
Published Jan 21, 2019
Updated Jan 21, 2020


HTML language is not only universal, but also one of the easiest for beginners to learn. It is the foundation of every website.

If you know how to code in HTML, you will be able to create and structure web pages. To give them a sharp and dynamic look, you should combine HTML elements with CSS and JavaScript. Before that, you should get familiar with HTML basics and learn to use tags.

Tim Berners-Lee created HTML in 1990 and based it on the Standard Generalized Markup Language (SGML). The main principle of HTML basics is surrounding text with angle-bracketed tags to apply a chosen element.

What does HTML stand for? HTML is an acronym for Hypertext Markup Language. It is meant to help people structure and format content so that Internet browsers would display pages correctly. Using HTML alone won't be enough to make your websites appealing. You should learn the Holy Trinity: HTML, CSS, and JavaScript.

Before you start learning HTML language basics, you have to keep in mind the importance of proper tag construction. Tags are divided into different categories according to their purpose:

  • The root element
  • Document metadata
  • Sections
  • Grouping content
  • Text-level semantics
  • Edits
  • Embedded content
  • Tabular data
  • Forms
  • Interactive elements
  • Scripting

A regular HTML tag consists of only a few components. It begins with an opening tag and ends with a closing tag which has to contain a forward slash before the tag name. Less than (<) and greater than (>) angle brackets are used to enclose each tag.

Tags that define empty elements are self-closing: they do not require a closing tag. Still, that is an exception - not a rule. Most tags won't work properly if you do not add a forward slash to the closing tag.

Why You Should Learn HTML: Purpose and Use

After learning HTML basics, you will be able to perform many changes to your page:

  • Content structure: make your websites easy-to-read and improve user experience by dividing texts into paragraphs, lists, quotes, and headings.
  • Graphics: add images, music, video, or interactive content into your website.
  • Meta tags: improve the SEO rating and overall findability of your website by telling search engines which keywords are related to your website.
  • Comments: include additional information and remarks for people who might read your HTML code.

Where to Start

If you are a beginner and have no clue where to start, we suggest these easy-to-follow steps for learning HTML coding:

  • HTML introduction is a great place to start your learning process - a beginner's HTML cheat sheet, you could say. This tutorial will provide you with the main tips on using HTML tags. Furthermore, you will be able to analyze a basic HTML document after finishing it. You can practice now:
Example
<!DOCTYPE html>
<html>
<head>
 <title>Name of the website</title>
</head>
<body>
 <h1>Heading for the content below</h1>
 <p>Text text text</p>
</body>
</html>
  • The following tutorials cover various tags you can apply to your documents: elements, headings, paragraphs, and so on. We also provide code examples for you to practice the hypertext markup language!
  • Speaking of code examples, make sure to click the Try it Live button when available. Our code editor will allow you to make changes to the code and analyze the results instantly. You can find this button under most code examples.
  • If you are struggling to master the advanced features of HTML coding, we suggest you continue learning with our interactive and video courses. You will find user-friendly tutorials that are designed for beginners that are just starting to grasp the HTML language basics.
  • HTML should not be the only language you decide to learn. We provide detailed tutorials on CSS and JavaScript as well. The difference between HTML and CSS is that the latter is used for styling. Adding JavaScript allows you to control the behavior of elements.

What You Will Learn

Our tutorial is divided into separate parts, discussing different aspects of HTML basics. We start with the fundamentals and move on to more advanced topics, so you get to know all the essential principles before you start building complex structures.

You can see the list of tutorials in the sidebar menu on the left (if you are on mobile, click which is in the navigation bar). Each tutorial acts as a little HTML cheat sheet, as it contains all the information about tags and attributes relevant to the topic. You'll notice that some of them contain the same tags and attributes: that's because some of them have more than one function.

Do not forget to improve your learning process with our interactive and video courses. This video course is a great choice for beginners who want to start creating websites right away. You will be able to learn the HTML language basics in only one hour!

Basics
Introduction
Syntax
Editors
Basic Examples
Head Section
<!DOCTYPE>
Tags and Elements
Semantic Elements
Tags Reference
Attributes
Comments
Block and Inline Elements
Forms
Form Elements
Input
Responsive Web Design
Inline Scripts
Uniform Resource Locator
Redirect
XHTML
Geolocation
Drag and Drop
Local Storage
Web Workers
Server-Sent Events
Character Encoding
Text Formatting
Quotation and Citation Elements
Headings
Paragraphs
Links
Tables
Lists
Symbols
Space
Tab
Styles
Computer Code
Layout
Classes
Colors
Images
iframes
Audio Player
Video Player
YouTube Videos
Multimedia
Canvas
SVG
<!-- -->
<a>
<abbr>
<acronym> DEPRECATED
<address>
<applet> DEPRECATED
<article>
<aside>
<audio>
<b>
<base>
<basefont> DEPRECATED
<bdi>
<bdo>
<big> DEPRECATED
<blink> DEPRECATED
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center> DEPRECATED
<cite>
<code>
<col>
<colgroup>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir> DEPRECATED
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font> DEPRECATED
<footer>
<form>
<frame> DEPRECATED
<frameset> DEPRECATED
<h1> – <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen> DEPRECATED
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<menu>
<menuitem> DEPRECATED
<meta>
<meter>
<nav>
<noframes> DEPRECATED
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike> DEPRECATED
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt> DEPRECATED
<u>
<ul>
<var>
<video>
<wbr>