Let’s start with HTML and review what we’ve learned so far.
HTML, or HyperText Markup Language, is markup language. Markup languages are used to group, annotate, and categorize content to describe the content’s semantics in a way that computers can understand. Without HTML, the contents of a web page would look like this to a computer:
- Menu Search
- Sign In
- Purchase a Sophia membership for just $79 per month.
- Choose a course to get started.
- Low-cost, self-paced courses for college credit in a fresh and fun learning environment.
- See how they work.
By annotating and grouping parts of the page with HTML, computers are better able to understand how content is related. For example, HTML is used to indicate that certain parts of a webpage are part of a navigational menu containing hyperlinks or buttons used to navigate from page to page.
<nav> <img src="sophia-logo.png"> <button>Menu</button> <button>Search</button> <a href="/sign-in">Sign In</a> </nav> <aside class=”announcement”> <p> Purchase a Sophia membership for just $79 per month. </p> </aside> <main> <section id="about-courses"> <div class="left"> <p> Low-cost, self-paced courses for college credit in a fresh and fun learning environment. </p> <button>See how they work</button> </div> <div class="right"> <img src="woman-in-chair.jpg"> </div> </section> </main>
The example HTML above showcases many components of HTML syntax. We’ll go over those components in more detail; then, you’ll be able to understand exactly what’s going on in the example HTML.
HTML consists of a series of elements that enclose different parts of the content.
Elements are created with HTML tags. For example, this is a paragraph (p) element:
To create a paragraph in HTML, start with the content of the paragraph.
<p>The web is fun.</p>
The web is fun.
Then, enclose it in a p element by sandwiching the content in between an opening tag
and its corresponding closing tag.
So that it looks like this:
<p>The web is fun.</p>
Altogether, HTML elements are made of an opening tag, then content, then a closing tag.
This section of the course includes some embedded practice areas like the box below. You can practice following the instructions to see how the code changes the lines on the mini screen. The system does not record correct or incorrect answers, so feel free to experiment and practice with your new coding knowledge.
Edit the code in the Editable Code area in the box below. Follow the steps to mark that it is a strongly-worded phrase by wrapping it with the strong tags. This should make the text look bold. You’ll see your changes update live, as you type, in the Live Output section. You can reset everything with the Reset button. Click on the Show Solution button to see the answer.
before the word This.
after the word phrase .
Congratulations, you just wrote code! Next we'll talk about how to structure elements with nesting.
Elements can be nested within other elements. When an HTML element exists inside another HTML element, it is said to be nested within the outer HTML element.
For example, if we wanted to emphasize that the web is very fun, we could wrap the word very in an emphasis (em) element to indicate that it should be emphasized.
<p>The web is <em>very</em> fun.</p>
Take care to open and close the tags of nested elements properly! Note how, in the example above, we open the p element first then open the em element, which means we should close the em element first before closing the p element.
If you don’t open and close HTML elements properly, the browser will try and guess at what you’re trying to do which may lead to unexpected results. So, it’s important to have tags open and close in a way that they’re either inside or outside one another.
Here’s an example of improperly nested elements:
<p>The web is <em>very fun.</p></em>
Properly nesting elements might not sound like a big deal, but it is important for organizing your code and being able to apply attributes. We'll talk about attributes next.
Elements can also have attributes. Attributes contain extra information about the element and don’t appear in the content of the page.
For example, we can add a class attribute to our paragraph:
<p class=”comment”>The web is <em>very</em> fun.</p>
Another element you’ll see used often is the anchor element
which can turn its content into a hyperlink. Anchors can have several attributes, but the most common ones used with them are:
|href||The URL of the link.||
|title||Extra information about the link, like a description of the page being linked to. This appears when a cursor hovers over the link as a tooltip.||
before the words A link.
after the word homepage. This is called "wrapping" the element, with a tag at the beginning and at the end of the line.
If you look at more examples of HTML code, you might see attribute values written without quotation marks:
<a href=https://sophia.org/>A link to the Sophia homepage.</a>
The example above is completely valid, but it’s still not a good idea to omit quotation marks because it can break your HTML in other circumstances. For example, if your attribute’s value contains a space, leaving out quotation marks will break your markup:
<a href=https://sophia.org/ title=The Sophia homepage>A link to the Sophia homepage.</a>
Even though you might see examples of HTML attributes without quotation marks, you should always include them. Doing so avoids unexpected problems and results in more readable code.
You might also see attributes written without values:
The HTML above is shorthand for:
<input type=”text” disabled>
<input type=”text” disabled=”disabled”>
Attributes like disabled are Boolean attributes because their value can be set to true or false. The disabled attribute is given to input elements in order to prevent the user from typing into them. Boolean attributes are set to true if the attribute is present in the element or if its value is the same as the attribute name:
<input type=”text” disabled> <input type=”text” disabled=”disabled”>
They’re set to false if they’re omitted from the element:
Not all elements have an opening tag, content, and a closing tag. Some tags are empty elements and consist of a single tag.
Empty elements are typically used to insert or embed something — like an image — in the page. For example, the img element embeds an image file onto the page:
On the left you see the code, and on the right you see the image displayed.
This section has introduced you to many different parts of HTML. In the next section, we'll look at how to organize them to make a page.