HTML Skeleton | Explained
This article will guide related on the HTML skeleton.
What is HTML Skeleton?
Every HTML file must include the HTML skeleton as given below:
The above-stated code is explained in the below section.
Components of HTML Skeleton
The skeleton of HTML is the set of tags that are required to build any web page. Following are the major components of the HTML skeleton.
DOCTYPE
With the help of “DOCTYPE” the browser will recognize that this is an HTML document:
<html> Tag
The “<html>” element is the root element of the HTML document. The closing tag of html “</html>” is supplied at the end of the document. Moreover, specify the language “lang” attribute inside the HTML tag:
<head> Tag
“<head>” is another major element of the HTML skeleton. It holds the meta information of the document:
<meta> Tag
The “<meta>” tag is also known as a meta description that contains metadata of the web page. The search engine uses the meta description to determine the page content. Its “charset” attribute is utilized to instruct the browser which character encoding to use to display the desired content. Whereas, “viewport” is used to modify the page width based on the width of the device’s screen:
<title> Tag
The “<title>” element is used to specify the title of the page that will be displayed on a web page:
<link> Tag
The “<link>” element connects an external source to an HTML file, such as a stylesheet:
<script> Tag
The “<script>” tag is utilized to link the HTML file with a scripting language like JavaScript:
<style>
The “<style>” tag is used to specify how an HTML element should be shown on a webpage by implementing CSS properties on it:
<body>
The “<body>” element contains all the content of a web page, such as forms, heading, images, hyperlinks, button, table, and so on. After the </body> closing tag, the </html> closing tag will be placed:
Example: How to Create an HTML Page?
Let’s build an HTML page using the HTML skeleton we described earlier:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
<style>
img {
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<img src="/images/fantasy.jpg" alt="blue butterflies">
<div class="">
<h1>Nature</h1>
<p>Look deep into nature.</p>
<p>Colors are the smiles of nature.<</p>
</div>
</body>
</html>
Between “<head>” tags, the following items are defined:
- All the elements discussed in the HTML skeleton are specified.
- The “<style>” element contains the styling of the “<img>” element.
- The “width” and “height” properties are set to specify the image size.
In the “<body>” section of the HTML page, the following elements are added:
- “<img>” tag is utilized to add an image to the document. Inside the image element, the “src” attribute is used to specify the image path and the “alt” attribute refers to the alternate text that will display on the web page if the image fails to load.
- “<div>” element defines a section or division in an HTML document.
- “<h1>” element is utilized to embed the heading in the document.
- “<p>” element is added to specify a paragraph.
Output
We have demonstrated what an HTML skeleton is and how to use it to create an HTML page.
Conclusion
The HTML skeleton is a framework or structure of an HTML page, which mainly contains <html>, <head>, and <body> elements. The “<html>” is the root tag of the HTML skeleton. The “<head>” element contains the meta information of the document. The “<body>” element includes all the elements that are used to create page content such as paragraphs, images, lists, tables, and more. This post has demonstrated the HTML skeleton with an example.
Source: linuxhint.com