Introduction to HTML (pt. 2)
<title> element
A browser's tab displays the title specified in the <title> tag. The <title> tag is always inside of the <head>.
Root Directory
A main folder where all the files for the project are stored. As the size of the projects you create grows, you may use additional folders within the main project folder to organize your code.
Whitespace and Indentation
As the code in an HTML file grows, it becomes increasingly difficult to keep track of how elements are related. Programmers use two tools to visualize the relationship between elements: whitespace and indentation. These help organize your code and make it easier to read.
Adding comments to code in HTML
HTML files also allow you to add comments to your code. Comments begin with <!-- and end with -->. Any characters in between will be ignored by your browser.
Document Type Declaration
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. <!DOCTYPE html> 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.
Opening links in new window
It's possible that one or more links on your web page link to an entirely different website. In that case, you may want users to read the linked website, but hope that they return to your web page. This is exactly when the target attribute is useful! 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.
Links connected to images/media
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.
<html> 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.
<head> 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.
Indentation in HTML
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.
Linking to same page
When users visit our site, we want them to be able to click a link and have the page automatically scroll to a specific section. In order to link to a target on the same page, we must give the target an id, like this: In this example, the <p> element is assigned an id of "top" and the <h1> element is assigned "bottom." An id can be added to most elements on a webpage.
<a> anchor element
You can add links to a web page by adding an anchor element <a> and including the text of the link in between the opening and closing tags. The anchor element in the example above is incomplete without the href attribute. 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). The paths provided to the href attribute are often URLs.
