One Tag to rule them all

James McNeill
3 min readApr 1, 2021

Creating interactive features on a webpage with the use of ready made tags!

Photo by Nikhil Prasad on Unsplash

Introduction

Within this article we are working through one of the sections of the HTML and CSS course provided by pirple.com. The course provides an introductory background to the inner workings of a webpage. When we are able to understand how the finished article was created, it gives us all an appreciation of the work involved to reach that stage.

The challenge reviewed within this post is to learn the inner workings of a sample of HTML tags. By incorporating HTML tags into the webpage design, we as readers are able to quickly decipher the different goals of the author(s).

HTML tags

After applying the initial opening tags to enclose a HTML webpage i.e. <HTML> and </HTML>, we can begin to get down the business of adding content.

Within the file the majority of sections can be separated using the paragraph tag (<p>). By adding emphasis to the beginning of a paragraph we can see an italics format of the text. At times we need to break up the flow of the text and this is where the line break helps.

Code 1.1 Adding emphasis and lines breaks for added context

To really make your message jump off the page, why not try the strong tag to show the text as a bold format.

Code 1.2 Making text stand out with the bold formatting

When starting any journey it helps to provide a time and date. Providing the correct formatting for the date allows for the superscripting of text. Also to make doubly sure participants don’t forget the day, why not try to highlight the import stuff.

Code 1.3 Highlighting the date and time ensures that the journey begins positively
Figure 1.1 Output of the journey reminder

Now that the day has arrived to begin the journey into the unknown, the recording and storing of each name of the valiant travelers can help if called upon in the future. Providing a form that requires the first name of each traveler should do the trick.

Code 1.4 Requesting the first name using a form

Once all travelers names have been taken we need to pick a guide. Providing a drop down list ensures that the guide is picked from within the list.

Code 1.5 Picking a name from the drop down list

After the initial euphoria of setting off on the quest, many travelers energy levels begin to wane and whispers of when the next meal will arrive blow through the wind. Including a textarea provides a bulletin board for the hungry travelers in the group.

Code 1.6 Using a textarea to display a list of meal options
Figure 1.2 Using forms to perform data collection

With the miles beginning to stack up and the guide moving further than there natural surroundings a map is required to double check the route. Using the figure and figcaption tags the guide is able to stay ahead of the travelling pack.

Code 1.7 Providing a figure and caption for the map

So as the first day of the journey comes to a close this is where we must leave our weary travelers. I feel that many more HTML tags will be required before journeys end.

Conclusion

Overall, this has been an enjoyable experience understanding how to use HTML tags to provide more depth and context within a webpage. The examples provided help to show how data analytics can be used to provide details of any journey. There will be plenty more challenges to face and HTML tags can be taken as one of many options to help.

Lastly, one of my goals during 2021 was to create my first medium post and here it is. I hope you all enjoyed the journey!

Thanks a million for reading! Until next time!

--

--