Lesson 17: Invisible Things: Scripts, Metadata, Viewports, and Comments
In this lesson, you will understand more about how to control invisible things…that are really important.
Scripts
Script tags are an easy way to link JavaScript or any other kinds of programming language into your HTML5 pages.
They are now also really easy to use. Somewhere in the body of your page, add the script element as follows:
Example of script
<script>
document.write("Hello from HTML.net!")
</script>
Save the file and user your browser to try it out. It's not fancy, but any kind of script could be placed here, from something that calculates values to something that runs videos controls.
If you wanted to re-use a script over and over again on multiple pages, you would put that script in a .js file - just save a file with the extension .js instead of .htm - and refer to it from the script element whenever you need it.
Example of external script
<script src="myscript.js"/>
HTML5 assumes that any script is by default JavaScript, so if you are using another language, you would have to set the type attribute as well.
You can also put scripts that control the entire page in the <head> or <footer> elements instead. Some best practices advocates say that putting labour-intensive scripts in the footer element, right before the </body> tag helps the page load faster as the browser read and show the simple HTML and CSS before it starts on the more complicated calculations in the script.
Metadata
Documents contain more than just the code and the content — they should also include metadata, which is information about the page. This information is not visible to readers, but does get used by the browser and by search engines.
We put metadata in the <head> element, where it can be read quickly by search engines.
The <meta> tag has a number of attributes and it is considered good practice to add the following four lines of <meta> tags to every page, but modifying the value of content in each case to match the sort of content you have on that page and who wrote it.
Example of metadata to add to every page
<head>
<meta name="description" content="Free HTML5 tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="HTML.net">
<meta charset="UTF-8">
</head>
The more exact your keywords and description, the more likely that your page will come back high on a search engine's list of results when someone searches for those particular terms.
The charset attribute is new for HTML5 and lets you specify the character set that you're using. It replaces this line in HTML4: <meta http-equiv="content-type" content="text/html; charset=UTF-8">. For English, the value is always UTF-8. If your content is Cyrillic, Greek, French or any other character set, you need to set it accordingly (Latin alphabet, for example, is ISO-8859). You can check this table for the right code if you're using another character set.
Viewports
There's one more thing to add in your metadata in the <head> element and that's a line that makes sure your content is somewhat visible no matter what sort of device someone is using to browse to your website: smartphone, tablet, laptop, or whatever else they might use.
<head>
<meta name="description" content="Free HTML5 tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="HTML.net"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The content value sets the width of the page to the default width that the device's browser supports and also sets the starting zoom level at a value that will make most of the content visible on most devices, will change and update if they rotate the device, although they'll also be able to zoom in. There are many other properties possible here, like setting a maximum width in pixels, but the values we have given are an acknowledged best practice (as good as we can get) at this time.
Comments
Sometimes it can be awfully handy to leave yourself a note in the code. Maybe it's because you're organizing things or maybe it's because you need to remember why you did something in particular or who did something — who knows. It's really easy to add in a comment that doesn't get parsed by the browser — the browser skips right over it.
Like everything else, an HTML comment must be inside its own set of angled brackets, but the open bracket is immediately followed by the ! symbol and two dashes. To close a comment, add two more dashes and another angle bracket. You can have as much text between those symbols as you need, including other tags.
Example of HTML comments
<!--Reminding myself to check this code for HTML5 validity-->
<!--Updated by AA on July 1-->
<!--This is a piece of code I'm going to troubleshoot <title>Notes</title> -->
You now know how to control all those invisible things that you may never have known existed but that are awfully important and useful.
| Related topics in the | Replies | Views |
|---|---|---|
| No related topics yet | ||