KODE WITH KLOSSY

Welcome to Intermediate HTML!

 
KEY POINT

Let's write down the learning goals and technical vocabulary for today's lesson!

🎯 LEARNING GOALS

Understand and implement nesting with HTML elements

Identify and use container elements

📗 TECHNICAL VOCABULARY

Attribute

Class

Container Elements

HTML

HTML Element

Nest

Wrap

 

Nesting Elements

In most HTML documents, we will see nesting. This means that one (or more) elements will live inside of another element. There are two words you’ll hear in regards to nesting: nest and wrap.

One common example is when you see one word within a paragraph that is a link. In the example below, we would say that the <a> element is nested inside of the <p>.

<p>“Don't let anyone rob you of your imagination, your creativity, or your curiosity. It's your place in the world; it's your life. Go on and do all you can with it, and make it the life you want to live.” - <a href="https://www.space.com/17169-mae-jemison-biography.html">Mae Jemison</a>, first African American woman astronaut in space</p>

To aid in formatting pages (which we will go into more in our next CSS lesson), we can use container elements. Their job is to hold a group of elements together. In the example below, the nav element is wrapping the h1pinput, and button elements. You could also say that the h1p<a>input, and button elements are nested in the nav element.

<nav>
     <h1>
Author Finder</h1>
     <p>Search for your favorite author:</p>
     <input placeholder="Author Name">
     <button>Go!</button>
</nav>

It’s also important to point out the use of indentation in the example above. Since  nav is the parent or wrapping element, it is not indented at all. Every element nested inside of it is indented one tab. The HTML will work even if indentation isn’t used, but it makes it much more readable for you and others.

👩‍💻 Try-It: Nesting Elements

Let's fork this repl.it project and follow these steps:

  1. First, write an empty div tag.

  2. Inside of the div tag, write 2-3 paragraphs.

  3. Outside of the div tag, write one more paragraph.

  4. In CSS, add a border to the div element. (If you forgot the syntax, check this out.)

  5. Check your indentation - the div and last paragraph should be indented once, and the paragraphs nested inside the div should be indented twice.

Why did we use CSS in an HTML lesson?


Why did we use CSS in an HTML lesson? Sometimes CSS, especially the border property, can help us see how HTML code, particularly a container element, is working. In the Try It below, you'll use a div element for the first time. You’ll be seeing this more and more! div is an element that is used to contain other elements.




Other container elements we can use:


  • nav
  • header
  • section
  • aside
  • footer

For all the container elements listed above, they behave the same as a div. They just hold other elements and keep them contained. We should use them only when appropriate - but there isn’t a right or wrong as to how to use them. Two sites could look exactly the same, but the code that created them could look quite different!





Explore: Container Elements 👉

What type of content, do you predict, would be appropriate to be contained in each of the elements listed above?

Visit the landing page for Spotify, and answer these questions with your breakout group:

  1. What information is in the header/nav?
     

  2. Is there a footer? What type of information is in it?
     

  3. Besides header and footer, in what other places do you think the developers of this page probably used a container element?

 

Block vs. Inline Elements

You might notice that some elements behave a little differently in a layout than others. Some elements make the content stack, while others let content sit next to each other. What’s that about?

See It To Believe It: Inline vs. Block 👀

Let's take a couple minutes to see this in action to make sure we have an understanding. Open and fork this repl.it project.

In the CSS file, add a border of any color to the h1.

Element by element, add a border (use a different color for each one).

When we introduced the border property in the first lesson, we mentioned it was a helpful tool. This is what we were talking about! It's a great way to quickly check what space an element is actually taking up. A short title in an h1 element may look like it's only an inch or so wide, but it's actually taking up the entire width of the page!

For now, we just need to know that some elements behave differently than others do. In our next CSS lesson, we will learn how to change the default behavior.

Classes

Right now, we know how to style all of the paragraphs or all of the links on a page. But what if we only wanted to style a particular one? Classes will help us do that!
 

Earlier, we learned that an img tag has a src attribute. An attribute is an extra piece of information we can choose to attach to any HTML element. One common and handy attribute is class.

<div>
     <h2 
class="magenta-text">Sub Header</h2>
     <p class="magenta-text">Some text</p>
     <p 
class="blue-text-underlined">Some more text</p>
     <p 
class="magenta-text">Some more text</p>
     <p 
class="black-text">Even more text</p>
</div>

A couple of things to note about class attributes:
 

  1. They are written inside of the opening tag of an element
     

  2. They can be used on ANY type of element
     

  3. An element can have more than one class
     

  4. As the developers writing the code, we get to decide the class name that is inside the quotes
     

  5. Class names should be in lower case. If the class name is more than one word, a dash - should be used instead of a space

 

Why do we need classes? 👉

Classes allow us to target an element with CSS more specifically. If we wanted to have many paragraphs on a page, some being black and some magenta, there’s no way that this rule alone would do the job:

p {
  color: magenta;

}

or this👇:

p {
  color: black;

}

or this:👇

p {
  color: usually black but sometimes magenta;

}

The browser needs very specific directions in order to show your content just how you want! So instead of only targeting elements by the element name, we can now target by class. Here is the syntax:

/* this rule will target ANY element with the class of "magenta-text" on it */
.magenta-text {
  color: magenta;

}

The rule above will look for every element — regardless of type — that has the class of magenta-text and style it with a magenta color.
 

Notice the syntax - when we were just targeting a p  element, we would type p. Since we are targeting a class, we have to be really specific in telling the computer how to do that - when it sees a ., it will look for a class name that matches the words following the ..

👩‍💻 Try-It: Targeting with Classes

Open and fork this repl.it project.

  1. In the HTML file, write a section element with at 4 paragraphs nested inside of it.
     

  2. Give 3 of the 4 nested paragraphs the same class name. Give the other paragraph a different class name.
     

  3. In your CSS file, style the 3 paragraphs one way, and the other paragraph in a different way.

💪 Practice: Intro to CSS

Create a new repl.it project. Work to re-create the screenshot pictured below. You'll need to use containers and classes to achieve this. Feel free to use content and colors of your choice.

Click here for Medium Practice


We know that each container used for each mathematician is a block element. Do some research, and try to find a way that you can change these "rows" into "columns". Example below:




Click here for Spicy Challenge


Did you notice that the text is bumped right up against the border or each box? Do some research, and find a way to give that text inside of each box a little breathing room.





hidden-figures.png