Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconFull Stack Developmentbreadcumb forward arrow iconStructure of HTML Document: Learn The Basic Structure of HTML

Structure of HTML Document: Learn The Basic Structure of HTML

Last updated:
2nd Oct, 2022
Views
Read Time
10 Mins
share image icon
In this article
Chevron in toc
View All
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.

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. 

Ads of upGrad blog

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

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

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

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 Development

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

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

  1. You must always surround tags with angle brackets (<>). For example, <head>.
  2. 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.)
  3. 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.
  4. 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>

Ads of upGrad blog

      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.

Profile

Rohan Vats

Blog Author
Software Engineering Manager @ upGrad. Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.

Frequently Asked Questions (FAQs)

1What 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.

2How 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.

3What 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.

Explore Free Courses

Suggested Blogs

Top 7 Node js Project Ideas &#038; Topics
31372
Node.JS is a part of the famous MEAN stack used for web development purposes. An open-sourced server environment, Node is written on JavaScript and he
Read More

by Rohan Vats

05 Mar 2024

How to Rename Column Name in SQL
46781
Introduction We are surrounded by Data. We used to store information on paper in enormous file organizers. But eventually, we have come to store it o
Read More

by Rohan Vats

04 Mar 2024

Android Developer Salary in India in 2024 [For Freshers &#038; Experienced]
901143
Wondering what is the range of Android Developer Salary in India? Software engineering is one of the most sought after courses in India. It is a reno
Read More

by Rohan Vats

04 Mar 2024

7 Top Django Projects on Github [For Beginners &amp; Experienced]
51351
One of the best ways to learn a skill is to use it, and what better way to do this than to work on projects? So in this article, we’re sharing t
Read More

by Rohan Vats

04 Mar 2024

Salesforce Developer Salary in India in 2024 [For Freshers &#038; Experienced]
908695
Wondering what is the range of salesforce salary in India? Businesses thrive because of customers. It does not matter whether the operations are B2B
Read More

by Rohan Vats

04 Mar 2024

15 Must-Know Spring MVC Interview Questions
34595
Spring has become one of the most used Java frameworks for the development of web-applications. All the new Java applications are by default using Spr
Read More

by Arjun Mathur

04 Mar 2024

Front End Developer Salary in India in 2023 [For Freshers &#038; Experienced]
902274
Wondering what is the range of front end developer salary in India? Do you know what front end developers do and the salary they earn? Do you know wh
Read More

by Rohan Vats

04 Mar 2024

Method Overloading in Java [With Examples]
25883
Java is a versatile language that follows the concepts of Object-Oriented Programming. Many features of object-oriented programming make the code modu
Read More

by Rohan Vats

27 Feb 2024

50 Most Asked Javascript Interview Questions &#038; Answers [2024]
4028
Javascript Interview Question and Answers In this article, we have compiled the most frequently asked JavaScript Interview Questions. These questions
Read More

by Kechit Goyal

26 Feb 2024

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon