Been there for many years now and it has gone through many changes; in fact it is currently in its 5th version. Even the very early internet static web pages used earlier versions of HTML to show important data to the site visitors.
Nowadays, the latest version of HTML, supports various new features to make a web page aesthetically up to standard and meet today’s requirements.
To build the file sharing website, HTML5 was used as the markup language to code the front end in a clean and professional manner. In this post, I will be including some tags, which were used in the various pages of the site. Particularly, the tags below, were only introduced in HTML5 and didn’t exist before:
The section tag was introduced to part the whole web page into different sections. Back in the earlier versions of HTML, before divs were introduced, tables were used to set the positions of elements in the page. Nowadays, the section tag can group the page into different parts, each containing different elements of the page. Below is a snippet from the login.html page where the section tag has been used:
<section id = “element-container”>
<div id = “email_container”>
<input name=”Email” type=”text” id=”email” />
<div id = “password_container”>
<input name=”Password” type=”password” id = “password”/>
<div id = rememberme>
<input name=”rememberme” type=”checkbox” id=”rememberme” />
In the tags above, the section defined is call the element-container and will be used to contain the elements used to enter the email address, password and the option to remember the user details on next login. The fact that these elements are set in the section tag, makes sure that they are part of the section placements on the page.
Just like the section tag, the header tag is used to page a set of elements at the top of the page; therefore called the header. This tag places the elements inside it at the top of the page, without the need to style the tag positions using css. A very clear example of how the header tag has been used in my pages is through the following elements, which are visible on each page of the site:
<header id = “header_bar”>
<div id = “title”>FireFile</div>
<label id = “uname”>michele</label>
<label id = “accnt” onclick=”location.href=’settings.html’;”>account</label>
<label id = “help” onclick=”location.href=’help.html’;”>help</label>
<label id = “storg”>storage</div>
The snippet above includes a header bar at the top of each page containing links to nearly all the other pages.
Just like the section and header tags, the footer tag is used to place elements at the bottom of each page. This is mostly used to include information such as site proprietry right and liscences. In our particular case, the footer tag was used in the login page to keep the login button and register for a new account link elements in it. This can be seen below:
<footer id = “footer”>
<div id = “register”>
<a href=”register.html”>Register for a New Account</a>
<div id = “button”>
<input type = “button” id=”btnRegister” value = “Login” onclick=”validate();”/>