HTML 3 : HTML Structure
HTML for Selenium (Part 3) – HTML Structure
In the previous posts, we have understood the below HTML basics:
- > What is HTML?
- > HTML Elements, Tags, Attributes & Enclosed Text
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:
2) Observe that a text document will be created and right click on it to open as shown below:
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:
The above <html> </html> represents the complete 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:
<head> .. </head> represents the head portion of the web page as shown below:
<body> .. </body> represents the body portion of the web page as shown below:
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:
6) Lets provide any title say ‘Selenium in 2025: Features, History, and Limitations’ inside the <title> .. </title> tags as shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selenium in 2025: Features, History, and Limitations</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
7) Select ‘File’ > ‘Save As’ option as shown below:
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:
9) Observe that the above HTML file will be saved as below:
10) Right click on the above saved HTML file and select ‘Open’ option as shown below:
11) Observe that the HTML page having the title as ‘Testing’ (Title given in step 6) will be displayed as shown below:
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:
14) Observe that the HTML code written so far for rendering on the web page will be displayed in NotePad++ Editor as shown below:
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:
16) Right click on the above-saved HTML file and select ‘Open’ option as shown below:
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:
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:
Here concludes this article and will explain more HTML basics in the upcoming posts.
Comments
Post a Comment