When writing in HTML, nearly every tag has an ending tag. For example, a <p> tag would show that you are starting a paragraph. Therefore, this tag must have a matching </p> tag to show that you are ending a paragraph.
However, some tags written in HTML do not have ending tags, and therefore should be “self-closing.” A self-closing tag should end with “/>” instead of “>”. For example, when adding an image to a page, we use the html <img> tag. However, after defining the source of the image, we simply put a slash since this is a self-closing tag. For example:
As you can see, this tag has no corresponding ending tag.
NOTE: Notice that the Doctype code we have previously entered does not have a slash, nor a closing tag. This is because the Doctype is not actually an HTML tag, but a declaration.
To start our webpage, we will add a <HTML> start tag, and corresponding </HTML> closing tag. Once we enter these, our page should look something like this:
Between our HTML tags we now need to add some head tags. Head tags include the <HEAD> start tag, as well as a corresponding </HEAD> tag. The head tag holds many things, such as references to external JavaScript and/or CSS pages, internal JavaScript and/or CSS, and the title of your page. Because we are discussing solely HTML here, we are only going to discuss the title.
The title of our page will appear on the tab in your browser. The title can be defined by adding the <TITLE> start tag, and corresponding </TITLE> closing tag in between the head tags. Any text written between your starting and ending title tags will be the title of your HTML page, and therefore will appear on your browser’s tab for your page.
After running your page and noticing the change on the HTML tag, you may become curious as to how you can change the picture on this tab, as well! To do this, we will add a tag in between our head tags, just like we did with the title. This link tag is not related to the title, and therefore should be outside of the title tag. We must define this link tag as a shortcut icon, as well as define what this picture is. This picture must have a “.ico” extension, and we should know the location of the picture’s file relative to our page. It may be easier to move the picture you are going to use to the same folder as our html page is now. Our link tag should look something like this (where the picture would be named “favicon”):
if you have a picture to use, but it needs a .ico extension, you can convert your picture Here. (Just be sure to select “Generate only 16×16 favicon.ico”)
After adding your link and title tags, your code should look something like: