HomeSelenium

HTML for Selenium (Part 3) – HTML Structure

HTML for Selenium (Part 3) – HTML Structure

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

In the previous posts, we have understood the below HTML basics:

In this article, I am going to explain the structure of HTML.

Before I start explaining the structure of HTML, you need to first understand that, almost all tags in HTML have both Start and End Tags.

Start Tag:

  • > Syntax: <TagName>
  • > Example: <h1>

End Tag:

  • > Syntax: </TagName>
  • > Example: </h1>

Both Start and End Tags are used together in HTML as shown below:

Example: <h1> This is a Bigger Size Heading Text </h1>

In the above example, <h1> is the start tag which starts before the heading text starts and </h1> is the end tag which starts after the heading text.

Now, you understood the start and end tags.

Let’s move to the structure of HTML.

HTML for Selenium – HTML Structure

Follow the below steps to understand the structure of HTML:

1) Right click on your desktop and select ‘New’ > ‘Text Document’ as shown below:

HTML for Selenium - Creating Text Document

 

 

 

 

 

 

 

 

 

 

 

2) Observe that a text document will be created and right click on it to open as shown below:

HTML for Selenium - Open Text Document

 

 

 

 

 

 

 

3) At this point, we need to understand that all the HTML document starts with <html> start tag and the HTML documents ends with </html> end tags:

HTML for Selenium - HTML Start and End Tags

 

 

 

 

The above <html> </html> represents the complete web page.

HTML for Selenium - Complete HTML Section of Web Page

4) In between the above <html> and </html> tags, we can create the child tags <head> .. </head>  and <body> </body> tags as shown below:

HTML for Selenium - Head Body Start and End Tags

 

 

 

 

 

 

 

<head> .. </head> represents the head portion of the web page as shown below:

HTML for Selenium - Head Section of Web Page

<body> .. </body> represents the body portion of the web page as shown below:

HTML for Selenium - Body Section of Web Page

5) Now, you can provide a title for the page by providing the <title> .. </title> as child tag for the <head> .. </head> as shown below:

HTML for Selenium - Title Section of Web Page

 

 

 

 

 

 

 

 

6) Lets provide any title say ‘QAFox’ inside the <title> .. </title> tags as shown below:

HTML for Selenium - Title Text of Web Page

 

 

 

 

 

 

 

7) Select ‘File’ > ‘Save As’ option as shown below:

HTML for Selenium - File Save As Text Document

 

 

 

 

 

 

 

8) Provide the File name as ‘First HTML Page.html’ and Save As Type as ‘All Files’ as shown below and click on ‘Save’ Button:

HTML for Selenium - File Name and Save As Type

 

9) Observe that the above HTML file will be saved as below:

HTML for Selenium - Saved HTML File

 

 

 

 

 

 

 

 

10) Right click on the above saved HTML file and select ‘Open’ option as shown below:

HTML for Selenium - Open HTML File

 

 

 

 

 

 

 

 

11) Observe that the HTML page having the title as ‘QAFox’ (Title given in step 6) will be displayed as shown below:

HTML for Selenium - QAFox Title Displayed

 

 

 

 

 

 

 

 

12) Install NotePad++ Software from the web if not available in your machine (Click here to download)

13) Right click on the HTML file and select ‘Edit with NotePad++’ option as shown below:

HTML for Selenium - Edit with NotePad++

 

 

 

 

 

 

 

 

14) Observe that the HTML code written so far for rendering on the web page will be displayed in NotePad++ Editor as shown below:

HTML for Selenium - Opened in NotePad++

 

15) Now let’s add something to the body section of the web page, by adding few heading tags say <h1> .. </h1> and <h2> .. </h2> to the html code as shown below and save it:

HTML for Selenium - Body Tags Added

 

16) Right click on the above-saved HTML  file and select ‘Open’ option as shown below:

HTML for Selenium - Open HTML File

 

 

 

 

 

 

 

 

17) Observe that this time, Two headings are displayed in the body section apart from the Title in the head section of the web page as shown below:

HTML for Selenium - Headings displayed in Body Section

 

 

 

 

 

 

 

 

18) As you have understood practically, the different sections of the web page and the HTML Tags to be used to structure the web page, now check the below diagram to understand the high-level structure of HTML:

HTML Structure

 

 

 

 

 

 

 

 

 

 

Here concludes this article and will explain more HTML basics in the upcoming posts.

Next Steps:

  • > To learn more about Selenium, continue to the next post (Click on Next Post link below)
  • > Check complete Selenium Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

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