HTML5 Template: A Base Starter HTML Boilerplate for Any Project-CSS Tutorial-php.cn

Build your own HTML5 template: a concise guide

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

This article will guide you on how to create your own HTML5 template. We will step by step explaining the key elements of the HTML basic template, and finally providing a simple template that you can use and further build.

After reading this article, you will have your own HTML5 template. If you want to get the HTML template code now, read this article later, here is our final HTML5 template.

Key Points

HTML5 templates, as reusable templates, contain the necessary HTML elements, help avoid repeated code writing at the beginning of each project.
A basic HTML5 template should contain document type declarations, elements with language attributes, character encoding via <meta charset="utf-8">, and viewport settings for responsive design.
HTML5 template section usually contain metadata for SEO, links to CSS stylesheets, and optional JavaScript files.
For social media optimization, adding Open Graph meta tags can enhance the display effect of content when shared on social platforms.
Including favicon and Apple touch icons in the template helps to build brand identity and improve user experience across devices.
Putting JavaScript files before closed tags can improve page loading speeds because it allows browsers to render pages faster by delaying the loading script.

What is an HTML template?

Each website is different, but from one website to another, many things are basically the same. Instead of writing the same code over and over, create your own "template". A template is a template that you use every time you start a project, which can prevent you from starting from scratch.

Wikipedia describes the template as:

Code snippets appear repeatedly in multiple places, with little change.

As you learn HTML5 and add new technologies to your toolbox, you may want to build an HTML template for yourself to start all future projects. It's definitely worth doing, and there are plenty of starting points online that can help you build your own HTML5 templates.

A very simple example of HTML5 template

The complete template provided at the end of this article contains a lot of content. But you don’t have to do it that fancy – especially when you’re just starting to learn. Here is a very simple "beginner" HTML5 template, which is probably the only thing you need:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

If you paste the above code into a .html file, you will have a web page! This basic HTML5 template contains some of the elements listed in the next section, as well as a simple title element that will be displayed in your web browser.

Let's take a closer look at its structure.

Structure of HTML5 template

HTML templates usually contain the following parts:

Document type declaration (or doctype)
<html>Element
Character encoding
Viewport element
<title>, description and author
Open Graph element for social cards
Favicon and touch icons
CSS Stylesheet Link
JavaScript file link

In addition to document type declarations and <html> elements, most of the elements listed above are located in the <head> section of the HTML template.

HTML5 Document Type Statement

Your HTML5 template needs to start with a document type declaration or doctype. doctype is just one way to tell the browser or any other parser what type of document it is looking at. For HTML files, this means a specific version and type of HTML. doctype should always be the first item at the top of any HTML file. Many years ago, the doctype declaration was an ugly and hard to remember confusion, usually designated as "XHTML Strict" or "HTML Transitional".

With the advent of HTML5, those unintelligible annoying things disappeared, and now you only need this:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

Simple and clear. "5" disappeared clearly from the statement. Although the current version of the web tag is called "HTML5", it is really just an evolution of previous HTML standards—the future specifications will be just the development we have today. There will never be "HTML6", so the web tag of the current state is usually simply called "HTML".

Because the browser needs to support old content on the web, it does not rely on doctype to tell the browser what features should be supported in a given document. In other words, just doctype doesn't make your page compliant with modern HTML features. In fact, regardless of the doctype used, the browser will determine the feature support case by case. In fact, you can use the old doctype with the new HTML5 element on the page and the page renders the same way as when using the new doctype.

<html>Element The

<html> element is the top level element in an HTML file—which means it contains everything except doctype in the document. The <html> element is divided into two parts—<head> and <body> parts. All other content in the webpage file will be placed in or inside the <html> element. The following code shows the <html> element, which is located after the doctype declaration and contains the <html> and <head> elements: <body>

&lt;!DOCTYPE html&gt;

Copy after login

How to use tags in HTML The

section contains important information about the document, which is not displayed to the end user - such as character encoding and links to CSS files, and possibly JavaScript files. This information is used by machines such as browsers, search engines, and screen readers: <head> All elements contained between the

<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

Copy after login

…

tags above are important, but end users don't see it - except for the <head> text, it will appear in online search and browser tags. </head>

How to use tags in HTML The

<body> section contains everything displayed in the browser - such as text, images, etc. If you want to show something to the end user, make sure to place it between the on and off <body>…</body> tags:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

langWhat are the attributes? The

<html> element should ideally contain the lang attribute, as shown in the above code (<html lang="en">). Its main purpose is to tell assistive technologies such as screen readers how to pronounce them when reading aloud. (This property is not required for page validation, but most validators will issue warnings if you do not include it.)

The value of the lang attribute shown above is en, which specifies that the document is written in English. All other spoken languages have values, such as fr in French, de in German, hi in Hindi, etc. (You can find a complete list of language codes on Wikipedia.)

HTML document character encoding The first line in the

HTML document <head> section is the line that defines the character encoding of the document. The letters and symbols we read on web pages are defined as a series of numbers, and some characters (such as letters) are encoded in many ways. Therefore, it is useful to tell your computer which encoding your web page should refer to. Indicator character encoding is an optional feature that does not cause any warnings in the validator, but for most HTML pages it is recommended:

&lt;!DOCTYPE html&gt;

Copy after login

Note: To ensure that some older browsers read character encoding correctly, the entire character encoding declaration must be included somewhere in the first 512 characters of the document. It should also appear before any content-based element (like the <title> element that appears later in our example).

Why use UTF-8 character encoding in HTML5 templates?

The above character encoding example uses the UTF-8 character set. In almost all cases, utf-8 is the value you should use in your document. This encoding covers various characters not included in other encodings. You may have encountered strange characters on the web - for example - which is obviously a bug. This is usually because the browser cannot find the expected characters in the character set specified in the document.

UTF-8 covers a variety of characters, including many characters in various languages around the world, as well as many useful symbols. As the World Wide Web Alliance explains:

Unicode-based encodings (such as UTF-8) can support multiple languages and can be adapted to any language mixed pages and forms. Its use can also eliminate server-side logic, thereby individually determining the character encoding for each service page or for each incoming form submission. This greatly reduces the complexity of handling multilingual websites or applications.

The full explanation of character encoding is beyond the scope of this article, but if you want to dig deeper, you can read about character encoding in the HTML specification. What does

X-UA-Compatible mean?

You sometimes see this line in <head> of your HTML document:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

This meta tag allows web authors to select the version of Internet Explorer that should render the page. Now that Internet Explorer is largely just a bad memory, you can safely remove this line from your code. (We've removed it from the HTML5 template.) If you're sure your page might be viewed in an older version of IE, it might be worth including it. You can read more about this meta tag on the Microsoft website.

Viewport element

Viewport element is a feature you will see in almost every HTML5 template. It is very important for responsive web design and mobile-first design:

&lt;!DOCTYPE html&gt;

Copy after login

This <meta> element contains two properties that work together as a name/value set. In this case, the name is set to viewport and the value is width=device-width, initial-scale=1. This is for mobile devices only. You will notice that there are two parts of the value:

width=device-width: The pixel width of the viewport you want the website to present.
initial-scale: This should be a positive number between 0.0 and 10.0. The value of "1" indicates a 1:1 ratio between the device width and the viewport size.

You can read more about these meta-element properties on MDN, but now you just need to know that in most cases, this meta-element and its settings are best for mobile-first responsive websites.

<title>, description and author

The next part of the HTML base template contains the following three lines:

<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

Copy after login

<title> is what is displayed in the browser's title bar (for example, when you hover over the browser tab), which is also displayed in the search results. This element is the only required element in the <head> section. Description and author metaelements are optional, but they do provide important information for search engines. In the search results, the title and description in the above code example will be shown below.

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

You can place any number of valid element elements in <head>.

Open Graph element for social cards

As mentioned above, all meta elements are optional, but many are good for SEO and social media marketing. The next part of the HTML5 template contains some of these meta-element options:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
  <🎜>  
</head>

Copy after login

These <meta> elements utilize the so-called Open Graph protocol, and there are many other elements you can use. These are the elements you use most frequently. You can view a complete list of available Open Graph meta options on the Open Graph website.

Those elements included here will enhance the appearance of the webpage when linked to social media posts. For example, the five <meta> elements included here will appear in a social card embedded with the following data:

Title of content
Provided content types
Content specification URL
Description of content
Image associated with content

When you see posts shared on social media, you will usually see these bits of data are automatically added to social media posts. For example, if you include a link to the GitHub homepage, the following will be displayed in the tweet.

HTML5 Template: A Base Starter HTML Boilerplate for Any Project

Favicon and Touch icons

The next part of the HTML5 template contains <link> elements that indicate the resources to contain as favicon and Apple touch icons:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

Favicon will appear in the browser tab when someone checks your website. favicon.ico Files are used in older browsers and do not have to be included in the code. As long as your favicon.ico file is included in the root directory of the project, the browser will automatically find it. favicon.svg Files are used in modern browsers that support SVG icons. You can also use .png files instead.

The last element references the icon used on Apple devices when adding the page to the user's home screen.

You can include additional options here, including web application manifest files that reference other icons. For the full discussion, we recommend that you read Andrey Sitnik's article on this topic. But those included here are enough for simple HTML beginner templates.

Contains CSS stylesheets and JavaScript files

The last two important parts of the HTML Getting Started Template are references to one or more stylesheets and possibly JavaScript files. Of course, both are optional, although few sites don't have at least some CSS styles.

Include CSS stylesheet in HTML template

Stylesheets can be included anywhere in the document, but you will usually see it in the <head> section:

&lt;!DOCTYPE html&gt;

Copy after login

The

<link> element points the web browser to an external stylesheet so that it can apply these CSS styles to the page. The <link> element requires the rel attribute to be stylesheet. In the past, there was usually also a type attribute, but it was never really needed, so if you find the old code that contains it on the web, just delete it.

Note that we added the ?v=1.0 query string at the end of the CSS link. This is completely optional. This is a handy trick when you update the stylesheet to update this query string (for example, update to 1.1 or 2.0), because doing so ensures that the browser will discard any old, cached copy of CSS files and load the new one version.

It is worth noting that you do not have to use the <link> element to include CSS on the webpage, as you can instead put all styles inside the <style>…</style> tag of the page itself, located in the <head> section . This is very convenient when experimenting with layouts, but it is not generally recommended to do so on active sites, as these styles will be inaccessible on other pages, resulting in inefficient and/or duplicate code.

Include JavaScript files in HTML templates

JavaScript code usually passes ⋮

</body>

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

Embed the script in the

tag:

Instructions on old browsers and new elements<article><aside> <recipe>When HTML5 was introduced, it contained many new elements such as <ziggy> and . You might think that support for unidentified elements is a major issue for older browsers – but that’s not the case! Most browsers don't actually care what tags you use. If you have an HTML document that contains an element (or even a element), and your CSS attaches certain styles to that element, almost every browser will handle it like this is totally normal, without Apply your style complaintly.

Of course, such assumptions do not verify and there may be accessibility issues, but it will render correctly in almost all browsers – the exception is an older version of Internet Explorer (IE). Prior to version 9, IE blocked unrecognized elements from receiving styles. The rendering engine treats these mysterious elements as "unknown elements", so you can't change their appearance or behavior. This includes not only the elements we imagined, but also any elements that were not defined at the time of developing these browser versions, including new HTML5 elements.

Luckily, older browsers that do not support the new element style are hardly present nowadays, so you can safely use any new HTML element in almost any project without worrying about it. That is, if you really need to support old browsers, you can still use the reliable HTML5 Shiv, a simple JavaScript snippet originally developed by John Resig. It was inspired by Sjoerd Visscher's work, which made new HTML5 elements styleable in older versions of IE. Actually, this is not necessary today, though. As caniuse.com shows, HTML5 elements are supported in all browsers in use.

Complete HTML5 template

This is our final HTML5 template – a simple template that you can use for any project:

&lt;!DOCTYPE html&gt;

Copy after login

<body>You can put this simple and easy-to-use HTML5 template code into any project today! On this basis, you can add whatever you want between the </body> and tags.

Conclusion

There are many HTML beginner templates and frameworks online, with ready-made CSS and JavaScript files and many pre-write content that you can use and modify as you like. This is not our goal. The basic templates we provide here contain everything you might need when designing any web page so you don't have to start from scratch every time.

Feel free to copy the basic HTML page templates we show at the beginning, or the full templates we show above and use them in your project. Over time, you may find that there are contents you don't need often, and some of the things we haven't mentioned here that you use frequently, so you can update your templates to suit your workflow.

Next steps

A good way to take your web layout to the next level is to use Beautiful Web Design Principles, Fourth Edition. This book will teach you design principles and and to show you how to implement them on the web. It was completely rewritten in September 2020 and contains cutting-edge technology you haven't read anywhere else.

To hone your CSS knowledge, our modern CSS project courses will help you master the latest advanced versions of CSS3.

Apart from that, you can take your website or web application development to the next level with interactive and programmatic, reactive UI. For example, look at SitePoint's vast resources on JavaScript and React. And learn how to start a new project faster using our guide on the best scaffolding web tools and libraries. Or, if you want to build a web experience without learning coding, read our starter guide on codeless movement. The latest codeless tool is a game-changer. For the first time they have enough power to provide a powerful alternative to coding in many cases.

HTML5 Template FAQ Finally, we will answer frequently asked questions about HTML5 template code.

What are templates in HTML?

Template is an HTML page template that is used every time you start a project, thus avoiding starting from scratch. It includes common elements such as document type declarations and basic HTML elements that appear on each web page.

Is a template a template?

Yes. A template is a very simple HTML beginner template that contains links to basic elements that appear on any web page, such as character encoding,

and <head> elements, and CSS and JavaScript files. <body> How to create a template in HTML?

One way to create your own HTML template is to get any web page, copy its source code, and then delete everything except the most basic elements that appear on each web page. Or you can get our ready-made HTML5 template and paste it into the .html file and you're ready to go!

What is the HTML5 template used for?

When designing a web page, there is nothing worse than having to write all the boring code from scratch starting with a blank .html page. Our HTML5 templates provide you with all the HTML template code you need to get started running so that you can start working on your unique designs and content right away.

What is the template example?

There are many examples of HTML5 templates on the Internet. Over time, you may create your own templates based on the way you write HTML yourself. Our HTML5 template example provides all the basic elements you need on most web pages.

As a very simple start, you can just use this:

&lt;!DOCTYPE html&gt;
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML5 Boilerplate</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Title</h1>
  <🎜>
</body>
</html>

Copy after login

What is the starting code for HTML?

HTML documents always start with a document type declaration: <!DOCTYPE html>. Then there is the tag, which contains all the other content on the web page. The two child elements of are the and elements. Our HTML5 template contains all the basic starting code required for any web page.

Does every HTML file require a template?

Ideally, yes. HTML templates provide the minimum amount of code for HTML pages to perform any useful actions in a web browser. You can use HTML template code on every page of your website. Typically, the common elements of the template will be injected into your page from a single source, such as a framework or include file, so that you can update the templates for all pages at once. Our HTML5 template provides all the HTML template code you need to get started.

The above is the detailed content of HTML5 Template: A Base Starter HTML Boilerplate for Any Project. For more information, please follow other related articles on the PHP Chinese website!