Structure of HTML Document: Learn The Basic Structure of HTML

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.

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

 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>

For example:


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


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>

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.



<TITLE>A Shoe Company <TITLE>



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

<IMG SRC= .”. images /image1.jpg”><HR>

<CENTER> Why not visit <A HREF =..>Example Website





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.

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







             <h1>Structure of HTML</h1>


             By upGrad Education<br>


             Learn the basics <br>


By upGrad Education<br>





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.

Read: 8 Exciting Full Stack Project Ideas & Topics




 <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″>



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




 <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>



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. 

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.

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.

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.

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.

Want to share this article?

Prepare for a Career of the Future

Leave a comment

Your email address will not be published. Required fields are marked *

Leave a comment

Your email address will not be published. Required fields are marked *

Get Free career counselling from upGrad experts!
Book a session with an industry professional today!
No Thanks
Let's do it
Get Free career counselling from upGrad experts!
Book a Session with an industry professional today!
Let's do it
No Thanks