Home/ Questions/Q 5962

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-27T02:08:10+00:00

HTML Boilerplate

  • 60k

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>
Enter fullscreen mode Exit fullscreen mode

The DOCTYPE

The doctype declaration tells the browser to render as an HTML 5 document. 

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.
Image description

BODY tag 

<body>
Enter fullscreen mode Exit fullscreen mode

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!

htmlwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,