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.
<div>
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 (/
).
</div>
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.
The last piece that makes up an HTML element is a set of attributes that can be added ALONGSIDE the main content. Think of these attributes as modifiers: they don't tell the story (that's what the content is for), instead attributes allow you to change the default behavior of a tag or give extra information to be used for CSS and Javascript.
Attributes are listed within the closing tag and take the format of {{attribute-name}}="{{attribute-value}}"
.
So to declare an input with a type
attribute equal to checkbox
would look like this:
<input type="checkbox">
class
and id
Attributes Like No OtherThis is actually a bit of a fib.
When writing your HTML, class
and 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 class
and id
attributes give us a lot of power to quickly find and work with specific HTML elements from CSS and Javascript.
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.
Note The
computer
tag 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.