Programs

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:

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

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.

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.

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. 

If you’re interested to learn more about full-stack software development, check out upGrad & IIIT-B’s PG Diploma 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.

Prepare for a Career of the Future

UPGRAD AND IIIT-BANGALORE'S PG DIPLOMA IN FULL STACK SOFTWARE DEVELOPMENT
Learn More

Leave a comment

Your email address will not be published.

Accelerate Your Career with upGrad

Our Popular Software Engineering Courses

×