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.

This is the code for the advanced template. I removed the elements inside the body
to simply things.
Advanced HTML Template
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.
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 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.
Advanced HTML Template
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.