HTML Boilerplate
Below is the standard html 5 code template, which is also known as a boilerplate. Something that can be reuse for different project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
The DOCTYPE
The doctype declaration tells the browser to render as an HTML 5 document.
<!DOCTYPE html>
HTML Tag
The html tag tells the browser that between html opening and closing tags is going to be a html code. The html tag consist of head and body tags.
<html>
HEAD tag
The head tag holds the information about the web page, and tells the browser how to handle the page. It can display a title for the website, as well as setting the meta data charset to a specific encoding.
The standard charset for encoding is "utf-8".
<head>
<meta charset="utf-8">
<title></title>
</head>
In the older browser, different languages uses different symbols, thus the encoding might be different and become unreadable if the browser set the unicode wrongly. At the present, most of the browser is using standard "utf-8", as it contains all the standard international symbols for all different languages.
This link contains all the unicode character for "utf-8", ranging from different languages and even emojis 💙.
Here is an article on more details about unicode.
More about META tag
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
more about meta tag can be found here.
There are other meta elements that we can set, for example the viewport which set how the webpage scale and display accordingly to the devices (mobile responsive).
The description are the information that the search engine crawl and search the web description and display it.
BODY tag
<body>
Body tag contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Conclusion
Every html page should have a html boilerplate template. It should contains the doctype, meta, title and an empty body tag to get ready for content coding!
Top comments (0)