- Understand what HTML stands for and it’s purpose
- Know how to identify and use attributes for appropriate elements
- Know and explain the difference between block and inline elements
- Begin using semantic elements to build an HTML layout
Students should spend 15-20 minutes reading, watching, and completing the content in the Chrome Dev Tools resource before attending class.
HTMLHyperText Markup Language
CSSCascading Style Sheet
HTML ElementA building block that makes up the structure of a web page. Encompasses tags and content
HTML TagUsed to create HTML elements. Some elements have an opening and closing tag, others only have an opening tag
AttributeAdditional values that configure HTML elements and adjust their behavior
HyperlinkA reference to an external resource
BlockA block-level element occupies the entire width of its parent element (container), thereby creating a “block.”
InlineAn inline-level element only occupies the space bounded by the tags defining the element, instead of breaking the flow of the content.
Nestingwhen an element lives inside of another element
The front-end of the web is based on three major technologies:
- HTML aka “STRUCTURE”: HyperText Markup Language (HTML) defines the structure and semantics of web pages on the web.
- CSS aka “PRESENTATION”: Cascading Style Sheets (CSS) sets the look and style of a web page. CSS provides style to the structure provided by HTML.
Today, we will build a foundation of HTML knowledge and skills.
What is HTML?
HTML is used to create electronic documents (pages) that are displayed on the Web. It was first developed by Tim Berners-Lee and released in 1990. It was originally created to allow people to publish and exchange scientific documents. This exchange was possible as a result of
hyperlinks which allowed pages to have links to other documents. However, because HTML was so accessible and had the potential to be used for other applications, it moved over to the mainstream in browsers like Netscape and Internet Explorer.
HTML ensures the proper formatting of content (text, images, video) so that your internet browser can display them as intended. As a result, HTML is made up of many elements. These elements are used to hold our content and define how the browser must format and display the content. The term
markup refers to the set of tags used to structure a page.
Elements & Tags
Elements are created with either one or more tags and are used to describe and hold our content. These tags are created by using angle brackets
<>. Most elements consist of an opening and closing tag which wraps content like text.
Elements which are created with only one tag are called empty elements (also known as self-closing elements) and cannot have any child elements. Examples of this are
Elements which can contain child elements are created with an opening and closing tag which surround the child elements and/or text content.
Let’s say that we had some text and we wanted to denote that this text was a paragraph.
This is an example paragraph. We should probably place this inside of a tag. If we place it in a tag it will be easier to access and style.
We’d wrap the text in paragraph tags.
<p>This is an example paragraph. We should probably place this inside of a tag. If we place it in a tag it will be easier to access and style.</p>
Anatomy of a Tag
<p> to signal to the browser that everything that’s about to follow is part of a paragraph and
</p> to let the browser know that this paragraph is done. When a user visits our application, the browser loads up the HTML and parses it into the elements that will eventually make up our user interface.
Pro-Tip: Type both opening and closing tags before typing content to avoid making silly mistakes that are hard to hunt down later.
Here is an example of a slightly more robust document:
Turn & Talk
- What makes an HTML element different than an HTML tag?
- What is the difference between a “regular” element and a self-closing, or empty element?
- What will the browser do if it doesn't see a closing tag for a given element?
Any HTML element can have attributes. An attribute provides additional information about an element. It must be specified in the opening tag of an element, and usually come in name/value pairs. A
class is a commonly used attribute:
The name of the attribute in the example above is class, and the value is
"paragraph". The are separated by a single
=, and no spaces.
Attributes in Images
We use HTML tags to mark up text to show its semantic meaning. The browser uses these tags to structure the document. As we talked about earlier in this lesson, most tags have an opening and closing tag, but a few do not. For example, images defined using the
<img> tag do not have a closing tag.
Consider the following:
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-340/turing.png" alt="Turing Logo">
Our browser is more than happy to load up an image, but we need to tell it where that image is located. Our
<img> tag needs extra information to know which image to display. That’s where the
src attribute comes in. The
alt attribute provides alternative text in the case the user is not able to view the image.
Attributes in Hyperlinks
Another important tag is the
<a> tag. These are the tags we use for creating hyperlinks. You might have noticed that the
<a> tag behaves a little differently than the
<p> tags. We can use the
<a> tag to mark up a few words, while the other tags denote a big section - what we might call a “block” — of our page.
Consider the following example:
<p> Welcome to the <a href="http://turing.io">Turing School of Software and Design</a>. </p>
In this case, the
<a> tag needs to know which url it should be linked to. We use the
href attribute to set the links destination.
href is an abbreviation for “hypertext reference.”
Turn & Talk
- What are HTML attributes?
- Which attributes have you seen used before, and what was the purpose of each of those?
Block and Inline Elements
You might notice that some tags behave a little differently in a layout than others. Some tags make content stack, while others let content sit next to each other. What’s that about?
This is an important distinction:
Block elementsstack on top of each other. Each one starts and ends on its own line.
Inline elementscan be used to mark up a few words inside of a block element.
Most elements are block elements. Some common inline tags you might see in the wild:
<em>is used to denote that you’d like to emphasize some text.
<strong>is used to denote that this text is important.
<strong> to denote the semantic meaning of the content.
You may notice that the
<em> tags are italicized and the
<strong> tags are displayed in bold. The browser does this by default. That said, you should still only use these tags to convey meaning. We can change the way elements appear by using CSS - later.
All of the tags we discussed above have some kind of semantic meaning. Assistive technology devices will use them to help people with visual impairments understand the page. Search engines will use them to figure out the structure of your page. You should use semantic HTML tags whenever possible and appropriate.
Disclaimer: There are many, many more semantic tags than the ones we’re discussing today.
Some think of
<div> as the flavorless Jello of HTML tags; they don’t have any meaning in and of themselves and they typically don’t come with any built-in styling from the browser.
There is just one important difference between the two:
<div>is a block element.
<span>is an inline element.
We’ll discuss these more in a later lesson when we talk about CSS.
Turn & Talk
- What is the difference between block and inline elements?
imgelements block or inline?
aelements? Explain and/or prove it.
Nesting HTML Elements
Before we really start putting what we’ve learned into practice, it’s important to be familiar with vocabulary and certain patterns. Specifically, around nested HTML elements.
As sites become more complex, more elements are used, and more are used in relation to each other. Let’s take a look at this example below:
<nav> <ul> <li><a href="home">Latte</a></li> <li><a href="about">Cappucino</a></li> </ul> </nav> <main> <section> <h2>Coffee Ipsum</h2> <p>Variety, half and half, trifecta medium arabica froth percolator. Mug brewed aromatic that sit to go latte. Cup, skinny cup, as blue mountain turkish, pumpkin spice.<p> </p>Pumpkin spice americano java coffee doppio and sweet mug java saucer variety aromatic. Flavour, cappuccino macchiato et at, latte french press cream rich con panna barista single origin.</p> </section> </main>
<main> elements are on the same level - or sibling elements. We know this because they sit on the same indentation line, and they are not wrapped around one or another.
Nested inside the
<main> element is a
<section>. Nested inside the
<section> is an
<p> and another
<p>. We can communicate the same relationship by saying “the
<section> is wrapped around the
<h2> and both
Because so much nesting occurs in HTML, it is absolutely essential that you write clean, easy-to-read code with consistent use of white-space and indentation.
Thinking Bigger Picture
We’ve learned how to use some pieces of HTML, but it’s important we can put them together to build a site. Two important considerations along these lines are:
- required HTML Elements
- planning the layout of a page
Required Structure of any HTML Page
Every page that is built with HTML needs to have the following four elements to start:
<!DOCTYPE html>declaration: The doctype declaration is not an HTML tag, but rather tells the browser which version of HTML the page is written in.
<html></html>tag wraps the entire document
<head></head>tag wraps elements that shouldn’t be rendered - information about the page and how to process it
<body></body>tag wraps elements that should be displayed - the actual content that will appear in the browser
Containing Elements, Semantics & Text
HTML5 has a variety of semantic tags, or HTML tags that provide additional meaning through descriptive naming, available for us to use. These tags are an easy way to not only make our code more understandable and clear to other developers (and our future selves), but they are also a great way to incorporate basic accessibility into your HTML for users who may need to access your website in non-traditional ways.
Planning a Layout
In your groups, use the following semantic HTML tags to create the basic structure of a twitter profile on your chart paper. Click the links below to read the docs for each HTML element. (notice they all send you to the MDN docs). Think about which elements are most fitting and how it could be used to create the basic structure of the page.
Recommended starting point: Mark up the hard copy of the image with the elements you would use for each part, then consider the ordering/nesting necessary to achieve that as you write your HTML on the chart paper.