- Notifications
You must be signed in to change notification settings - Fork143
License
Moringa-School-Classroom/phase-0-html-document-structure-lab
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- Recognize basic HTML document structure
- Recognize HTML comments
- Describe the
headsection and its contents - Create an HTML document
Every HTML document has a specific set of required tags. Because these arerequiredevery time we create a web page, it is valuable to gain a morein-depth understanding of what these tags do, why they are useful, and how theywork in context to the modern web.
We will be both reviewing setting up well-formed HTML documents and expanding abit on theDOCTYPE,html andhead tags, as well as introducing how to addcomments within our HTML code.
If you haven't already, fork and clone this lesson into your local environment.Navigate into its directory in the terminal, then runcode . to open the filesin Visual Studio Code.
Let's start by adding the bare essentials of an HTML document to the providedindex.html file:
- A
DOCTYPEtag, which looks like this:<!DOCTYPE html> - Opening and closing
htmltags - Opening and closing
headtags nested inside thehtmltags - Opening and closing
bodytags nested inside thehtmltags
Note: Recall that best practice indicates that any HTML elements that arenested inside other HTML elements (i.e., between the opening and closing tagsof another element) should be indented. It is notnecessary to useindenting, either for the HTML to render properly or to pass the tests, butit's a good habit to get into. Go ahead and indent the
headandbodytagsinside thehtmltags, if you haven't already.
If written correctly, runninglearn test now will pass three of the seventests.However you will not be done yet! We have to makeall the testspass in order to make the test code happy! Let's get to it!
Let's take a closer look at these tags.
At the top of every HTML document, you're always going to start off with thesame element,DOCTYPE. In the early days of the internet, there were fewerstandards, and it was important to declare the specific way we wanted browsersto interpret the file at the top of each file. Netscape and Internet Explorerwould look for this declaration and handle the content differently depending onwhat it found. These days, every current browser is compatible with HTML5, andDOCTYPE is mainly used to tell the browser to render the page in standardscompliant mode.
TheDOCTYPE element, as with all HTML, starts with a< and ends with a>.Uniquely, theDOCTYPE tag starts with an exclamation point,!, followed byDOCTYPE, then specifies which version of HTML we want to use. In HTML5, wejust writehtml and the browser interprets the rest of the document as HTML5.
The next element is also always required:<html>. This tells the browser thateverything that falls between the opening and closinghtml tags is to beinterpreted as HTML code.
One attribute that is important to include in the<html> tag islang, whichdeclares what language the webpage is written in. In our case, writing inEnglish, we will uselang="en". This helps search engines to know whatlanguage a page is written in. Google, for instance, can use thelangattribute to know when to prompt users about translating web content.
<htmllang="en"></html>
Go ahead and add the language attribute to thehtml element. Now, if you runthe tests again, there should be four passing.
Sometimes we want to leave notes either for ourselves or for other developersinside of our HTML files. An example might be a brief explanation of what somepart of the code is doing, or an important message or reminder. We can writecomments by wrapping the text we want like so:
<!-- This is a comment! -->Text included in a comment will not be visible on the webpage, but will bevisible in the browser console and.html file.
Inside ourhtml tags, we divide the page into two main sections,head, andbody, which both play unique roles. The remainder of our HTML lessons willcover everything within thebody section, but before we get there, there aresome additional bits of information we need to understand regarding thehead.Thehead section is not visible to a website visitor, but it contains a lot ofuseful info about our webpage.
In thehead section, we place a number of specific tags, most notably:
<link><title>
Let's look at each of them in turn:
The<link> tag is for importing files.
CAREFUL: It's easy to get confused here because web pages are full of links,but also use a<link> tag. "Links" that you click on are located within the<body> element. The<link> tags are located in the<head> element.
Most commonly, we'll use<link> to import CSS files. Go ahead and add thefollowing inside yourhead element (don't forget to indent!):
<linkrel="stylesheet"type="text/css"href="style.css">
With a simple website, linking a single style sheet might work just fine. Often,however, on fully developed websites, multiple style sheets are linked in thehead. For example, when doing the final polishing of a web site you might seea series of<link> definitions like:
<linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/><linkrel="stylesheet"type="text/css"href="company.css"/><linkrel="stylesheet"type="text/css"href="engineering-department.css"/><linkrel="stylesheet"type="text/css"href="project-x-launch.css"/><linkrel="stylesheet"type="text/css"href="typography.css"/>
In this example we're getting some CSS information from theBootstrap project, we're integrating a companystyle standard, an engineering style standard, a style motif for the launch of"Project X" and then we're adding some specific rules about font display. Youcan bring in alot of information with the<link> tag!
This specific example aside, you'll be learning a lot more about linking filesto create stylistic effect in later lessons.
Run the test again; you should now have five passing. Only two more to go!
One more common tag we find in thehead istitle. Thetitle, as its nameimplies, is where the title of the webpage should be entered. Text added insidethetitle tags will appear up on your browser tab. Add the following title forourindex.html page:
<title>My Site Title</title>
Notice that unlike the previous tags we've discussed,title has an opening andclosing tag. In most modern browsers, tabs are fairly small, so it is often bestto keep the title brief, or it will not be fully visible.
Adding the title should get the last two tests passing! Run the tests one lasttime to verify.
In this lesson, we've reviewed the basics of document structure, as well as whatis typically contained within thehead. Using thehead section, we are ableto add relevant data about our webpage as a whole. As a bonus surprise, bylearning how to make our web pagessearch engine friendly, we've also dabbleda bit into the basics of Search Engine Optimization! We are now ready to take adeeper dive into the visual content of HTML pages.
About
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Languages
- JavaScript99.0%
- CSS1.0%