Introduction to HTML

Table of Contents +

When we hit any website like https://freecodingschool.com, the browser sends a request to the server, and the server sends back the HTML file that contains the structure of the web page. Then, the browser reads the HTML file and displays the web page as it was designed to be displayed.

🌐 What is HTML?

HTML (HyperText Markup Language) is the standard markup language for creating web pages. As the name suggests, it is a markup language that uses tags to define the structure and content of a web page. Basically, HTML is a set of rules that tells the browser how to display the content of a web page.

⚙️ How HTML Works

Any web page is represented by HTML document that contains series of HTML elements which are known as HTML tags. These tags defines how and what content should be displayed on the browser.

🏷️ HTML Tags

HTML tags are the basic building blocks of HTML. An HTML tag is special word that contains the name of the HTML element and is enclosed in angle brackets (< >) and usually has an ending tag with a forward slash (/) to indicate the end of the element.

📝 Syntax of an HTML Tag

<tagname>Content goes here</tagname>

💡 Example of HTML tags

the <p> tag is used to define a paragraph, and the </p> tag is used to indicate the end of the paragraph. The content of the paragraph goes between these two tags.

<p>This is a paragraph.</p>

So this way HTML tags tell browser how to display the content of the web page. Like if we want to display a heading, we can use the <h1> tag for the main heading and <h2> for subheadings, and so on.

<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>
<p>This is a paragraph under the sub-subheading.</p>

📄 HTML Document Structure

An HTML document has a specific structure and we need to follow that structure to create a valid HTML document. The basic structure of an HTML document is as follows:

🏗️ Basic HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>Document Title</title>
</head>
<body>
    <h1>Main Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

This is the basic structure of an HTML document. Let’s break it down:

  • <!DOCTYPE html>: This is first line of the document and it tells the browser that this is an HTML5 document.
  • <html>: This is the root element of the HTML document. And Each HTML document must have this element as top level element.
  • <head>: This is the second element of the document. It is having metadata about the web page, such as the title, description, and links to stylesheets or scripts etc.
  • <title>: This element is used inside the <head> element to define the title of the document, which is displayed in the browser’s title bar or tab on top.
  • <body>: This element is the main content of web page which is displayed in the browser. It contains all the tags like headings, paragraphs, images, links, and other content that you want to display on the web page.

📋 HTML DOCTYPE Declaration

HTML DOCTYPE is nothing but a declaration that tells the browser what version of HTML the document is using. The <!DOCTYPE html> declaration always has to be the first line of an HTML document and it tells the browser that this is an HTML5 document.

Note

We are going to use <!DOCTYPE html> for all the examples in this course, as it is the current standard and widely supported by all modern browsers.

🗂️ HTML head element

The <head> element of an HTML document is used to provide information about the web page. This information is not displayed directly on the web page but it is used by the browser and search engines to understand the content of the web page. Its like summary of the web page.

📊 Common Elements in <head>

Element Purpose Example
<title> Sets the page title shown in browser tab <title>My Website</title>
<meta> Provides metadata about the page <meta charset="UTF-8">
<link> Links external resources like CSS <link rel="stylesheet" href="style.css">
<script> Includes JavaScript code or files <script src="app.js"></script>
<style> Contains internal CSS styles <style>body { margin: 0; }</style>
<base> Sets base URL for relative links <base href="https://example.com/">

📱 HTML body element

The <body> element contains the main content of the web page that is displayed in the browser.

There are many HTML elements that can be used inside the <body> element to create the content of the web page. Some of the most commonly used elements are:

Element Purpose Example
<h1> to <h6> Headings of different levels <h1>Main Heading</h1>
<p> Paragraphs of text <p>This is a paragraph.</p>
<a> Hyperlinks to other pages or resources <a href="https://example.com">Link</a>
<img> Images displayed on the page <img src="image.jpg" alt="Description">

🎯 Conclusion

In this lesson, we covered the basic structure of an HTML document, including the <head> and <body> elements. We explored common elements found within these sections and their purposes.

Do not worry if you don’t understand everything right now. As we go though the course, we will learn more about these elements and how to use them effectively to create web pages.

Let’s move on to the next step to setup our development environment and start writing our first HTML code.

Previous Free HTML Course

Share & Connect

Share on LinkedIn