Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Is HTML the easiest or hardest to get right?
992 Plays8 months ago
The podcast is back! And in this episode, I talked about how the difficulties of semantic HTML.
If you ask any front-end developer what the easiest language is between HTML, CSS, and JS, and everyone is going to say HTML, right?
It’s funny though, because most of the things I hem and haw over the longest are often related to how to mark something up in my HTML.
Links
- My newsletter: https://kevinpowell.co/newsletter
- The Discord community: https://kevinpowell.co/discord
- Stephanie Eckle's article on the difficulty of semantic HTML: https://thinkdobecreate.com/articles/a-call-for-consensus-on-html-semantics/
- The twitter post I mentioned: https://twitter.com/KevinJPowell/status/1773035208175911301
Recommended
Transcript
Is HTML the easiest language to learn?
00:00:00
Speaker
If you were to ask a room of developers, which is the easiest language to learn, HTML, CSS, or JavaScript, you pretty much get consensus that it would be HTML, right? You might have a couple of people trolling, especially if it was like an online poll or something saying that, you know, maybe JavaScript is or something like that. But in general, I think everybody can agree that HTML is the easiest language
00:00:26
Speaker
But it's kind of funny because I don't always feel that
Challenges of semantic HTML
00:00:28
Speaker
way. And I know I'm not alone, but a lot of the biggest struggles I have are actually figuring out the right markup for something. And I guess in a way, if we go back to the old ways that things were done, that can seem... It just wasn't like that, right? Like in the old days, everything was a dif.
00:00:48
Speaker
Well, that had its own issues. At least it's easy because you just knew you'd put a div and you'd be fine. Since we've had semantic elements, part of the reason for that is we're adding meaning to what we're putting things around. It's very important for things like accessibility. It adds to the document outline and all of that, but it also makes us have to think about the way things are actually being organized.
00:01:13
Speaker
And it can actually be really hard. I know Stephanie Eccles recently did an article a little bit on this idea of semantic HTML and how it's not always so straightforward. In a way, it makes sense because semantics, it's the definition of language that's in itself such a weird and complicated topic when you think about it and just the way
00:01:35
Speaker
that different people can interpret something, it falls into this, you know, what should be a very straightforward thing. An example she gave I think in that article, which I'll put in the links in the description, was I believe like the block quote and whether you should use a block quote or a figure with a fig caption or should it be a block quote with any figure,
Contextual HTML element choices
00:01:56
Speaker
right? And that's a really good question and something I've changed my approach with over time and will probably change again.
00:02:03
Speaker
And there doesn't seem to be like this one absolute solution, even for something like that, because it depends so much on context. And I recently shared an image on Twitter asking about this because I was putting together a demo for what was going to be a beginner friendly video.
00:02:21
Speaker
And the purpose of the video is on grid. I want to have some things in place first. And I was building out the rough draft for it. And I had this very typical layout type thing in there where we have sort of, they call them like an eyebrow or a kicker where it's, I'm sure you've seen it when you have a card or something like that. And there's a main title, but above the main title, there's smaller text. And sometimes it's like a small, often it's all caps. And sometimes that's like your category.
00:02:50
Speaker
or it could be something else but it's sort of like this thing that leads you into the title itself. Very common in magazines and in the design world and print and stuff and it's definitely found its way into web design as well. And I posted a picture of it so it's this card that has this little eyebrow slash kicker thing at the top and then like a size 16 font and then the big title and then a paragraph underneath and a button.
00:03:12
Speaker
And I asked people how they would mark things up. And actually, before I asked people, I actually looked at it up. I did a quick Google search and I was trying to find some different things. And I found a few conversations where people were asking similar questions.
Design impacts on document structure
00:03:25
Speaker
And in their own threads, they were getting different replies. But it was also, it made sense because the context of theirs was a little bit different from mine.
00:03:34
Speaker
Because I've had these before where clearly the thing on top is like a category. And even though it's a size 16 and it's much smaller, I could easily justify that actually being the heading. And then the paragraph or like the big thing that was underneath that has the big hierarchy, you know, it's standing out, it's really visual. That, you know, isn't necessarily the primary heading. The actually the other one from, you know, the breakdown of how our heading levels work, it made more sense. So
00:04:00
Speaker
that was one of the things that I actually saw come up. One of them was like an FAQ. So the little thing was the FAQ and then there was the big thing that was the question. So like FAQ is the higher thing there because that's the category or the section we're under type of thing. And then we had all the questions coming after that. So in a situation like that, it makes more sense for the FAQ to actually be say the H2 or maybe even an H1 and then each one of the big, really big things becomes an H2 because that sort of sets up the document outline. Whereas in my case, it didn't really work that way.
00:04:30
Speaker
It was more like, and I made the design myself, so part of it's for me to blame, but I was trying to follow sort of common design patterns that we see, and it looked better with the kicker there, which is why dark cleaners often put them there.
00:04:43
Speaker
And so I was trying to figure out what to do with it. And I was looking at it and it's, you know, it was just the title of it. And I'm not going to say what they are right now, because it's not really important, but it just, it wasn't really a category. It was sort of like almost like a subtitle and the other one was the main title, but the subtitles first and then the main title second.
00:05:00
Speaker
And when I asked, I got a lot of different replies and different ideas and different things coming up from the title at the top or the subtitle or whatever it is. The small text on top maybe should be a span and then the heading underneath. Maybe it should be that in the markup, the heading is like the big one was actually first and then we use flex or grid to switch the order of them.
00:05:22
Speaker
and just have the second one as a paragraph. There was some talk of it maybe being a link because it could link to, you know, you click that and it goes to all of the different articles or whatever that have that same category.
Debating the use of hgroup
00:05:33
Speaker
And then one that came up multiple times was using age group. And age group felt like the right thing for me.
00:05:40
Speaker
Because that's sort of what age group is for and if you don't know age group It's like heading group and at one point and I don't know the history and I don't want to be misquoted on this But I believe at one point the idea with age group is you could actually have multiple headings and instead of acting Or instead of creating a different sort of document outline and making Subsections in the way that an h3 under an h2 would do it would actually make the h3 act as a subtitle but because no browser is actually implemented the implemented that to
00:06:09
Speaker
how it would change the document outline we can't do it that way and so the spec right now as it stands because I did read it says that it should be the age group can have one heading in it and any number of paragraphs before or after it and it could be zero paragraphs before and after or it could be as many as you want before
00:06:28
Speaker
with zero after or vice versa where they only come after and the paragraphs will sort of act as the subtitle or not sort of the idea as they do. But from a document outline perspective and a screenwriter perspective they don't actually do anything so as they will is there a purpose to using each group then?
00:06:46
Speaker
And it led to a really interesting conversation and some, there was some people commenting on it that have a lot of experience and were actually part of earlier drafts of the spec saying that you should use the role on it, but then the current one put a role equals group on there. But that's actually what the browsers are supposed to be doing yourself. And because of that, the spec actually says, don't do that. Don't add the role yourself because that's the implied semantics of it.
00:07:13
Speaker
And generally speaking, if you have an element that has implied semantics, you're not supposed to put that same role on there. So if you have a button, you shouldn't put button and then role equals button because it already is a button.
00:07:26
Speaker
which makes me want to learn more on that side of things of just like, you know, what could the potential negative effects of that be? Is it just because we don't want to double something? But if it's already implied, is it going to be a negative if it's not implied? Anyway, it's something that I want to dive into more and read a lot more about and figure out and actually have conversations with people who know a lot more about that than I do. And I'll definitely report back once I've figured those things out.
00:07:53
Speaker
But it just, yeah, it was a really interesting discussion anyway. And I think I settled on, I'm going to use age group for it, even though right now it's more that that's the semantic meaning of it. It will group it that way. And even if it doesn't currently change anything from the document outline point of view or from how our screen reader will approach it, it's very possible that in the future that does actually work.
00:08:19
Speaker
The way is intended and until then it won't break anything. It just won't be as obvious that it's a subtitle, it will just read it as a paragraph. But that's probably better than the alternative. One thing, other solution that I didn't mention is also that sometimes the small text could be a span inside of the H1.
00:08:36
Speaker
And I think often we can actually do that. It just depends on when you look at it and how you're going to read it. So if the little text sort of flows and is part of the same sentence almost, and you could treat it as one sentence, then that could potentially be a solution too. But in this case, it definitely wasn't.
00:08:54
Speaker
But yeah, it was a very interesting thing and something I wanted to talk about. And it's also, as you might notice, the return of the podcast. I left this off to the end because, yeah, I wanted to dive into the topic itself. And I think this is more of what
00:09:10
Speaker
the podcast is going to be about general musings that are on topic that I can talk about. And up until now, we haven't said anything that I've wanted to edit. So they will be generally very lately edited. Hopefully I don't do too much. I didn't script any of this and we're going to see how it goes and all of that. So I do apologize if there's a few more ums and ahs. I will see if those I can edit out without me having to find them myself. Some of the editing software these days can take care of that for you.
00:09:38
Speaker
So we'll see about
Podcast format changes
00:09:39
Speaker
that. Though I do want to say for the future of this podcast, the other thing that is going to happen is there will be some longer form content coming to them as well, because I'm have some interviews lined up and my plan right now is to try and do one interview a month.
00:09:52
Speaker
that I can put onto YouTube, but the YouTube version, I think I'm going to be trying to do it in a way that I can keep the interview to 20 minutes or shorter. And this podcast version that will be in this feed here will be probably hour long discussions where it's includes the YouTube content, but also is like an extended cut where we get into sort of semi tangential topics and less focused on one specific thing that I'll be keeping the YouTube content specific to.
00:10:20
Speaker
So yeah, you'll also notice if you were watching this on the YouTube version of this podcast, there's no video. I'm not going to record the video. I don't think I will. We'll see. Maybe I'll change my mind on that. But for now, no video, though I will be putting them on YouTube just in case anyone is listening to it through YouTube music.
00:10:35
Speaker
And yeah, the reason I've sort of made part of this change is to be able to make the podcast happen again. And so something a little bit easier for me to produce, but also because of some feedback I got some, a lot of people actually, I did the poll on my channel or to the,
Listener content requests
00:10:53
Speaker
my newsletter. I asked people what they thought of the current state of the podcast for people who had been listening to it. And a lot of people said they liked it as it was and to keep it the same, but there was complaints that there wasn't complaints. It was feedback.
00:11:05
Speaker
that the same content between the newsletter and the podcast for them was kind of annoying and I don't blame them just because they wanted to consume both of them. I guess anything I'm doing they want to consume and I'm very humbled by that. I'm glad they want to do that. For me, the idea originally was that I wanted to sort of offer the same content in a different format for people who didn't want to read or who didn't want to listen to a podcast.
00:11:29
Speaker
And so that was the idea there. So now instead it will be more of, I have the general musings introductions to my newsletter. So there'll be, this will be a similar topic, but the audio version will probably just be a little bit more in depth though. I'm guessing like we're, I'm hitting about 12 minutes now. So I think in general, they'll probably be in the 10 ish minute range in terms of general length. This one's a little longer cause I'm rambling on now about a few other things, but yeah.
Podcast schedule and feedback
00:11:57
Speaker
That is sort of, I wanted to give that update on what I'm doing, so that's sort of the general state of things. And I'm going to be trying to bring these back to being weekly released from now on. Every now and then, who knows, I might miss one. But yeah, I'd like them to be back.
00:12:12
Speaker
And that was an interesting discussion that I had there. If you want to participate in that discussion or have any thoughts on it, I think I'm also going to start a Discord thread on the topic itself to see what people think there and just have a place for the discussion. So I'll put a link to that discussion in the description or the show notes or whatever we call it for a podcast as well.
00:12:34
Speaker
And yeah, with that, thank you very much for listening. I appreciate it. I hope that you're happy that I'm back in your ears in podcast form. If you have any feedback or anything else like that, please do just send me an email. It's hi at kevinpowell.co. If you have any suggestions or anything like that, just put podcast feedback or something like that in the subject line and I'll make sure that I definitely check it out.
00:13:00
Speaker
Um, and I think that's it. So with that, I'm going to say goodbye and thank you very much. And I guess until next time, don't forget to make your corner of the internet a little bit more awesome.