Choosing and Configuring HTML5 Tags to Organize Content and Forms:

HTML5 gives developers a variety of new elements to organise content and forms. These elements all represent the new markup which is a very important part of HTML5. The elements that are introduced in HTML5 all make it easier to create and modify the documents. The new tags in HTML have more direct names as oppose to tags in previous HTML specifications. This makes it easier for humans, programs and web browsers to understand and manage the pages. Each tag has a more appropriate name representing which part of the page they apply to for example the <header> tag can be found at the top of the page and the <footer> tag is located at the bottom of the page. This new exciting and useful feature is known as semantic markup and is becoming more popular when it comes to creating web pages.

When creating web pages with HTML5 you would use the <div> tag throughout the program because it includes CSS styles such as the background-colour, height and width that you would use to design and create an effective page. <div> tag also allows you to ‘ wrap a label and its widget’ (developer.mozilla.org Feb 1, 2018). One thing you need to bare in mind when using <div> tags is that they don’t have much meaning without the ID or class attribute. However, the HTML5 semantic markup gives the different parts of a HTML document a more distinct meaning. There are several new HTML5 elements that you can use to organise documents/web pages and i have listed a few of them below with a description for each:

Tags	Description
<header>	This is one of the main tags that can be found at the top of the page and often contains navigation links and introduction content.
<footer>	The footer tag is located at the bottom and signals the end of the page or section. Usually you would find contact information, author details and other references in this part of the document.
<nav>	This defines a block of links that allow you to navigate through the document/web page.
<track>	Defines the tracks for media elements (<video> and <audio>).

Choosing and Configuring HTML5 Tags for Input and Validation:

There are many tags available within HTML that can define input and validation methods to a particular part of a page.

Open Tag	Close Tag	Type	Description
<form action="">	<form>	input	Creates a blank form that can receive user input
readonly	-	Validation	Text cannot be edited
size=X	-	Validation	Determines the size of the characters in the field
<input type="image" src="X.jpeg" alt="Submit" width="Y" height="Z">	-	input	Will receive the input of an image from the user.
<input list="X"> <datalist id="Y"> <option value="A"> <option value="B">	</datalist>	Input	Creates a list that the user can select an option from. This also technically includes validation as the options are pre defined.
<input type="number" name="quantity" min="X" max="Y">	-	Validation	Specifies the maximum and minimum values for the input.
<input type="text" name="postcode” pattern="[A-Za-z]{3}" title="Postcode letter">	-	Validation	Used when a multitude of characters and numbers need to be accepted. The {3} specifies the maximum number of the characters to be received.
<input type="text" name="fname" placeholder="First name">	-	Validation	A placeholder gives the user a default value to change