HomeSelenium

HTML for Selenium (Part 7) – Displaying different sizes of headings on web page

HTML for Selenium (Part 7) – Displaying different sizes of headings on web page

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

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

  • HTML Structure
  • > Also understand the previous posts on HTML in this tutorial for understanding the HTML basics (Click here to get started on HTML Basics for Selenium)

Once you have understood the above HTML Structure, you can now understand the steps for displaying the different sizes of headings on the Web Page using HTML.

Let’s get started

HTML for Selenium (Part 7) – Displaying different sizes of headings on the web page

Follow the below steps for displaying different sizes of headings on the Web Page using HTML.

1) HTML provides the different tags <h1>, <h2>, <h3>, <h4>, <h5>, <h6>  for displaying the Text in different sizes of headings on the Web Page. The text provided between the <h1> to <h6> tags will be displayed as heading in different sizes on the Web Page. <h1> specified text will be displayed in the highest size heading and <h6> specified text will be displayed in the lowest size heading. The heading size will reduce, while moving from <h1> to <h6> tag. The following is an example of the same:

<h1> The highest size heading text </h1>
<h2> The next size heading text - lower than h1 size </h2>
<h3> The next size heading text - lower than h2 size </h3>
<h4> The next size heading text - lower than h3 size </h4>
<h5> The next size heading text - lower than h4 size </h5>
<h6> The lowest size heading text </h6>

2) Download the Document having HTML structure from here (Download here)

3) Open the above-downloaded Document in NotePad++ as shown below:

HTML for Selenium - Part 7 - NotePad Plus Plus Open

4) Add the <h1> to <h6> tags along with the text to be displayed in different heading sizes on the Web Page inside the <body> tags as shown below and save:

HTML for Selenium - Part 7 - Heading Tags Code

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

HTML for Selenium - Part 7 - Open Heading Tags Code

6) Observe that, the Text provided in different heading tags in HTML code will be displayed in different sizes as headings on the web page as shown below:

HTML for Selenium - Part 7 - Heading Display

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

Comments (0)

Leave a Reply

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

For FREE Testing Tutorials & Videos

X
Open chat
Contact Us on Whatsapp