This post will demonstrate using the <aside></aside> tags, which are designed to place related material “aside” your main material.
An aside will start wherever it is placed. Without styling, it will just be a set-off paragraph. So you need to establish things like the width, background color, font, margins, padding and font style in the CSS.
Everything below the rule, starting with the word “Demonstrating,” was placed on this page using the custom HTML block. The custom block ends at the second full-page rule.
I did the coding in a text editor, added the CSS to the top of the HTML file using the <style> tag and then, using cut and paste, put it in a Custom HTML block here.
I did it that way (CSS at the top of the HTML file) so that I could get different styling for this block than in the normal blog CSS.
The aside is in the brownish box.
Demonstrating the aside element
To demonstrate how and why you might use the aside element tag, I’m going to use a bit of a story on KU golf from the University Daily Kansan.
The story was written by Jordan Ziegler. I’m going to use the first couple of paragraphs below and then use the last paragraph of the original story as an info pullout, using the aside element.
KU men’s golf places fifth in Wisconsin
The Kansas men’s golf team finished in 5th place in their season opening tournament at Erin Hills Golf Course in Hartford, Wisconsin.
The Jayhawks posted a final score of 18-under (846), finishing 14 strokes behind the first place Texas A&M Aggies.
The Jayhawks were in 4th place at 16-under coming into the final round on Tuesday, but a lackluster 2-under final round combined with a strong 13-under performance by East Tennessee St. dropped the Jayhawks back into 5th place.
I’ve paste the code in below this box, using the WordPress visual code block (allows code not read as code, using the pre tag).
However, first a bit of explanation about the styling.
I used different fonts for the bits of Kansan story, the story headline and the aside for two reasons: First, to set them apart, since they aren’t my work and are linked, and second to show that you can put styling for color, size and fonts in the WordPress custom HTML.
So note the colors and fonts are fairly different for demonstration purposes, not because this is good web design. (It’s not, really.)
To do it, I had to use a class attribute, because the Custom HTML block will not go against site CSS for things like headlines and paragraphs.
Here’s the actual code I put in the Custom HTML block:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Suez+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
<style>
aside {
display: block;
width: 30%;
padding-top: 8px;
padding-left: 18px;
padding-right: 22px;
margin-left: 15px;
margin-right: 10px;
margin-bottom: 15px;
float: right;
font-family: 'Work Sans', sans-serif;
font-style: italic;
background-color: #FADEB2;
}
.customhed {
font-family: 'Anton', sans-serif;
font-size: 24px;
}
.p2 {
font-family: 'Suez One', serif;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Demonstrating the aside element</h1>
<p>To demonstrate how and why you might use the aside element tag, I'm going to use a bit of <a href="https://www.kansan.com/sports/kansas-men-s-golf-concludes-marquette-intercollegiate-with-5th-place-finish/article_6539caca-10af-11ec-8370-5b75162d30f7.html">a story on KU golf from the University Daily Kansan.</a></p>
<p>The story was written by <a href="https://www.kansan.com/search/?l=25&s=start_time&sd=desc&f=html&t=article%2Cvideo%2Cyoutube%2Ccollection&app=editorial&nsa=eedition&q=jordan+ziegler">Jordan Ziegler</a>. I'm going to use the first couple of paragraphs below and then use the last paragraph of the original story as an info pullout, using the aside element.</p>
<p class="customhed">
<strong>KU men's golf places fifth in Wisconsin</strong>
</p>
<aside>
<p>The Kansas Jayhawks are back in action next Sunday at the Gopher Invitational in Minneapolis.</p>
</aside>
<p class="p2">The Kansas men's golf team finished in 5th place in their season opening tournament at Erin Hills Golf Course in Hartford, Wisconsin.
</p>
<p class="p2">The Jayhawks posted a final score of 18-under (846), finishing 14 strokes behind the first place Texas A&M Aggies.</p>
<p class="p2">The Jayhawks were in 4th place at 16-under coming into the final round on Tuesday, but a lackluster 2-under final round combined with a strong 13-under performance by East Tennessee St. dropped the Jayhawks back into 5th place. </p>
<hr>
<p>I've pasted the code in below this box, using the WordPress visual code block (allows code not read as code, using the pre tag).
</p>
<p>However, first a bit of explanation about the styling.
</p>
<p>I used different fonts for the bits of Kansan story, the story headline and the aside for two reasons: First, to set them apart, since they aren't my work and are linked, and second to show that you can put styling for color, size and fonts in the WordPress custom HTML.</p>
<p>So note the colors and fonts are fairly different for demonstration purposes, not because this is good web design. (It's not, really.)</p>
<p>You'll notice to do it, I had to use a class attribute, because the Custom HTML block will not go against site CSS for things like headlines and paragraphs.
</p>
</body>
</html>
You’ll notice a couple of things here: First, to make the aside element be level with the first paragraph, I had to place in on top of the first paragraph. If I would have put it below the first paragraph, it would line up with the second paragraph.
Second, to reiterate, I put the CSS for this in a style element at the top of the HTML file instead of in a separate CSS file. I did that only to show you how that would work on your page on the class WordPress. (We talked about that in class Thursday.)
Note that I have font coding the works. But I’ve tested this, and not all fonts will work on the WordPress HTML. So if you want different fonts on your Showcase page, test them until you find one that works.
Back to asides: There are lots of different ways to style an aside. You can use it for a sidebar, a pull quote, a fact box, a table … anything that would look good atteched to a story but not part of that story.
You could, in fact, with the addition of script, using an aside to put a “top stories” box on your page. (There are other ways to do it.)
Finally, look at the HTML again. You’ll see layering, in-line code (bold text and links), classes, and use of color, fonts, size, padding and margins in the CSS.
Here’s a screenshot of what the WordPress editor looks like where I put the Custom HTML block in. (The in-line code block is below that.)
Hope this helps everyone do their final project.
— Gerri Berendzen
Recent Comments