Now that you’ve learned about some of the most common HTML elements, it’s time to learn how to set up an HTML file.
HTML files require certain elements to set up the document properly. You can let web browsers know that you are using HTML by starting your document with a document type declaration.
The declaration looks like this:
This declaration is an instruction, and it must be the first line of code in your HTML document. It tells the browser what type of document to expect, along with what version of HTML is being used in the document. For now, the browser will correctly assume that the html in <!DOCTYPE html> is referring to HTML5, as it is the current standard.
In the future, however, a new standard will override HTML5. To make sure your document is forever interpreted correctly, always include <!DOCTYPE html> at the very beginning of your HTML documents.
Lastly, HTML code is always saved in a file with an .html extension.
The <html> tag
The <!DOCTYPE html> declaration provides the browser with two pieces of information (the type of document and the HTML version to expect), but it doesn’t actually add any HTML structure or content.
To create HTML structure and content, we must add opening and closing <html> tags after declaring <!DOCTYPE html>:
Anything between the opening <html> and closing </html> tags will be interpreted as HTML code. Without these tags, it’s possible that browsers could incorrectly interpret your HTML code.
So far you’ve done two things to set up the file properly:
- Declared to the browser that your code is HTML with <!DOCTYPE html>
- Added the HTML element (<html>) that will contain the rest of your code.
Let’s also give the browser some information about the page itself. We can do this by adding a <head> element.
Remember the <body> tag? The <head>element is part of this HTML metaphor. It goes above our <body> element.
The <head> element contains the metadata for a web page. Metadata is information about the page that isn’t displayed directly on the web page. Unlike the information inside of the <body> tag, the metadata in the head is information about the page itself.
The opening and closing head tags typically appear as the first item after your first HTML tag:
What kind of metadata about the web page can the <head> element contain?
A browser’s tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.
<title>My Coding Journal</title>
If we were to open a file containing the HTML code in the example above, the browser will display the words My Coding Journal in the title bar (or in the tab’s title).
So far, we have learned about:
- <!DOCTYPE html>, the declaration specifying the version of HTML for the browser
- The <html> tags that enclose all of your HTML code
- The <head> tag that contains the metadata of a webpage, such as its <title>
Next, you will learn about new types of elements that go inside the body.
Linking to Other Web Pages
In a web page you essentially need to create links to other web pages. In order to achieve this, we can add an anchor element <a> and including the text of the link in between the opening and closing tags.
|<a>Coding With Basir</a>|
Technically, the link in the example above is incomplete since it doesn’t specify where it is linking to when clicked! We saw the term URL earlier.
The anchor element in the example above is incomplete without the href attribute to specify it’s URL. This attribute stands for hyperlink reference and is used to link to a path, or the address to where a file is located (whether it is on your computer or another location).
|<a href=“https://codingwithbasir.com/”>Coding With Basir</a>|
In the example above, the href attribute has been set to the value of the URL https://codingwithbasir.com/.
Opening Links in a New Window
Have you ever clicked on a link and observed the resulting web page open in a new browser window? If you want to do the same thing and make your link open in a new tab, you can use target attribute.
The target attribute specifies how a link should open.
For a link to open in a new window, the target attribute requires a value of _blank. The target attribute can be added directly to the opening tag of the anchor element, just like the href attribute.
|<a href=“https://codingwithbasir.com/” target=“_blank”>Coding With Basir</a>|
In the example above, setting the target attribute to “_blank” instructs the browser to open the coding with basir page in a new window.
Linking to Relative Page
In the last section you learned how to link to external web pages. However, sometimes you need to have links to internal pages like Home, About and Contact.
Before we learn how to link between internal pages, let’s establish where our files are stored. When making a multi-page website, developers usually organize their files into folders like following:
The example above shows three different files — about.html, contact.html, and index.html in one folder.
If the browser is currently displaying index.html, it also knows that about.html and contact.html are in the same folder. Because the files are stored in the same folder, we can link web pages together using a relative path.
In this example, the <a> tag is used with a relative path to link from the current HTML file to the contact.html file in the same folder. On the web page, Contact will appear as a link.
A relative path is a filename that shows the path to a local file (a file on the same website, such as ./index.html) versus an absolute path (a full URL, like https://www.google.com/index.html which is stored in a different folder). The ./ in ./index.html tells the browser to look for the file in the current folder.
Linking At Will
Links don’t always have to be in the form of text! You might have an image or some other type of content that you wish to use as a link to other addresses.
So far, we’ve added links that were made up of only text, like the following:
|<a href=“https://codingwithbasir.com/” target=“_blank”>Coding With Basir</a>|
Text-only links, however, aren’t as flexible as we want them to be.
Thankfully, HTML allows you to turn nearly any element into a link by wrapping that element with an anchor element. With this technique, it’s possible to turn images into links by simply wrapping the <img> element with an <a> element.
|<a href=“https://en.wikipedia.org/wiki/Mars_rover” target=“_blank”><img src=“#” alt=“A mars rover”/></a>|
In the example above, an image of a mars rover has been turned into a link by wrapping the outside of the <img> element with an <a> element.
Linking to Same Page
Sometimes while building a web page, the content needed to be displayed is a lot and wouldn’t fit in the standard size of the screen. So it is better to have a way of linking to different parts of the same page. You might have seen websites that automatically scroll to a specific portion of the page when clicking on a link or button.
In order to link to a target on the same page, we must give the target an id, like this:
|<p id=“top”>This is the beginning of the page!</p>
<h1 id=“bottom”>This is the end! </h1>
In this example, the <p> element is assigned an id of “top” and the <h1> element is assigned “bottom.”
An id should be descriptive to make it easier to remember the purpose of a link. The target link is a string containing the # character and the target element’s id.
In the example above, the links to <p id=”top”> and <h1 id=”bottom”> are embedded in an ordered list. These links appear in the browser as a numbered list of links. An id is especially helpful for organizing content belonging to a div!
The rest of this lesson will focus on methods to make your html file more readable. Readability becomes such an important issue when the HTML file grows over time. Developers use two tools to visualize the relationship between HTML elements: whitespace and indentation.
Both tools take advantage of the fact that the position of elements in a browser is independent of the amount of whitespace or indentation in the index.html file.
For example, if you wanted to increase the space between two paragraphs on your web page, you would not be able to accomplish this by adding a space between the paragraph elements in the index.html file. The browser ignores whitespace in HTML files when it renders a web page, so it can be used as a tool to make code easier to read and follow.
What makes the example below difficult to read?
|<body><p>Paragraph 1</p><p>Paragraph 2</p></body>|
You have to read the entire line to know what elements are present. Compare the example above to this:
This example is easier to read, because each element is on its own line. While the first example required you to read the entire line of code to identify the elements, this example makes it easy to identify the body tag and two paragraphs.
A browser renders both examples the same way:
The second tool web developers use to make the structure of code easier to read is indentation. The spaces are inserted using the space and tab bars on your keyboard.
The World Wide Web Consortium, or W3C, is responsible for maintaining the style standards of HTML. At the time of writing, the W3C recommends 2 spaces of indentation when writing HTML code. Although your code will work without exactly two spaces, this standard is followed by the majority of professional web developers. Indentation is used to easily visualize which elements are nested within other elements.
In the example above, Paragraph 1 and the <div> tag are nested inside of the <body>tag, so they are indented two spaces. The Paragraph 2 element is nested inside of the <div> tag, so it is indented an additional two spaces.
In some cases you might need t add comments to your HTML file.
Comments begin with <!– and end with –>. Any characters in between will be ignored by your browser.
|<!– This is a comment that the browser will not display. –>|
Including comments in your code is helpful for many reasons:
- They help you (and others) understand your code if you decide to come back and review it at a much later date.
- They allow you to experiment with new code, without having to delete old code.
|<!– Favorite Films Section –>
<p>The following is a list of my favorite films:</p>
In this example, the comment is used to denote that the following text makes up a particular section of the page.
|<!– <p> Test Code </p> –>|
In the example above, a valid HTML element (a paragraph element) has been “commented out.” This practice is useful when there is code you want to experiment with, or return to, in the future.
Let’s review what you’ve learned this lesson:
- The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
- The <html> element will contain all of your HTML code.
- Information about the web page, like the title, belongs within the <head> of the page.
- You can add a title to your web page by using the <title> element, inside of the head.
- A webpage’s title appears in a browser’s tab.
- Anchor tags (<a>) are used to link to internal pages, external pages or content on the same page.
- You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to.
- Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
- Indentation also helps make code easier to read. It makes parent-child relationships visible.
- Comments are written in HTML using the following syntax: <!– comment –>.