HTML
CSS
JavaScript
jQuery
PHP
SQL
WordPress
HTML Tutorials

Overview

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

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">
				
			

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:

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.

HTML
CSS
JavaScript
jQuery
PHP
SQL
WordPress

Why 1SMARTchicken?

This site was built and is maintained to benefit my autistic son.
See More →

My Son's Name is Johnny

He was diagnosed as autistic quite late, at age four...
His story

Buy Me a Coffee

Thanks for your support!

Feedback

If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.