Next in this Introduction to HTML in WordPress and Thesis 2 we’re going to look at using structural CSS to style structural HTML elements. We’ll begin with an example on this page. We’re going to make these testimonial boxes you see here and essentially with an image and a text and we’re going to wrap it with a line.
I’m going to start off by editing page. We already have an h2 here so directly below the h2 beside the paragraph I’m going to Add Media. I’m going to upload files. I’m going to pick this image and use align left. I’m not going to link it to anything and I’m going to let it be its full size so I’ll insert that in. All 3 got inserted, that’s crazy. But they are all what I want so I’m just going to cut them out and move them around. So we’ve got our 3 images in here.
Structural HTML Elements = Structure of a Page
Before we do that, I want to talk for a moment about structural HTML because you’ve seen a whole bunch of structural HTML already even if you didn’t realize that’s what it was. Because the structural HTML are all of these divs so you’ve got div class=”container”. And in this case, the ul is actually a structural thing because it’s taking up space but div header and div columns and div footer, those are all pieces of structure.
Let’s open up div header. You’ve got div site title and div site tagline and those are all structural elements.
Additional Elements in HTML5
Now, HTML5 has a bunch of other structural elements too. HTML5 has things like section and article and header and nav and footer and aside. In fact, you can see those structural things over here under HTML and HTML Elements. What I really want is HTML5 Elements.
Let’s look at your semantic structural elements. Article, aside, details, summary, figure, footer, header, nav, those are all structural elements. They are all block level elements, that is they take up space. They do start new lines by default, they can have height and width and they can be positioned. And these are really the things that make up the structure of a web page.
Each of these behaves just like a div does and a div is just the division. An article is a division that contains the main article on the site. So you can use div or you can use article for that same element but what we’re going to do is create a testimonial box with a single div.
Actually in this case, let’s come back over to our text editor and we’ll create a div. We’re going to give it a class, class=”testimonial”. That’s the opening tag. After that, we want to get to our closing tag so it’s just a closing div. We’re going to do this 3 times actually and then we’re going to do the closing 3 times. So wrap each one of these in a div with a class of “testimonial”.
Let’s update this and just view the page over here. So we have those things sitting like this. If we inspect the element, you can see we have our div class=”testimonial” and there’s a heading. Inside of that there’s a paragraph and in that paragraph there is an image. We have another paragraph which is what should be a link here later and then we go on down to our next div class=”testimonial”.