Metadata is all the information people don't see in the page. In our previous pages there wasn't very much of it; we're going to change that!
The simplest type of metadata is the page title. This is set with the <title> tag (inside your header - read this if you aren't sure what that is).
It doesn't show up inside the page, but it shows up on search engines and in the web browser's top bar.
You can set a simple title like so:
<head>
<title>This Is My Page Title!</title>
</head>
Try it - you'll see it changes the name of the tab! Titles are very useful and necessary - a raw path is a really ugly name for a webpage.
Perhaps the most dubiously-named tag in HTML is the <link> tag.
It always goes inside a <head>, and does not have content.
<link> always looks like this:
<link rel="something" href="something" />The "rel" property defines what this link means, and the "href" property defines the file we're linking.
This does not create an anchor like the <a> tag - it is purely metadata. It's used to import styles (we'll cover these later)
and favicons. Favicons are the little image next to the name of each tab. Let's import a favicon:
<link rel="icon" href="favicon.png" />This literally means "use favicon.png as the icon for this site". Note that "favicon.png" is not a magic name - you can use any image file, as long as it's a ".png" or a ".ico". Other formats might not be supported.
Another type of hidden information is a comment. This is some text that html completely ignores. It's only there for human developers to read - or for scripts to process! You write comments sorta like a normal HTML tag:
<!-- This is a comment! -->Note the normal tag less than and greater than signs, the exclamation mark (indicating a special tag - note that DOCTYPE is much the same way!), and the two dashes before and after. These must all be exact! If you do it wrong, your comment text will be rendered as normal text, which can be quite embarrassing.
Comments are not generally considered metadata - they're information hidden from the user, but they don't actually do anything. Use comments to explain to other developers what your code does.
[/] [#template.html]