HTML is broken into small pieces called elements. Elements are specific pieces of text that allow you to interact with your user (usually, but not always this means displaying something in their browser).
At their core, there are four pieces that can be included in an HTML element:
At a minimum, each element must include a tag declaration. This is made up of an opening angle bracket, a tag name, and a closing angle bracket. Some HTML elements only require an opening tag.
In HTML the tag name is important: it defines how a user will interact with the data you are providing to them.
For instance a
p tag shows paragraph text while an
input takes in user input.
For most HTML elements, you will want to add content (the next section in these notes). To do this, we need a way to tell when a tag ends
A wild closing tag appears!
Closing tags look fairly similar to opening tags, but differ in one major way:
between the opening angle bracket and the tag name, closing tags have a forward slash (
Sandwiched between the opening and closing tags of an HTML element is that element's content. This can take one of two forms:
Including HTML within an element is called nesting and allows us to group similar and related content together. This nesting can also be helpful when we look at styling the page and working with CSS.
Attributes are listed within the closing tag and take the format of
So to declare an input with a
type attribute equal to
checkbox would look like this:
idAttributes Like No Other
This is actually a bit of a fib.
When writing your HTML,
id attributes look the exact same as any other attribute.
<input type="checkbox" class="search" id="nav-search-1">
While writing these two attributes might be the same, they do have a few special characteristics and require a bit more care.
This is due to the fact that the
Classes are a bit like descriptors or model numbers. A single element can have multiple classes separated by spaces. They describe what a single element is like. In class we looked at what the classes might look like if we were trying to describe my laptop:
While this computer COULD be the only 2014 13 inch macbook in the room, that isn't a requirement: there can be a lot more like it with these same (and possibly more) classes.
computertag does not exist in basic HTML 5 but this is just a small look into custom HTML components which we will be covering later in this course!
Unlike classes, the
id attribute is tied to a single element.
Think of this like a model number.
Each id on the page must be unique or your HTML will not be valid.
This allows a very specific selector to be used and will always turn up with only one result.
In the input example above, we can have multiple
search inputs, but only one can be the first search field in our navbar.
When working with HTML, we can have a blank file, just start adding elements, and Chrome will know how to read this in. However, while this can be rendered, this HTML would not be valid. Instead to start off with valid HTML, we need to pull in a bit of boilerplate HTML to get us started:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
This declares the basic structure of HTML, sets the default language to English, and limits some of the characters we can use to things that the browser understands (utf-8).
When you are adding things that you want directly to interact with the user, this will be nested in the
body element, while the
head element is used to set up the page, set the menu bar
title, and add information for things like Google, Twitter and Facebook to search on.