Basic HTML5 Template For Any Project
As you learn HTML5 and add new technologies to your toolbox, you may want to build a boilerplate for yourself in order to start all HTML5-based projects. We encourage this, and you can also consider using one of the online resources, which gives you a basic starting point for HTML5.
In this article, we will see how to get started. Let’s start with a simple, basic HTML5 page:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> The HTML5 Herald </ title>
<meta name = "description" content = "The HTML5 Herald">
<meta name = "author" content = "SitePoint">
<link rel = "stylesheet" href = "css / styles.css? v = 1.0">
</ head>
<body>
<script src = "js / scripts.js"> </ script>
</ body>
</ html>
With the basic template in place, let’s examine some of the important parts of the markup and how they differ from the way HTML was written before HTML5.
Doctype
First, we have a “document type declaration” or doctype. This is just one way to tell the browser (or any other parser) what type of document is being viewed. For HTML files, it represents a specific version and style of HTML.
The 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 mess. For XHTML 1.0 Strict:
<! DOCTYPE html PUBLIC "-// W3C // DTD XHTML 1.0 Strict // EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML4 conversion:
<! DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 Transitional // EN"
"http://www.w3.org/TR/html4/loose.dtd">
Although the long string of text at the top of the document didn’t really hurt us (apart from forcing visitors to our website to download some extra bytes), HTML5 has eliminated the obscure obscure things. What you need now is:
<! doctype html>
Simple and fair. doctype can be written in uppercase, lowercase, or mixed case. You will notice that the “5” is obviously missing from the statement. Although the current iteration of web markup is called “HTML5”, it is really just an evolution of the previous HTML standard-future specifications will only be an evolution of what we have today.
Since browsers are often required to support all existing content on the web, there is no need to rely on document types to tell them which features a given document should support. In other words, doctype alone will not make your page compatible with HTML5. It all depends on the browser.
In fact, you can use one of these two old document types with new HTML5 elements on the page, and the page will look the same as when using the new doctype.
HTML element
The next HTML document is an HTML element, which has not changed significantly in HTML5. In our example, we set lang the value of the attribute to en, which specifies that the document is in English. In the based xhtmlsyntax, xmlns attributes need to be included . In HTML5, this is no longer necessary, and even lang attributes are not necessary for the validation or correct operation of the document.
This is what we have so far, including closed </html> tags:
<! doctype html>
<html lang = "en">
</ html>
head element
The next part of the page is the <head>section. head The first line in defines the document’s character encoding. This is another element that has been simplified since XHTML and HTML4 and is an optional feature, but recommended. In the past, you could write:
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">
HTML5 improves this by minimizing character encoding <meta> tags:
<meta charset = "utf-8">
In almost all cases, UTF-8 is the value you will use in the document. A complete explanation of character encoding is beyond the scope of this article, and you may not be interested in it. Nonetheless, if you want to dig deeper, you can read topics about W3C or WHATWG.
Note: To ensure that all browsers can read the character encoding correctly, the entire character encoding declaration must be included in the first 512 characters of the document. It should also appear before any content-based elements (such as the <title> element that follows it in our sample site).
We still have a lot to write about this topic, but we want to keep you awake-so we won’t tell you those details! Now, we are content to accept this simplified statement and then move on to the next part of the document:
<title> The HTML5 Herald </ title>
<meta name = "description" content = "The HTML5 Herald">
<meta name = "author" content = "SitePoint">
<link rel = "stylesheet" href = "css / styles.css? v = 1.0">
In these lines, HTML5 is almost indistinguishable from the previous syntax. The declaration of the page title (the only required element in the header) is the same as before, and the meta tags we include are just some optional examples to indicate the position of these tags; you can put as many valid meta elements here .
The key part of this markup block is the style sheet, which is contained using the idiomatic link element. Except href and rel, link does not require other attributes. The type attribute (common in older versions of HTML) is not required and is not required to indicate the content type of the style sheet.
fair competition
When HTML5 was introduced, it included many new elements, such as articles and sections. You may think that this is the main problem with the support of unrecognized elements in older browsers, but you are wrong. This is because most browsers don’t actually care what tags you use.
If you have an HTML document with a recipe tag (or even a ziggy tag), and your CSS attaches some styles to the element, almost every browser will treat it as a completely normal operation, nothing Apply your style without complaints.
Of course, such hypothetical documents will not be verifiable and there may be accessibility issues, but it will render correctly in almost all browsers-except for older versions of Internet Explorer (IE). Prior to version 9, IE prevented unrecognized elements from receiving styles.
These mysterious elements are considered “unknown elements” by the rendering engine, so you cannot change their appearance or behavior. This includes not only the elements we imagine, but also any elements that were not defined when the browser version was developed. This means new HTML5 elements.
The good news is that the usage of IE has dropped. The global usage of IE11 has dropped to about 2.7% (as of 2018), and the previous version has almost disappeared from the map.
However, if you do need to support ancient browsers, you can still use the trusted HTML5 Shiv, a very simple JavaScript originally developed by John Resig. Inspired by the idea of Sjoerd Visscher, it enables new HTML5 elements to be styled in older versions of IE.
However, in reality, it is not needed now. All modern browsers and even the latest older versions support HTML5 elements. The one exception is that some browsers do not recognize the newer major elements. However, for these browsers, you can still use this element as long as you add the appropriate style (such as setting it as a block element).
Next is history
Looking at the rest of the start template, we have common body elements with their end tags and closing html tags. We also reference a JavaScript file in the script element.
Much like the link tag discussed earlier, the <script> tag does not need to declare a type attribute. If you have ever written XHTML, you may remember that your script tags look like this:
<script src = "js / scripts.js" type = "text / javascript"> </ script>
Since JavaScript is actually the only true scripting language used on the Web, and all browsers assume that you are using JavaScript, even if you do not explicitly state the fact, the type attribute is unnecessary in HTML5 documents:
<script src = "js / scripts.js"> </ script>
We place the script element at the bottom of the page to comply with best practices for embedding JavaScript. This has to do with page load speed; when the browser encounters a script, it will pause the download and render the rest of the page while parsing the script.
This will cause the page to load much slower when including large scripts at the top of the page before loading anything. That’s why most scripts should be placed at the very bottom of the page so that they will only be parsed after the rest of the page is loaded.
However, in some cases (such as using HTML5 shiv), the script may need to be placed at the head of the document, because you want to take effect before the browser starts rendering the page.
Next step
One way to take HTML5 to the next level is to try the HTML5 Boilerplate. This regularly updated resource provides a convenient starting point for your project, with all the latest best practices established by hundreds of the best programmers in the world.
Even if you just want to go through the code and see how certain elements are used these days, such as the various meta-elements in the document header, it’s worth downloading and checking out.
Another way to take your website or web application development to the next level is to try a modern framework that is widely used today.
The above is the detailed content of the basic HTML5 template suitable for any project.
#html #html5 #template
