This guide demonstrates what an HTML starter template is.
What is HTML Starter Template?
The HTML starter template appears like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<h1>HTML Starter Template</h1>
Follow the below demonstration to get knowledge about the tags/elements available in the HTML starter template:
The <!DOCTYPE html> Tag
The “<!DOCTYPE html>” tag contains the data about the file type and tells the browser how to render it. This tag helps a lot in search engine optimization by providing information about which version of HTML is utilized to build the webpage. If this tag is missing in an HTML file, the web browser may behave unexpectedly or display incorrect elements.
The <html> Tag
The “<html>” tag is a required element, and it acts like a container for all HTML elements. It is the root element means all other elements must be placed inside to work properly. This tag can be utilized to define the structure and content of the webpage and help to specify the metadata about the document. Using its “lang” attribute the language of the HTML page can be set:
In the above code snippet, the HTML page language is set to “English”.
The “<head>” Tag
The information about the webpage is inserted inside the “<head>” and is not visible on the webpage and this information is utilized for SEO purposes. It typically includes metadata, such as the page title, description, and keywords, as well as links to external stylesheets, scripts, and other resources:
The <meta> Tags
The <meta> tag provides metadata about the HTML document, such as the character set, keywords, and description of the page. It plays an essential role in browser engine optimization. It ensures that the web browser displays the text correctly using the correct encoding standards. Also utilized to set the keywords and description related to the HTML page:
The <title> Tag
The “<title>” is utilized to display the webpage or website name on the browser’s title bar. This tag can be beneficial in managing the web pages of the website. It helps the process of SEO and improves accessibility by including descriptive and meaningful titles. It helps users with some disabilities to navigate the site more easily:
After executing the above line of code inside the “<head>” tag, the webpage appears like this:
The above output displays that the dummy data provided inside the “<title>” tag is now placed on the title’s bar.
The <link> Tag
This tag is utilized to link HTML files to other files to inherit or use the styling or methods in the HTML file. The other files may be CSS files created by the developer or some CDNs of the CSS frameworks like Bootstrap or Tailwind etc. It is widely used because by using it the line of code decreases a lot and provides pre-build styles that can be utilized in the HTML file:
In the above line of code, the “style.css” file is getting linked with the HTML file. Now, the classes that are built inside the “style.css” file can be accessed to apply styling in the HTML file. For instance, try to style the “<h1>” tag that is already inserted inside the HTML file using the following CSS properties:
font-family: times new roman;
Insert the above code in the “style.css” file. After rendering the webpage appears like this:
The webpage shows that the styles are applied on the HTML element from the external CSS file using the “<link>” tag.
The “<body>” Tag
The primary use of the <body> tag is to contain all the visible content of the web page. This includes multiple tags that help with inserting text, images, videos, and other elements on the webpage that make up the main content of the web page. It can also be utilized to apply CSS properties to the web page at once. It also improves the accessibility of the webpage by including semantic tags and other accessibility features:
The “<script>” Tag
This is all about the explanation of tags in the HTML starter template.
The HTML starter template provides a basic structure of HTML language which can be modified by the developers according to the requirement. It saves a lot of time and effort as now the developer does not start to build from scratch. It includes tags like “<head>”, “<meta>”, “<title>”, “<link>”, “<script>”, “<body>” etc. This article has demonstrated the HTML starter template along with practical implementation.