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.
<!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">
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:
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.
Why 1SMARTchicken?
See More →
Thanks for your support!
HTML Books
All are affiliate links. Thank you for your support!
HTML NOTES:
- In our HTML section the term “tag” and “element” are often used interchangeably to refer to both the tag used to create a page element and the element created by the tag (
ptag =pelement = paragraph on the page) - HTML5 is not case sensitive; so
Pis the same asp,ÂH1is the same ash1 - Global attributes can be used with all HTML tags and are therefore not mentioned on every tag page
- To write clean, readable HTML code, it is best to use indentation whereas elements within elements are indented (tabbed or spaces) to create something that looks like a project outline
- The browser will automatically remove any extra spaces and lines in your HTML code when the page is displayed
- Double quotes or single quotes can be used around HTML attribute values, but when the attribute value itself contains one form of quote, it will be necessary to use the other around the attribute
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.
