Span and Div are delineator tags. They specify chunks of content to be acted upon with other definitions. Span covers a shorter length of HTML. Usually a line or two.
Those won't look neat until we reach the class portion of CSS.
Here's some little niceties. Here I can abbr shortened phrases and have them display the full meaning another way. Of course, there are other uses. You aren't strictly restricted to abbreviations.
There's also quotes.
And its big brother the blockquote.These... exist, i guess.
The most important of these is code
Code can enable you to make many changes on the fly in pre-packaged forms. It can also be used for essentially any computer code, which is really cool.
Many following sections may be impacted by code. Partly just to see what can be affected by a pre-packaged code definition!
I'll be real... these tags seem kind of obsolete nowadays. Um. And there's no way to visualize it on this workpage. Skip?
Rowspan and Colspan are basically the same tag, but in different directions. Both allow you to "merge" cells in a table. Below is an example table taken straight from the lessons (modified with CSS for visibility). Colspan goes across columns and rowspan goes up and down, across rows. No relation to the span tag.
| Column 1 heading | Column 2 heading | Column 3 heading |
|---|---|---|
| Row 2, cell 1 | Row 2, cell 2, also spanning Row 2, cell 3 | |
| Row 3, cell 1, also spanning Row 4, cell 1 | Row 3, cell 2 | Row 3, cell 3 |
| Row 4, cell 2 | Row 4, cell 3 | |
Now, here's a table of my own construction.
| Column 1, Row 1 | Column 2, Row 1 | Column 3, Row 1 | Column 4, Row 1 | Column 5, Row 1 |
|---|---|---|---|---|
| Row 2, all of it :3c | ||||
| Column 1, Row 3 | Column 2 Rows 3, 4, and 5 |
Big ol 2x2 Box | Column 5, Row 3 | |
| Column 1, Row 4 | Column 4, Row 4 | |||
| Column 1, Row 5 | Column 3, Row 5 | Column 4, Row 5 | OH NOOOOO | |
| Column 1, Row 6 | Column 2, Row 6 | Column 3, Row 6 | ||
Here, you can see how the different ways colspan and rowspan interact with the table and each other. You can make one cell an entire row, or use the tags in the same element to create a larger box with those dimensions. You can have cells expanded by rowspan/colspan overlap... but it comes with unpleasant visual side effects. Still, handy to know! Taking advantage of rowspan, I was able to make this nice little list for work. Simple, but effective! (Items altered for sensibility)
| #1 | Item one, by Me | |
| #2 | Item Two, By Also Me | |
| #3 | Item Three, by Still Me | |
| #4 | Item the Fourth, by The One and Only | |
| #5 | The Final Item, by Yours Truly |
Description lists are similar to the unordered lists and ordered lists, but have a focus on entry and explanation rather than just prattling things off. Let's list some fruits.
Without further formatting, it looks bare-bones. Because it is! But with some more formatting, it could be a real time-saver compared to trying to format another type of list from scratch or using repetetive paragraphs.
They're hitting us with a whole suite of random tags now! These are less commonly-used tags with more niche use cases. Niche does not mean bad! They are very well suited for their tasks. My favourite of these is definitely...
Unlike paragraphs, these won't instantiate a new line on each use!
I wonder if there's a way to swap all instances of dir=ltr to dir=rtl and vice-versa....
The rest of the items will be listed in a description list below, rapid-fire style.
These are a ton of little tags, but are good to know. There's clearly convention behind all of these, and watching out for that convention might be a good idea.
Ah. Sectioning. This truly is the final boss of the intermediate HTML. Alright. It's too late to make this page using the Article and Section tags... Those would have nice to know earlier. As a challenge to myself, I will section the advanced page using this. I may or may not still have the index table at the beginning.
Now, the Header and Footer attributes are both very useful. They apply themselves as... well, headers and footers relative to the relevant section. This means that I can have those navigational aids made as headers and footers. I think I'll do exactly that.
Update: I tried exactly that. It didn't work. Now the "go to bottom" link is broken. Footer works fine so w/e I guess?
It's been a long time getting through this intermediate level stuff. Next, I'll be tackling the Big Girl stuff. I'll be pushing myself to format the next page into sections, and take greater liberties to showcase each thing as it seems useful. For now, I'm happy to have gotten this far.