What is an HTML?

The HTML stands for Hyper Text Markup Language. It is the standard language used to create web pages , websites, games and web apps. HTML is used to structure content on the web by using various tags to define different parts of a webpage.

Basic HTML Document Structure

The every HTML document starts with a <!DOCTYPE HTML> declaration to tell the browser what type of document it is.

The main components of an HTML document are below.

The <html> tag is the root element that wraps all the content on the page.
The <head> tag contains metadata about the document, like the title, links to stylesheets, etc.
The <body> tag contains the content that is displayed on the page.

Simple html page structure code example

First heading — Code Example of basic structure

Defining Elements and their work

The <!DOCTYPE HTML>, declaration is a required preamble and explains the document type.
The <html>, element is the root of the page.
Inside the <head>, we define the title of the page that appears in the browser tab.
The <meta charset=''UTF-8''>, sets the character encoding for the document.
The <body>, element contains all the content that will be displayed on the webpage.

Understanding HTML tags and elements

HTML Code Editors Or Text Editors

Web pages and websites can be edited and created through the text editors or HTML editors list below:

Notepad text editor is System Default desktop software simple & easy.
Visual Studio Code – VS is a text editor and also an IDE, Professional.
Notepad++ – Quick and fast
Sublime Text – Very Fast

Notepad Editor

Visual Studio Code Editor

Save html Page in Notepad Method

First of all open Notepad application and write some code lines.
After that click file menu then hit the save button.
Write a file name called .html extension and save as type all files.

Basic HTML Elements and Tags

Headings
Paragraphs
Lists
Links
Images

Headings

The HTML provides six levels of headings <h1> to <h6>, <h1> tag is the highest level heading, and <h6> is the lowest.

Paragraphs

The Paragraphs are created using the <p> tag. This is used to write your text content for work.

Lists

The HTML provides two types of lists <ul> unordered lists tags and ordered list <ol> tags. List items are wrapped inside <li> tags.

Simple and easy two types of lists are below.

Attributes & Inline Elements

The HTML elements have Attributes are href, src, alt, target.
The Inline elements tags are <span>, <strong> and <em>. Strong tag is for bold and em tag for italic text.

href Attribute

All html attributes will be used as in the above example.

Inline Elements

Inline elements appear inside other elements without breaking the flow of the document within paragraph.

Introduction to Semantic HTML Elements

What is Semantic HTML?

The Semantic HTML elements introduces meaning to the web content. Instead of using generic or non-semantic tags like <div>, <span> semantic elements describe the content in a meaningful way. Semantic elements tags are <img>, <table>, and <article>

The <header> Represents the header of the page or section.
The <nav> Defines a navigation section.
The <main> Represents the main content of the page.
The <section> A standalone section of related content.
The <footer> Represents the footer of the page or section.

Semantic html page structure looks like this in the picture below.

Building a Complete Page Structure

Follow the steps below

1. Header Section

Let’s create a <header> element that contains a website title and navigation menu and inside the <nav>, add a list of links <ul> pointing to different sections of the page.

2. Main Content

Use a <main> element for the primary content and inside the <main> tag, use <section> tags to divide the content logically product section, service section.

3. Footer Section

At the bottom of web page add a <footer> element that includes some footer information copyright.

Creating a Structured Webpage

How to Create an Internal Links:

The Links <a> anchor tags elements can link to different sections within the same page using the id attribute. Clicking About in the navigation should scroll the user to the About section.

Navigation of an internal links to help the users to redirect one page to another.

About Us Link page Redirecting

After Clicking on the link of About Us page and then you will be redirected to our website about us page.

Complete the task which is given as under

Create a one page website and add three sections called Home, About and Contact like every site have these in the shape of pages or sections.
I hope that this tutorial was helpful for you and you have learned some points from this tutorial, In this article we have discussed about the html basics and page structure which is explained in a very easy and simple way.
But if you face some difficulty or trouble please write in the comment section box below so we can help and solve your problems and other doubts.
If you do not find a write answer of your problem there is an another way to get your answer goto our site contact us page and write your question we will give you a write answer.

Introduction to HTML Basics and page structure tutorial

What is an HTML?