If you’ve decided to pursue a career in web development, you should start by learning HTML. Importantly, this is the first language that is recommended for any potential web or application developer. However, this is because it introduces programming to you in a more approachable and linguistically diverse way.

So read on to learn about HTML and its basic structure on webpages.

What is HTML?

HTML is a markup language that communicates instructions to web browser, it instructs the web browser on exactly how the web page should be displayed to the viewer. It stands for Hypertext Markup Language. Any link which is available on webpages is generally called as Hypertext and markup refers as a tag or page’s structure such that listed documents in web pages could be seen in a structured format. HTML was understand the structure of any documents which is heading, body, inner contents or paragraphs. To learn HTML is very simple and easy to understand. 

How to Create Your First HTML Document

To start writing codes in HTML, you will need to install an interface development environment (IDE). For this tutorial, we will be using the Visual Studio code environment. So it is recommended that you download VSC as it is one of the best IDEs for web development.

After the VSC has been configured, install a browser. Download and install Chrome or Firefox on your computer for the best outcomes.

Next, create a folder, and in the folder, create a new file with a .html extension to get started.

Now, you are ready to write your first HTML code.

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph</p>
</body>
</html>

HTML Basic Structure

In this lecture we are going to go over the structure of basic HTML document this structure will be the foundational building block of any HTML web page. We will start off with a very simple page and add several elements to it.

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph</p>
</body>
</html>

First of all the document begins with

<!DOCTYPE html> tag this tag tells the browser which version of HTML the page is written.

After the doctype declaration comes the open

<html> tag, the HTML tag is the building block for our page most others tags will be nested within the open html tag and closing HTML tag. Keep in mind that an open tags must be closed to define the ending of the HTML page. The HTML blocks however all tags we work with will be nested inside the HTML open tag in the close HTML tags. 

The next take in our web page structure is the open

<head> tag similar to the html tag.

The head tag must be have a corresponding closing tag that anything containing within the open <head>and closing </head>tag will not be displayed visually within the content area of to web browser.

The head tag contains important instructions for web browser.

First, it identifies the <title></title> of the page. 

For this reason the open <title> in closing </title>tags must be contained within be head tag, the actual title of the page should be contained within the title tags. Anyway the <title> tags to defines what text will show in the web browser’s title bar.

The next set of tags contained in our <head> tags is the <meta> tags.

<meta> tags communicate with both the web browser and search engines to provide valuable information about your page.

All visible contents, including headings, paragraphs, images, hyperlinks, tables, lists, etc., are contained within the <body> element, which also defines the document’s body.

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
<h1>First Heading</h1>
<p>First paragraph</p>
</body>
</html>

In this article, you learned about HTML and the structure of an HTML code, or boilerplate, for a web page.

Categorized in: