To expand on a basic HTML setup and make it an advanced HTML setup we can add meta tags, the lang attribute, and links to external CSS/JS.

In the visualization of an HTML page structure below, the additions that make it advanced are in blue.

HTML Page Structure - Advanced
HTML Page Structure – Advanced

Note
The only thing that will show on the page inside the browser is the area in white (minus the tags of course).

This is the code for the advanced template. I removed the elements inside the body to simply things.

				
					<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web Tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, SQL">
<meta name="author" content="1SMARTchicken">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced HTML Template</title>
<!-- styles -->
<!-- scripts -->
</head>
<body>
<!-- scripts -->
</body>
</html>
				
			

Language Attribute

The first thing we added to the basic template was the lang attribute inside the html tag. The lang attribute specifies the language of the element’s content. Common examples are “en” for English, “es” for Spanish, “fr” for French, and so on.

The first example has the language code only. The second includes the country code. The country code isn’t as important, and can be left out if you’re unsure.

				
					<!DOCTYPE HTML>
<html lang="en">
				
			
				
					<!DOCTYPE HTML>
<html lang="en-US">
				
			

Meta Tags

Next we added a series of meta tags.

Like the title, these tags do not display on the page, but they do tell the browser and search engines information about the document.

There are many meta tags with various descriptions for the browser, search engines, and various external services to use. This group below is what are considered the basics that should be included.

				
					<meta charset="UTF-8">
<meta name="description" content="Free Web Tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript, PHP, SQL">
<meta name="author" content="1SMARTchicken">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
				
			

Note
The meta charset should be considered mandatory (it isn’t) as it specifies the character encoding for the HTML document. Similarly, the meta name=”viewport” should always be present as it tells the browser to display the page at the width of the device and to scale it to 100% on the initial view. So, not zoomed is what that means.

Placing Styles and Scripts

Finally, we have an area just before the closing /head tag where we can place styles and scripts.

Styles can be either code chunks of CSS, or better yet, links to external style sheets.

Scripts can similarly be either chunks of JavaScript coded directly on the page, or better yet, links to external .js files.

				
					<title>Advanced HTML Template</title>
<!-- styles -->
<!-- scripts -->
</head>
				
			

Non-crucial scripts can also be placed just before the closing /body tag which can speed up the perceived page load time because the page can first render before applying the scripts.

				
					<!-- scripts -->
</body>
</html>
				
			

Additional information about linking to styles/scripts or placing styles/scripts directly in your document can be found here: