Document Type-
The following statement will be used as the first line of your webpage in HTML5.
<! DOCTYPE html>
HTML5 we can write uppercase or lowercase letters in element names. But the uppercase and lowercase names should not be mixed. Developer should use either uppercase or lowercase element names. Generally, the lowercase letters are used to write the HTML elements. As-
<section>
<p>I Love my country.</p>
</section>
Image Attributes-
In HTML5 "alt" attribute is always used for images. This attribute is very important whenever image is not properly displaying. The width and height of image can also be defined by user. Since browser reserves some space for the image before its actual loading, it decreases flickering. As-
<img src="sky.gif" alt="HTML5" style="width:70px;height:58px">
<html> and <body>
Example -
<!DOCTYPEhtml>
<html lang="en-UK">
<head>
<title>Title of Webpage </title>
</head>
<body>
<h1>This is first heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
In HTML5, you can omit <html> and <body> tag, however it omitted. The <html> tag is the root of your web page. User also can specify the page language using <html> tag. Defining a language is very important for accessibility and for search engines.
Meta Data (Data about Data)
Setting of the Viewport-
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. The user's visible area in HTML5 web page is known as viewport. The size of viewport varies as per the requirement. It will be larger on a computer screen and smaller on a mobile phone. So <meta> viewport element in this web page is used as follows-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dimensions and scaling of web page can be controlled using, a <meta> viewport element which gives the instructions to the browser.
Here the width means the device-width, and hence the width of the page follows the screen-width of the device which will vary, according to the device (computer, phone or a tablet).
The initial-scale=1.0 part means the initial zoom level. Which is the page first that browser loads.
The two examples of web page are given as follows for the same web page. As-
i. Without the viewport meta tag
ii. With the viewport meta tag
(Left) without the viewport <meta> tag. (Right)With the viewport <meta> tag
HTML Comments-
User can use comments in HTML5 as-
<!-- This is a comment in one Line-->
Style Sheets-
We can link any cascading style sheet (CSS) with help of following syntax.
<link rel="stylesheet" href="styles.css">
An example of how to write code in a cascading style sheet(CSS) is given as follows-
body{
background-color:lightgrey;
font-family:"ArialBlack",Helvetica,sans-serif;
font-size:16em;
color:black;
}
• After each property-value pair semicolon should be used. If the value contains spaces then it should be kept inside quotes e.g. "Arial Black".
Loading JavaScript into html-
User can use following syntax for loading any other scripts (e.g. Java Script, VB Script or C # Script)-
<script src="example.js">