ddsingh@infomatics.info +91 9760014754

Semantic Elements

A semantic element clearly describes its meaning to both the browser and the developer.

 

We need HTML to help machines understand what we mean.

 

 Examples of non-semantic elements:

<div> and <span> -

 Tells nothing about its content.

 

 Examples of semantic elements:

<form>, <table>, and <img>

- Clearly defines its content.

 

There are several new elements defined in HTML5 which are block-level elements.

 

Many of existing web sites today contains HTML code like this:

<div id="nav">, <div id="header">, or <div id="footer">, to indicate navigation links, header, and footer.

 

 HTML5 offers new semantic elements to clearly define different parts of a web page

Ex:-

•<header>

• <nav>

• <section>

• <article>

•<aside>

• <figure>

• <figcaption>

These semantic tags contain block-level elements, and HTML5-compliant browsers will style them as display:block by default.

 

If you want to use these elements in older browsers , you will need to define the display style manually.

article,aside,details,figcaption,figure,footer

,header,hgroup,menu,nav,section

{

   display:block;

}

 

Header:-

 Represents a header of a document or a section

 

This element represents a group of introductory or navigational aids for web pages.

 

 A <header> element is intended to contain the section's heading.

The <header> element can also be used to wrap a section's table of contents, a search form, sub headings, bylines, version history information, or any relevant logos.

 

Eg:-

 

<header>

  <h1>The most important heading on this page</h1>

   <p>With some supplementary information</p>

</header>

Navigation:-

The <nav> element represents a section of a page that links to other pages or to parts within the page  a section with navigation links.

Not all groups of links on a page need to be in a <nav> element — only sections that consist of major navigation blocks are appropriate for the <nav> element

Represents a section of the document intended for navigation

 

[NavigationDemo.html]

<!DOCTYPE html>
<html> 
		<body> 
					<nav>
								  <a href="/HTML/">HTML</a> 
								  <a href="/Java/">Java</a>
								  <a href="/.Net/">MS.Net</a> 
								  <a href="/HTML5/">HTML5</a> 
				    </nav> 
  </body> 
  </html>


Section:-

The <section> element defines a section in a document. Used for grouping together thematically-related content. Sounds like a div element, but it's not.

 

->Represents a generic document or application section

->Can be used together with h1-h6 to indicate the document structure

 

[SectionDemo.html]

<!DOCTYPE html> 
<html>
	<body>
		<section>
			<h1>DD</h1>
			<p>DD Stands for Deen Dayal....</p> 
		</section>
</body>
</html>

 Article:-

This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

 

This is the content which will make meaning even if it is copied and pasted in another location.

 

Represents an independent piece of content of a document, such as a blog entry or newspaper article

 

[ArticleDemo.html]

<!DOCTYPE html> 
<html> 
	<body> 
		<article> 
				<h1>PHP stands For Personal Home Page</h1> 
				<p>
						HTML stands for Hyper Text MarkUp Language
				</p> 
		</article>
	</body>
</html>

Footer:-

 This tag represents a footer for a section and can contain information about the author, copyright information, etc

 

Represents a footer of a document or a section

 

[FooterDemo.html]

<!DOCTYPE html> 
<html> 
    <body> 
                I will Write My Actual Content Here
				<br/>
				<br/>
				<br/>
				<br/>
				Okk
	    
		<footer>
			<p align="center">Author: DD</p> 
			<p align="center">Published on 
			            <time datetime="2017-03-01 20:10">
						    My Author Date is		2017-03-01 20:10
						</time>
			</p> 
		</footer>
	</body> 
</html>

Aside:-

The aside element represents a section of a page that consists of content that is slightly related to the rest of the page. Such sections are often represented as sidebars in printed typography.

 

Represents a piece of content that is only slightly related to the rest of the page

[AsideDemo.html]

<!DOCTYPE html>
<html> 
	<body>
		<p>Microsoft has launched SharePoint 2013 this year
	</p> 
	<aside> 
				<h4>SharePoint</h4> 
				<p>
					The SharePoint is the product invented by Microsoft
				</p> 
	</aside> 
</body> 
</html>

HTML5 Document Structure

Why Newly Added Structural Elements?

Does not change or improve what users see

 

 However, the benefits include:-

 

-> Simplify the design of the page

-> Provide more information to search engines

-> Enable building more intelligent HTML tools

Newly Added Semantic Element

 

<summary> Tag:-

The <summary> tag defines a visible heading for the <details> element.

The heading can be clicked to view/hide the details.

 

<details>

     - additional details that the user can view or hide

<meter> Tag:-

The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

 

<progress> Tag 

The <progress> tag represents the progress of a task.

Ex:-

 

Example

Downloading in progress:

 

<progress value="22" max="100"></progress>

[ProgressDemo.html]

<!DocType HTML >
<html>
   <head>
          <title>Progress Bar Demo</title>
			<script>
						var milisec=0
						var max=30
 
						function displayProgress()
						{

								if(milisec>=max)
								{
										document.getElementById('message').innerHTML="Done!";
								}
							 milisec+=1;
							document.getElementById('downloadProgress').value=milisec;
							setTimeout("displayProgress()",max);
}
</script>

   </head>
<body>

<button onClick="displayProgress()">
	Run Progress Bar
</button>

<progress value="0" id="downloadProgress" max="30">
		Hello
</progress>
<span id="message">

</span>
</body>
</html>

<figure> Tag:-  

 

- self-contained content, like illustrations,

  diagrams, photos, code listings, etc.

 

 

<figcaption>

 -  <figcaption> element is used to add a caption for the <figure> element.

  [FigureDemo.html]

<!DOCTYPE html>
<html>
<body>

<h2>Places to Visit</h2>

<p>


</p>

<figure>
  <img src="Hydrangeas.jpg" alt="Trulli" style="width:100%" />
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure>

</body>
</html>

<time>                          

 

The <time> tag defines a human-readable date/time.

 

Attribute Of <time> tag

 

datetime

  datetime Represent a machine-readable date/time

             of the  <time> element

[TimeDemo.html]

<!DOCTYPE html>
<html>
<body>

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on 
	<time datetime="2019-02-14 20:00">
		Valentines day
	</time>.
	</p>

</body>
</html>

 <mark> tag:-

 

Use the <mark> tag if you want to highlight parts of your text.

 

Ex:-

Highlight parts of a text:

<p>Do not forget to buy <mark>milk</mark> today.</p>

 

New Input Types for Forms

 HTML5 has several new input types for forms, using these means less development time and an improved user experience.

These new features allow better input control and validation.

 

Provides better input control and validation

If they are not supported, they will behave as regular text

fields

New Input Types used in Mobile Browsers

Demos on <input> tag

Input-Color.html

 <!DOCTYPE html>
<html>
<body>

<form action="demo_form.php">
  Select your favorite color: <input type="color" name="favcolor">
  <br/>
  <input type="submit">
</form>

</body>
</html>

Input-Date.html

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.php">
  Birthday: <input type="date" name="bday">
  <input type="submit">
</form>

</body>
</html>

Input-Email.html

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  E-mail: <input type="email" name="usremail"><br>
  <input type="submit">
</form>

</body>
</html>

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

-> autocomplete

-> novalidate

 

New attributes for <form> (applied to all input fields)

-> autocomplete

-> novalidate

Attributes in Form tag

<form> /<input> autocomplete Attribute :-

The autocomplete attribute is used to provide help for user during form entry by showing previous entered data in drop-down list for re-entering data.

The autocomplete attribute has two states, on and off.

By default its state is on for form.

 

Syntax:-

<form autocomplete="on|off">

 

[AutoDemo.html]

<!DOCTYPE HTML>
<HTML>
  <BODY>
	<form action="demo1.php" id="form1" autocomplete="on"> 
	  Enter your Name:<input type="text" name="name"/>
	  Contact Num: <input type="text" name="num"/> 
	  Email ID:<input type="email" name="mail" autocomplete="off"/>

  <input type="submit"/>
  </form>
 </BODY>
</HTML>


<form> novalidate Attribute:-

 

       The noValidate property sets or returns whether the form-data should

        be validated or not, on submission.

 

        By default, form-data inside <form> elements will be validated on

         submission.

 

        When set to true, this property adds the "novalidate" attribute to the

        <form> element, and specifies that the form-data should not be

         validated  on submission. 

 

 

 

[NoValidateDemo.html]

<!DOCTYPE html>
<html>
	<body>
		<form action="saveperson.php" novalidate> 
			<label for="name">Name: </label> 
			<input type="text" name="name" required/>
			<br/>
			<label for="age">Age: </label> 
			<input type="number" name="age"/>
			<br/>
			<input type="submit" value="Save"/> 
			<input type="submit" value="Cancel" 
				formaction='cancel.php' 	formnovalidate/>
</form>
</body>
</html>

What is the difference between novalidate and formnovalidate attributes?

 

The novalidate and formnovalidate attributes are used to bypass validation.

The novalidate attribute is applied to a form and prevents it from validation.

The formnovalidate is applied to input type submit button, which overrides the novalidate.

It submits the form without validating.

 

The novalidate attribute is also a Boolean attribute, but using it will Not validate the form of submission.

 

 

The formnovalidate attribute in HTML is useful when you have a form with more than one submit button.

New Form Elements

<datalist>

Specifies a list of pre-defined options for an <input>

     Element

 

Used to provide an "autocomplete" feature on <input>

elements. Users will see a drop-down list of pre-defined

options as they input data.

 

[DataListDemo.html]

<!DOCTYPE html>
<html>
<body>
<form action="my_action.php">
	Choose a fruit: 
	<input list="fruits" name="fruit">
	<datalist id="fruits">
		<option value="Apple">
		<option value="Avacado">
		<option value="Orange">
		<option value="Banana">
	</datalist>
	<input type="submit">
</form>
</body>
</html>

Attributes for <input> Tag

<input> autofocus Attribute:-

 

It specifies that an <input> element should automatically get focus when the page loads.

Syntax

<input autofocus>

 

[AutoFocus.html]

<!DOCTYPE html>
<html>
<body>
<form action="demo_form.php"> 
Name:<input type="text" name="name" >
<br/>
Telephone:<input type="tel" name="tel" autofocus>
<br/> 
<input type="submit"> 
</form>
</body>
</html>

<input> form Attribute

    An input field located outside the HTML form

    (but still a part of the form)

It specifies one or more forms an <input> element belongs to

 

Syntax

<input form="form_id">

 

[InputFormDemo.html]

<!DOCTYPE html>
<html>
<body>
<form action="reg.php" id="form1"> 
	Student Name <input type="text" name="fname">
	<br/> 
	<input type="submit" value="Submit">
</form> 
 PhoneNumber <input type="tel" name="Phonenum" form="form1">
</body>
</html>

<input> min, max Attribute:-

 

The min attribute specifies the minimum value for an <input> element.

 

The max attribute specifies the maximum value for an <input> element.

 

[MinMaxDemo.html]

<!DOCTYPE html>
<html>
   <head>
		  <title>HTML min and max attribute</title>
   </head>
   <body>
      <form action="" id="form1">
	         Mention any number between 1 to 20
            <input type = "number" name="num" min="1" max="20">
			<br/>
            <input type = "submit" value = "Submit"/>
      </form>
   </body>
</html>

<input> pattern Attribute:-

The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission.

Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

 

[PatternDemo.html]

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
	  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

     <input type="submit">
</form>


</body>
</html>

<input> placeholder Attribute :-      

                                                    [PlaceHolderDemo.html]

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
  <input type="text" name="fname" placeholder="First name">
  <br/>
  <input type="text" name="lname" placeholder="Last name">
  <br/>
  <input type="submit" value="Submit">
</form>
</body>
</html>

  The placeholder attribute specifies a short hint that

  describes the expected value of an input field 

 

Syntax

<input placeholder="text">

 

 

Note: The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

<input> required Attribute:-

[RequiredDemo.html]

<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
	  Username: <input type="text" name="uname" required>
  <input type="submit">
</form>
</body>
</html>

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

Syntax

<input required>

 

Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

 

<input> formaction Attribute:-[FormActionDemo.html]

The formaction attribute specifies the URL of the file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

 

Note:-

 The formaction attribute is used with type="submit" and type="image".

 

Syntax

<input formaction="URL">

[HtmlForm.html]

<!DOCTYPE html>
<html>
<head>
    <style>
        input:required:invalid,input:focus:invalid 
		{
	          border-color:red;
        }
        input:focus:valid
        {
            color:blue
        }
    </style>
</head>
<body>
    <form action="/">
        Name: <input type="text" placeholder="LastName, FirstName" required/>
        <br />
        Emp ID: <input type="text" pattern="[A-Za-z][0-9]{3}" placeholder="1 letter + 3 nums" />
        <br />
        Color: <input type="color" id="colorpicker" name="color" value="#ff0000"><div id="hexcolor"></div>
        <br />
        Experience (0-20): <input type="range" min="0" max="20" step="1" value="3"  />
        <br />
        Date of Birth: <input type="date" name="dob" value="2011-01-13" />
        <br/>
        Time of Birth: <input type="time" name="bdaymonth">
        <br />
        Join Month and Year: <input type="month" name="bdaymonth">
        <br />
        Choose Even Number: <input type="number" min="0" max="200" step="2" value="0" />
        <br />
        Telephone Number: <input type="tel" name="telphone" value="9760014754" />
        <br />
        Email Id: <input type="email" list="choices" name="lstCourses" />
        <datalist id="choices">
            <option label="DD Singh" value="ddsingh2003@infomatics.com">
            <option label="Amit" value="amit@infomatics.com">
            <option label="Sai" value="sai@gmail.com">
        </datalist>
        <br />
        URL: <input type="url" name="siteurl" value="http://www.infomatics.info" />
        <br />
        Preferred Holiday Week: <input type="week" name="week_year">
        <br />
        <input type="submit" name="submit" value="Submit" />
    </form>

</body>
</html>

Multiple Attribute:-

The multiple attribute in HTML allows user to enter more than one value.

 

 It is a Boolean attribute and can be used on <input> as well as <select> element,

To allow multiple file uploads in HTML forms, use the multiple attribute. The multiple attribute works with email and file input types.

[MultipleDemo.html]

<!DOCTYPE html>
<html>
   <head>
      <title>HTML multiple attribute</title>
   </head>
   <body>
      <form>
         <input type="file" name="name" multiple>
		 <br/>
		 <br/>
			Upload multiple files, and click Submit.<br/>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>


Prev Next