Welcome to the third lesson of our Web Design for Kids series, HTML Structure!
We will be learning how to write our site’s structure with HTML. This structure will get us ready for the site’s content, which we will be adding in the next lesson.
If we were to compare the web design process to a building (like a Tuts+ Town building!) the HTML would be something like the building’s foundation and framing; it’s the base from which everything else is built.
Important! The files we will be creating in this lesson can be downloaded here.
What Exactly is HTML?
We have mentioned HTML a lot in this series already, but haven’t yet talked about what it is exactly, other than a “super cool secret language”. The web is all about languages and communication, and HTML is an important part of all this.
HyperText Markup Language, HTML, is a language that marks up a site’s content for a browser to understand and display. It gives structure to a regular ol’ text file that a browser would otherwise not be able to read.
For example, we can’t type up a paragraph in our text editors and expect a browser to just know it’s a paragraph. The paragraph text has to be inside of the right HTML markup, a paragraph, or <p> element (any bit of funny looking text like the <p> here just shows that this text is also code).
Elements
HTML is built of elements that have important meaning, like the paragraph element mentioned above. Each element has an opening (the beginning) and a closing (the end) tag, with site content written between these two tags.
These opening and closing tags for each element are written within angle brackets (like these: < >), though a closing tag also has a forward slash (like this: < / >).
Planning a Structure
In the previous course we drew up our website design and now it’s time to prepare the structure, or framing, of this design.
We’ll start this off by adding some general notes to our site preview to get a better feel of how to best map this out.
Within the body of our html file we will have several primary elements: a header, a main part, and a footer.
Prepping Our Documents
We also talked about how to set up site files in the previous lesson, so now we are going to put this knowledge into action!
- First, create a folder on your computer named “tutsfolder”.
- Now it’s time to open up that text editor which is ready and waiting for something amazing to happen.
- Next, create a new document with this editor (usually by selecting File > New File) and save it as “index.html” in “tutsfolder”.
Remember:“index” is the file name and “.html” is the extension, which tells us the file type.
Websites can be made up of many, many pages, so the main page is always called “index.html” to say “Hey, this is where it all starts!”
Now, let’s finally write some HTML.
Building a Structure
Now we can add our structure. Again, think of this as putting together a building, we need to get the framing in place.
The very first piece of HTML we will write is the <!DOCTYPE html> which tells the browser “Hey, this is an HTML document!”
<!DOCTYPE html>
Then, under that, we need the <html> element:
<!DOCTYPE html><html></html>
Everything else will be nested within this element.
Wait. Nesting?
“Like a bird’s nest?” Well, maybe more like nesting dolls, or to stay with our neat town theme, nested buildings. Nesting is what happens when we place an element inside of another one.
The bit of code below shows a paragraph element nesting within the body element, because it lives between the body’s opening and closing tags.
<body><p>This paragraph element is nested inside the body element.</p></body>
We make the code in our HTML file easier to read by pushing nested elements further to the right. Like this:
OK, back to work...
The Head
Now, nested within this html element we will want to add a head element.
The head will contain the title of our page, which will show up in a browser tab. Lots of nesting!
<html><head><title>Tuts Town</title></head></html>
A lot of what is included in the head of an HTML document isn’t seen on the website itself, but instead helps tell search engines, like Google, what our website is all about.
Also, later when we create a new file to add styles to this one, we will connect these two documents together through a link added in the head. So, it’s kind of like a behind the scenes control center that our website’s visitors don’t get to see for the most part.
The Body
Everything on our site that we will see in the browser will be nested within the body, and this is where the fun really begins!
The Header
The header element is not the same as the head element that we have already talked about. The header lives within the body and generally contains all the stuff at the top of a site.
The very first thing we have at the top of our site is a header containing some text and an image of Tuts+ Town.
<html><head><title>Tuts Town</title></head><body><header></header></body></html>
We will only be adding the header for now to prepare for the content to be included.
The Main Part
The main part of the Tuts+ Town site contains the most important information. The list of town businesses is what our website is all about, so all this content will live within an element called main.
We will talk about the smaller containers (like the three different groups: Sleep, Food, and Shop) within this larger main container in the next lesson when we add the content.
The Footer
The footer is the part at the very end of the site. We will usually see some links here, such as for Facebook and Twitter, or some small text just letting people know who created the site.
We will add a sentence proudly saying that we made the site within the footer element.
<footer> </footer>
Remember: at this point we are still adding elements that are nested within the body.
Final Review
Now, let’s do a final review of our HTML structure so far.
It’s easy to forget closing tags, which would cause some errors on our website. We want to make sure that every tag we opened has a closing tag.
Looks like everything is closed! Time to start adding content to this super solid structure we created.
Quick Note On Notes
HTML lets us write helpful notes within our work. These notes won’t show themselves on our website, but are brilliant for adding helpful bits of information for other designers looking at our code.
<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->
The HTML file for this lesson (which you can download) has several notes to help us understand it better.
Well Done!
In this lesson we learned about what HTML is, what elements are, how to nest these elements, and how to setup a basic HTML structure with some common container elements.
In the next lesson, we will be adding our site’s text and images into the newly built structure.
See you around town!
