Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 14 – Using Structural HTML in a Post or Page

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Next in this Introduction to HTML in WordPress and Genesis 2 seminar, what we’re going to take a look at is using structural HTML in a post or a page. Let’s come over here to the structural HTML page and let’s edit this page.

What we’re going to do is insert some images into this, we’re not going to link it to anything, it’s going to insert that into the page and come directly before this next one and insert another in which another page and then come before our next piece of text and add a third link, okay?

What is Structural HTML?

Then what we’re going to do is create some structural HTML and by structural HTML, I’m talking about things like divs. We’ve seen lots and lots of divs in the last couple of days. Let’s come over and inspect this element, you can see we’ve got a div class=”entry-content”, a header class=”entry-header”, an article class such and such, a div class=”breadcrumbs” and we’ve got a main class=”content”.

Adding Structural HTML Example

Each of those things are structural elements and we’re going to add a structural element to this. We’re going to start right here in front of that opening p tag, we’re going to say div and then add that stuff in there.

Adding a Class

So we’ve got a div there and I’m going to give it a class of “testimonial” and then we’re just going to wrap each one of these testimonials with that. So we come down to this one, come down to that one and then we’ll just put our closing divs in there as well.

Now if we refresh this page, here’s a headline for the first testimonial, headline for the second testimonial and a headline for the third testimonial and I think I want to make these h2s. Pardon me as this will pop over here, make than an h2 and make that one an h2.

Next what I want to do is make all of this text the same length. I’ve deliberately made this a little bit more complicated by making this one not the same length. I’ll do that first and then add the complication to it. Now, ordinarily what you would do here is add some bottom margin to this so that the headline drops down below it but what we’re going to do is add some styling that will do that.

Styling Block Level Elements

What we’ve done here is we have added some block level elements, that is these divs are block level elements. And in fact, this wouldn’t be a problem if we hadn’t floated this image. We have this problem with this trying to sit beside it because the image floats and it’s the floating of that image that is causing this a little bit of distress and that’s why we need to talk about how to style these blocks because it’s one thing to wrap them in a div and call it a block but it’s another thing to actually deal with it being a block.

Block Level Elements in HTML 5

Before we do that though, I just want to show you in w3schools the list of block level elements in HTML5. Go to HTML5 New Elements and so semantic structural elements, they’ve got article, aside, details, dialog, summary, figure, caption, footer, header so on and so forth section.

We could just as easily have chosen to use section instead of div and in fact, maybe we’ll do that because in this case, it’s a good use of the type since this is a section of the document. I won’t do it in one of them though, so we’ll leave on as a div and make two of them sections.

So we’re looking at 3 different structural elements, they’re all block level elements and they are being adversely affected, at least the two are being adversely affected by this image.

Clearing Floats

Now, the way to solve the problem is to clear the float because what’s happening is this image is floating out of the normal course of where it ought to be, right? Remember in an earlier lesson we looked at these images in an inline block and ordinarily, the text would be down here beside it and then would go down below it.

But because we floated this to the left, it is no longer an inline block and this is allowing stuff to move up out of its ordinary position. What we have to do is clear that float at some point in this process and the easiest way to do that is to clear the float for this testimonial.

So that’s the very first thing we’re going to do. We’re going to come down here to testimonial, .testimonial and say clear:both; and by clear:both what we mean is clear both left and right directions.

In another lesson I’m going to talk about clearing and clearing left and clearing right but for the time being we’re just going to look at it like this. So we’ve just said clear:both for this testimonial box and now if we come over here to structural CSS and reload it, you can see each one of these things works just fine.

What’s happened is, it clears the float once it hits this testimonial wrapper. The reason why I did one as a section and one as a div is because I wanted you to see that it doesn’t really matter at this point what the HTML element is it there as long as it has the class of .testimonial and as long as it is a block level element, then it’s going to clear.

0 Comments… add one
0 comments… add one

Leave a Comment