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.
- > Syntax: <TagName>
- > Example: <h1>
- > 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 ‘QAFox’ inside the <title> .. </title> tags as shown below:
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 ‘QAFox’ (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.
- > 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 ?
On a mission to contribute to the Software Testing Community in all possible ways.