Home
Blog
Full Stack Development
Structure of HTML Document: Learn The Basic Structure of HTML

Structure of HTML Document: Learn The Basic Structure of HTML

Updated on 16 November, 2022

13.75K+ views

• 10 min read

HTML has been used as a standard mark-up language for documents accessible on the internet through browser data. HTML consists of a series of short elements, tags, and codes, which, when compiled together in a structured format, create a web page that anyone can view with proper internet access.

It has changed the way people work. HTML and CSS are used to create and manipulate elements on a web page along with javascript, HTML let’s creators define different roles for each element giving full customization liberty in the creation process.

Check out our free courses to get an edge over the competition.

HTML stands for Hyper Text Markup Language, and is used to design web pages that are displayed on websites.

There are three main aspects that, when put together, help build a webpage.

HTML structure—supports the structural elements
CSS style—helps design and gives a style to those structural elements
JS interaction—enables the interaction between those elements

Check out upGrad’s Java Bootcamp

In HTML structure, the elements and tags are paired up against each other for marking the content.

Every page available on the internet includes HTML tags. These tags help display content online with a clear and open perspective, which can always be moderated and altered. In order to explain things more simplistically, let us describe how elements and tags are used in the program.

The opening and closing elements change, but the tags remain the same. The tags are inserted before and at the end of the sentences, enabling them to be formatted on the page. An ideal webpage consists of three main and essential sections:

Title
Head
Body

The Head element is used to highlight the start/heading of the head section. The head section always helps as a description about the page. The content within the head tags, i.e., the heading, is what is used as a source for identifying the content of the page.

Listed below are all the tags that can be used in the head element:

<base>
<link>
<meta>
<noscript>
<script>
<style>
<title>

Check out upGrad’s Advanced Certification in Cloud Computing

For example:

<HEAD>

<TITLE> A Hello world Example in HTML<TITLE>

</HEAD>

Block level elements are used to identify specific sections of a webpage, be it a paragraph, sub-headings, or some lists to create.

Paragraph: <P>and </P>

Heading, level one:<H1>Heading, level two:<H2>and </H2>

Horizontal rule:<HR> Centring:<CENTER>

Explore Our Software Development Free Courses

Fundamentals of Cloud Computing	JavaScript Basics from the scratch	Data Structures and Algorithms
Blockchain Technology	React for Beginners	Core Java Basics
Java	Node.js for Beginners	Advanced JavaScript

Footer: There are no special tags to denote it but it is still recommended to have a footer on the web page to help identify the sections requiring contact with the author. They may include a FAQ section or an email to subscribe to a newsletter.

<HTML>

<HEAD>

<TITLE>A Shoe Company <TITLE>

</HEAD>

<BODY>

<H1>Welcome to Amazing Shoes! </H1>: </H2>

<IMG SRC= .”.http://example.com/ images /image1.jpg”><HR>

<CENTER> Why not visit <A HREF =..http://www.example1.com/..>Example Website

</A>

</CENTER>

</BODY>

</HTML>

The above section explained the main elements in a web page of an HTML structure.

Now, we move towards the HTML source and try to understand how one can use it to understand the program structure and its elements.

As a beginner, this helps a lot to understand how other pages are developed, and they can be used as a reference to create a customized version for your own webpage.

Click the right button anywhere on the webpage and then select ‘view page source.’ This will open a window that contains the source code of the page.

Explore our Popular Software Engineering Courses

Master of Science in Computer Science from LJMU & IIITB	Caltech CTME Cybersecurity Certificate Program
Full Stack Development Bootcamp	PG Program in Blockchain
Executive PG Program in Full Stack Development
Software Engineering Courses

To inspect a page

Click the right button anywhere on the webpage and then select ‘Inspect’ to see the list and types of elements used to build that specific webpage. It would include both HTML and CSS, which can be modified through the style panel.

With the basic structure of HTML and its tags explained, now let’s move towards understanding the basic elements required to write content in HTML.

<p> This tag is used in a webpage when there is a need for a paragraph, and to end it the </p> tag is used.

<br> This tag is used to break lines and is mostly used to write single lines, be it contact or address.

<hr> This tag is used to separate the contents of the webpage into two sections.

All the tags here are implemented in a sample webpage code

Learn: 21 Web Development Project Ideas

INPUT

<html>

<head>

             <title></title>

</head>

<body>

             <h1>Structure of HTML</h1>

             <p>

             By upGrad Education<br>

             <hr>

             Learn the basics <br>

             <hr>

By upGrad Education<br>

             </p>

</body>

</html>

Attributes

For all the tags mentioned, an attribute is used when there is a need for additional information. The attributes are defined with two parameters, namely ‘value’ and ‘name’.

Here, the ‘name’ parameter has a function to take the name of the property it is deemed to be assigned. And the ‘value’ parameter has a similar function to take the value of the property names aligning with the element.

<img> This attribute is used to add/embed an image into the webpage. This tag will help to specify the image path. And the <height> and <width> indicate the height and width of the image, respectively.

<alt> This attribute is applied when the image is unable to load due to an error in connection or for some other reason. The alt tag serves as a subtitle for the image.

Enroll in Software Engineering Courses from the World’s top Universities. Earn Executive PG Programs, Advanced Certificate Programs, or Masters Programs to fast-track your career.

In-Demand Software Development Skills

JavaScript Courses	Core Java Courses	Data Structures Courses
Node.js Courses	SQL Courses	Full stack development Courses
NFT Courses	DevOps Courses	Big Data Courses
React.js Courses	Cyber Security Courses	Cloud Computing Courses
Database Design Courses	Python Courses	Cryptocurrency Courses

Read: 8 Exciting Full Stack Project Ideas & Topics

Example

<html>

<body>

 <h2>The src Attribute</h2>

<p>HTML images are defined with the img tag, and the file name of the image source is specified in the src attribute:</p>

 <img src=”img_101.jpg” alt=”an empty picture” width=”500″ height=”600″>

 </body>

</html>

For changing the text style, size, font and any other function related to text, the <style> tag is used

Example

<html>

<body>

 <h2>The style Attribute</h2>

<p>The attribute is used to change styles , such as color:</p>

 <p style=”color:red;”>This is a red paragraph.</p>

 </body>

</html>

With text modification applications, HTML also provides tags to modify the text to customized requests using these tags.

<b> – bold text
<strong> – Important text
<i> – Italic text
<em> – Emphasized text
<mark> – Marked text
<small> – Smaller text
<del> – Deleted text
<ins> – Inserted text
<sub> – Subscript text
<sup> – Superscript text

To summarize the article, we learned the following features and basics of HTML:

HTML structure
Tags, elements, and their types
Basic tags and their applications

All these features, tags, and attributes help to understand the need for HTML.

Read our Popular Articles related to Software

Why Learn to Code? How Learn to Code?

How to Install Specific Version of NPM Package?

Types of Inheritance in C++ What Should You Know?

upGrad’s Exclusive Software Development Webinar for you –

SAAS Business – What is So Different?

Quick Rules of HTML –

Several arguments have often ensued in office places over the correct way of writing an HTML code that explain the basic structure of HTML document. Different coders have different ways of writing HTML code, some use double space while others use tabs. Both have their own benefits, however, when you are a part of the team, you must know both and work as a team player!

This is why you need to understand the rules of the basic structure of HTML so that it can help you work properly, maintain large applications, and scale the company –

Filenames

All of the Filenames must be made in lowercase.

Good: upgrad.html

Bad: Upgrad.html

If you think that your filenames have to be longer than just one word, you may use hyphens to separate them.

Upgrad-offers-online-learning-courses-for-free.html

Document

And HTML document starts with the basic structure of HTML, <!DOCTYPE html>

The <head> and the <body> tags are also according to the standard HTML structure. However, as of HTML5, the code will also work if you remove these tags from the structure of HTML document.

Sometimes, you must mention a language

<html land=”en”>

You have to define a character encoding:

<meta charset=“utf-8”>

You actually have to include a viewport:

<meta name=”viewport” content=”width=device-width, user-scalable=no”>\

=no”>

Comments

It’s interesting to note that the structure of HTML document has dos and don’ts for comments.

Spaces must separate the delimiters in a single sentence comment.

<!– TODO: Make Carousel –>

Comments that span multiple lines must each begin on a separate line. There won’t be any niches this time.

<!–

One picture

Two pictures

Three

<–

The element’s id or class should be included in closing tag comments.

</div><!– #picture-carousel –>

You must ensure that the comments do not contain any important or sensitive information, for example, an API key.

Formatting

We have pretty much gone through and agreed on the rules and regulations of document setup up to this point.

The crossroads appears to begin at the indentation.

Once a piece of code reaches 80 characters, line breaks must be used.

Remove any trailing whitespace at the end of each line.

Here are some rules that you must use when using HTML tags during coding that will explain the structure of HTML document.

You must always surround tags with angle brackets (<>). For example, <head>.
The majority of tags enclose the material they influence and come in pairs. The first tag turns the activity on, and the second tag shuts it off, just like a light switch. (A few exceptions apply. For instance, the <BR> tag doesn’t have an “off switch” and instead generates a blank line. You cannot undo a line break after it has been created.)
Every time, the second tag—the “off switch”—begins with a forward slash. For instance, you may use the <B> key to enable bold, to highlight your words, and then use the </B> key to return to plain text.
Since tags are linked, when you create a tag within another tag, you must shut the inner tag prior to shutting the outer tag.

For example,

This is the tag format generally used,

<head><title>YOUR TEXT</head></title>

However, the correct format is 

<head><titleYOUR TEXT</title></head>

5. Numerous tags include optional attributes with values that might change the tag’s functionality. You can modify the default (left) paragraph alignment, for example, by using the ALIGN attribute of the <P> (paragraph) element.

These are some of the most significant points that explain the structure of HTML document.

If you’re interested to learn more about full-stack software development, check out upGrad & IIIT-B’s Executive PG Program in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects, and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.

Frequently Asked Questions (FAQs)

1. What does thetag mean?

The meta tag is used for defining the meta description of a website. Meta description includes keywords, author, page description, etc., and provides a glimpse of the information the website provides. The better the meta description, the more will be the views for the website. Meta tags are used by search engines to rank pages. The content of the meta tag should be short, precise, and genuine. It should be written such that it can spark the curiosity of the reader. Hence, this plays an important role during the optimization of search engines.

2. How is javascript integrated with HTML and what is its function?

Javascript is a synchronous single-threaded language used for adding dynamic functionalities at the client-side to the static web pages created in HTML. Javascript code is written in between script tags. The script tags can be placed in the head or body section of an HTML document. Javascript provides many functions and can also access the DOM elements by using methods such as getElementbyID(), getElementbyTagName(),etc. The browsers also run by using a Javascript engine. For Eg: Chrome uses V8. In recent years, many Javascript frameworks have emerged and one can develop a Full-stack web application with it. Some examples of these frameworks are Reactjs, Nodejs, and Expressjs.

3. What is the significance of CSS and what are the different ways to define styles?

CSS stands for Cascading Style Sheets. It is used to add styles like font color, font size, background color, margin, padding, etc to various HTML elements. Three ways to apply CSS are, inline, internal, and external. Inline styles are written by using the style tag and it applies to the line for which it is defined. Internal styling is done by defining a style tag within the head section of the HTML document. It ensures that the styles are applied to the entire HTML document. External CSS is applied by linking a reference stylesheet to the HTML document by using a tag. This is the most preferred method as it ensures modularity and clean code.

RELATED PROGRAMS