#54: 7 HTML Elements You Should Be Using

Hey everybody, you’re listening to your favorite web podcast in the entire world when you want to share with everybody, retweet people go rate and review and do all of those things for us to start 2020. This is the drunken UX podcast and I am your host, Michael Fienen. And joining me this week for season three, Episode Two or Episode Number 54, depending on how you keep count is the one and only Aaron Hill Aaron. Hey, how are you doing?

I appreciate you taking the time to join us. This week we’re going to be talking about HTML elements that you don’t use nearly enough and I hear that you are an absolute leading expert in this field. There are many things Is that I don’t use very often. Like a razor clearly. I don’t know what’s happening there.

This week, you can go thank our sponsors over at New cloud.com slash drunken UX. They can

Let us know jump on Twitter. There was just a tweet the other day although it was maybe a few days ago by the time this releases but let us know what your favorite articles of 2019 or anything anywhere fair game just what what web development articles Did you find especially useful, inspiring, educational, I’d love to hear what what’s going on. In that area for you guys cuz I know what I read. I have no idea what Aaron reads, but hope you you.

books books, the musical fruit The more you eat, the more you drink apple cider, which is what I’m doing this evening. I’ve got a bottle of anger. I’ve got two bottles in front of me. One is angry orchard and one is Strongbow because I had some random leftovers. And I debated maybe mixing them together. But then I didn’t so I’ll just drink one back to back.

yeah. fairpoint Yeah, I’m actually getting ready to try something that came up in a one of those Google article recommendations and I’m probably gonna regret it but it’s called a smokey Kochi, what which is and if it works out that it’s good, I’ll drink it on the show for everybody. If it works out that it’s terrible. I still may drink it on the show for everybody.

coke with okay. Lagavulin. 16.

And I’m not like I’m not like, Oh, no, I have I have

You do it first. I’ll do it first and

to supposedly it’s good and I’m not a purist. I’m not one of those folks who’s like, if you don’t drink your scotch neat, you’re not drinking, right? Like, you drink your scotch the way you want to drink it and trying a little something different is not above me. So I want to I want to do it.

Kind of but hate. They’re gonna be shutting down something you hate. quite frank.

the the news on the wire and we’ll have a link to the article from the verge on this. But there, of course are many others if you want to go looking, Google has decided to follow step with Safari and Firefox. And they have said, You know what? We’re not going to fight the fight anymore. And we’re going to start blocking third party cookies.

like anything? And so for folks who if you’re not familiar, there are first party cookies, there are third party cookies. There are technically second party cookies, but it’s a super weird thing that doesn’t really exist and is more of just what people call selling data back and forth. It’s weird.

like those are not legal entity Hans’s the first party cookie is basically any cookie your site set up, for instance, Cookie compliance, because we have to we’ve got to have a cookie compliance notation. So we set a cookie to tell us whether or not they want cookies. Those are first party cookies third party cookies are cookie set by anybody else. So if you got your Facebook beacon and that sets up a face I you know, star.facebook.com tracking cookie, that’s a third party cookie. So Firefox has been doing this for a while they started doing this back in September and they had been testing it for quite a while before that Safari.

I you and I think I’ve talked about this a little bit before and I have also, I’ve officially I’ve been using Firefox pretty exclusively for the last several weeks, but I did finally click The button that says okay, yeah, make it my default. Yeah, yeah. But Safari did this as well, I don’t know, off the top of my head when they did it, but I think it was around the same time as Firefox. They’re getting together and they’ve said, you know, that’s what what is Firefox literally been positioning itself as they want to be the privacy forward browser who people, right. So Google has decided five months later that it’s time for them to get into the game. The Wild part is whereas Facebook or Fri, sorry for Firefox said, Okay, we’re done. We’ve tested it for a while and We’re shutting them off. Google’s like Yeah, cool. We want a piece of that. But give us two years. Yeah. Okay. Um, in the meantime, I’m gonna keep using Firefox.

Well, I mean, admittedly so right. Because they waist deep in advertising and tracking. And, you know, when you talk about, okay, we’re going to start blocking third party cookies. You’re really talking about one of Google’s primary, you know, Internal Revenue pieces.

Right. So there’s a quote from the verge article that I think answers this absolutely perfectly. It says, In in those cookies place. Google is hoping that it can institute a new set of technical solutions for various things that cookies are currently used for. Okay, so basically what they’re saying is Give us two years to make something that’ll do this but isn’t a cookie, right? Because that’s what consumers want

Yeah, maybe not. I’m going to go out on a limb and say that that is not our priority. There are Google is not the only one trying to do this. Apparently, there’s a handful of folks who are all trying to come up with new solutions. I’ve read the article from the verge and and the announcement from Google, the idea at least is to do something that is more sandboxed, so to speak. So you have maybe control over what you want to be shared. and things of that nature, but I still feel like you’re putting a lot of technical burden on users to even know how to do that or what those things mean or what allowing certain data is really allowing. Yeah, I again, And of course, Google wants to say yeah, okay, we’re gonna block third party cookies, but give us something you know, throw us a bone let we tracking it because I right tracking integral the marketing. Right, right, you have to be able to track to know that what you’re doing is good. And you don’t need the kind of aggressive tracking that is done today to get that information. Right. So what’s the answer to reining it in? I don’t know. But it’s at the same time it’s Yeah, it’s tough.

feel like there’s too many ways to do an interview. around on it anyway. Like, folks, I, okay, we can’t do third party cookies anymore. So install this WordPress plugin, you’ll set a first party cookie, but then the WordPress back end will make the call to just send the data directly to it. Like there’s there’s so many technical ways to get around this right that I feel like it maybe it’s a it’s like email spam, right? The The horse is out of the gates, you know, down the road into the neighbor’s pond and eating all the fish. Is that what horses do? I don’t know. I’ve never ridden a horse.

I mean, don’t you feel like there’s kind of that problems? Or here’s, you know, a lot of people did early on with all the cookie compliance stuff. They’re like, Oh, we can’t set cookies anymore. Oh, you mean we’re supposed to get consent to set cookies. Okay, we’ll stop sending cookies will use local storage. Right? Yeah. No, you a yes. You may be Technically could have done that early on under original interpretations of the law, but you were absolutely violating the spirit of the law. Since then it has been revised. You know, the cookie compliance stuff for you. Is any it’s tracking data related. It’s not explicit to the technology so,

I don’t know. But it’s good information. Basically, I you know, I think we we are watching the death of third party cookies live in front of us.

that, that guessing lab, that’s applause worthy. I’m okay with that. And we’ll find better ways to get our data

Okay, I want to talk about HTML elements. You don’t use it. This is one of those silly kind of Yeah, here are a bunch of things you don’t use enough. These I think are genuinely good tags. I think they are genuinely not used enough. And I think they are things you can immediately apply. There are a lot of HTML elements when you start going out there and read. Oh, yeah. Oh, yeah. Like, do you know, do you know what the TT tag is?

technically. And I should mention, I pulled that one out, cuz I’ve been thinking about accessibility a lot. teletypes is no longer supporting html5. You shouldn’t be using it anyway. But oh, that’s that’s it. I know. But here’s one. How about Ruby. You know, there’s a Ruby tag.

Yeah. Unknown Speaker No way. Absolutely brilliant. Vision

is up. So it’s not me. No, no, but it’s not for Ruby code of any sort. It’s got to do with characters that need like pronunciation information, and how those like are aligned to each other. So the the markups are really weird and I’ve legitimately never seen it in practice. And it’s usually used for things like, like Kanji characters and things like that to include pronunciation information with them, or, you know, like Cyrillic, you could, you could see it used in Cyrillic notation. But okay, I mean, there I don’t know even how many there are off the top of my head, but you know, there’s probably 100 HTML tags, and we use 10 of them regularly. I and it’s, it’s crazy when you read the like the W three, like official spec document when I was doing that for some accessibility stuff. There’s just like, so many I mean, attributes and everything else. You know, the html5 introduces a whole bunch of new tags? Yeah, there’s there’s a lot there that we don’t use. And we’re not going to by any means go through all of like the ones that could be useful progress is I think a useful one meter is a useful one. Just off the top of my head things like

eggs not equally No. So like there’s one for instance, that has been cropping up in people’s lists called dialogue. Okay, dialogue is obviously it’s for dialogue pop ups, like modal pop ups, things like that. And so people are really excited to say, Hey, we can we actually have an element now that we can start using to properly markup dialogue elements but support for it for instance, edge does support it but Firefox doesn’t only an experiment the safari doesn’t.

Do you know you want to know why edge supports it? Because they asked for it because WebKit Unknown Speaker Okay,

edge up to version 18 doesn’t support it, but now that they’re on WebKit they do. So nice. Yeah. So thank Chrome for that. For that, so yeah, there are you do look like if you see a tie that’s like, wow, that that looks like it’s exactly what I need. Make sure you check compatibility onyx if you don’t see it very often, there may well be a reason. The ones we’re going to be talking about pretty much across the board you can use today across all major browsers. And they’re not going to be silly ones like small chat or something like that. Right. Everybody’s heard of small and people maybe don’t use it cuz you don’t have reason to. It’s also

there is in fact the big, not support an html5.

I would love to know, I want to go look up the, like the mailing list debates that had to have taken place and says, we can have a small tag, we can’t have a big tag like that feels. Very weirdly arbitrary. But okay,

There are a lot of these tags, you can be tags that you could say, you know, what, why would I use them? I understand that use but what’s the point? So, right. This is the semantics matter argument. And we talked about this a lot in many contexts. It’s like, Well, why would I use, you know, a header tag when I can just wrap it in a div? Well, because the header has semantic meaning. Right? But what does that mean right? HTML, the M and HTML stands for markup, and markup is context. That context applies to the reader. But it also applies to all of the machines out there, which may be scraping and reading and trying to interpret your information. So how you market up really matters in terms of conveying that information and applying that context, right, that the easiest and most obvious one is header, right header footer? Why are those so important? Because it helps Google know exactly where the top and bottom repeated elements of your page are, so that it doesn’t try to accidentally index them as content. Right? Right. I mean, how many times have you seen sites where it’s like, the meta description ends up being the menu of the site? It doesn’t happen much anymore, because Google has gotten pretty good at figuring some of that out on its own. But it absolutely used to be a problem back in the day where it was like, the first text it encountered was what it was to start generating a meta description. So You know, you can’t rely on Google to fix that on there and every time though because they will get it wrong. The there’s an article from Elizabeth sec saygus, sakers simonis. Over on medium that will have LinkedIn. She’s she breaks this down and there will be I’ll have like two or three articles in the show notes about HTML semantics. But she the way she puts it is like if if on your page, you put your page title in an h1 instead of a p tag, then Google knows it’s a header, your screen readers know it’s a header, everything knows that’s the name of the page. But if you put everything inside a p tag, then it’s just content to the to the crawler at that point. And you have no guarantee that that’s going to get called out so that when your page shows up in results, it has the title it should have.

And it actually saves you some work in the long run, right? Because, you know, when we talk about accessibility, we’ve talked a lot about roles. roles are an attribute that you can put on an HTML element like a div, to say, you know, role navigation. So then a screen reader would know, oh, this chunk of content is navigation, and I will treat it accordingly. Yeah, we used to use those a lot with HTML for because we didn’t have a lot of other elements that could fill that void. But now, we have tags like main we have an article and we have a tag like nav, if you use the nav element Rap your navigation, there’s no reason to put an aria role on it because the role is implicit in that spec. Right? So by improving the semantics, you are inherently improving the accessibility of your document without doing any extra work or needing to think Well, Kevin, put these attributes on it or whatever, use the right element, and you’ve got the right thing happening. The role tag the role attribute, I mean, is a really I think underutilized property. I mean, I do see it use for navigation or

yeah. There’s a Yeah, there’s a huge list of them. He is it you know, an alert. Is it a banner, you know, is that tab panel tab panels, right we don’t have nearly enough. Yeah. Seo you mentioned and brought up that’s Another one that good markup is good SEO, right? If you’ve got two pages side by side that have similar content to them, and one is nothing but eat tags, and yeah be an h1, but the other page has an h1 has p tags, but then they’ve got block quotes marked up, they’ve got figures marked up, they’ve got a lot more semantic meaning to the stuff in the document, you haven’t apparently made something that is going to rank higher in a search engine if you’re competing with other stuff. Yeah. Now, this does imply that you are using these elements correctly and using them in a way that is meaningfully applied to whatever it is you’re creating and not just like, you know throwing a blockquote around something because you like the way that

have nightmares about contribute still.

I already know where you’re going with it.

and someday we’re going to find a good solution to that problem. And I do not have them today though. If you found something really successful in that area. I would love to hear about it and it is so with the either on Twitter the contact form or something and I Come talk to us because I’d love to have you on the show. element number one, this is one of the most immediately useful, I think, although all of these will have their place is the address tag.

Yeah. And I’m going to include a link in the show notes to the W three spec on this because it has changed. Okay, it may and maybe the reason this is confusing, I’d have to go back and double check the exact spec. Maybe when html5 first came out. It was this way, and it has since changed for either one or two. But the reason folks get confused about this is the address element was originally meant to only convey the contact information for the body of the page it was on so Like if you were referencing, you know, what is it 1600 Pennsylvania Avenue for the White House? Yeah, if you were using the address element for that in an article you were writing, telling people where to send stuff, that was an incorrect usage of the address element, because that address isn’t the contact information for your page. It’s for something else. Weird that has changed. And now it can be used to mark up any contact information on a page. And don’t at me, because I went back and forth and double checked on this because I was reading some articles from like 2013 on some of these elements and 2018 and all of this and I was getting the conflicting information. That’s why I will specifically include the spec on it. You can use address to markup any meaningful address on a page now. Hmm, the funny part is, it goes further because it’s not just address. It’s actually capsulation for any contact information that’s where this thing gets really powerful what

right so what’s what’s your Twitter handle tell the tell the world so they can at you it’s at armadillo armadillo. So you can guess you can add him I don’t know like I’m stuck on this don’t at me bro if you if you have on a page I’m you know I’m Aaron Hill find me on Twitter at armadillo, you can wrap that in an address tag. Hmm and if you don’t believe me again look at the spec they literally have an example of it in in the spec for it. So it’s filed. It’s you know, if you have contact information on your site for your company, if you have offices that are scattered around that you need people to be able to find if it’s if you’re noting drop off locations or event locations. Use that address tag the mark that up you can also If you want to get real crazy, go go look up h card, like something on either microformats.org or schema.org or whatever. You can be heard, ah card, either. And you can do it with an H card, you can do it with just straight RDFa what it does, Oh, I know already have Yeah, it gives you some extra attributes, or class names that you can apply inside the element to give it even more semantic meaning. So you can identify the street name, you know, the municipality, zip code, or postal code rather. All of these, there’s all of these different little properties you can add to it. So now it’s not just an address, but it’s an address or a place with a specific you know, way to parse it, which again, adds SEO value. If I type in, what is the address of you know, your pizza place, the LLC, I’m that much more likely to get your address because Google looks at it says oh, there’s that Dress tag. Not only that, it’s telling me the street address in the city and state and postal code and boom, here you go. This isn’t strictly

Next element kbd.

why you’ve never used it.

you’ve made like maybe a photo gallery or something at some point.

well, but unused, like, you know, key mapping, so you can click, you know, the forward arrow or back arrow. Oh, yeah,

and if you want some examples of this, like if you go to YouTube or Slack, they both have things and you know, any kind of media stuff usually has an area for keyboard shortcuts and you can click it and get a list of all of these keyboard shortcuts that you didn’t even know existed. Okay, things that help you, you know, play content, pause, skip, do all of that. shortcuts in Gmail, Gmail is got a whole keyboard shortcut section. Now, I’m going to throw one coffee out here because I thought it was hilarious. I did check YouTube and I did check slack specifically, for this reference. Neither one of them actually use this markup, and I have no idea why Because it’s such an easy thing to do, but the way, the way MDN describes it KVD represents a span of inline text denoting textual user input from a keyboard voice input, or any other text input device.

so what they’re saying is, it’s just a way to say, when I tell you hit the control key, I can mark it up. So that control actually looks different from everything else. So you know, I’m indicating a command you can,

yes, in fact, it’s very similar to the code tag, especially its default rendering in most browsers. It is an inline tag. The best usages usually will take it and like, give it a little bit of a border and maybe a hell of a job drop shadow, kind of make it look like a button, but not like a, you know, a style button. Sure, but it’s a good way if you do anything Where you have keyboard controls, and you need to convey that to the user, this is a great semantic way to tell them tell their screen reader that you can hit the, you know, the right arrow and it will go to the next item. You know, the classic example, right? If you need to get Task Manager open, hit control, alt, delete, well, right and troll, Alt and delete can be wrapped in a kbd tag to indicate like, I’m telling you to hit keys on your keyboard for this. That is something that, you know, I like a lot from a usability standpoint and a semantic standpoint to do something that you would otherwise use a pre tag or code tag which aren’t technically right. So this right this is meant to do the exact thing that you’re doing there, maybe less widely, you know, needed most people aren’t going to be out there building huge like, keyboard shortcut pages, but right you know, if you’ve made that slideshow, you can add those in. Yeah. If you’re a tutorial site that, you know, that talks you know about a game. Yeah. And you’ve got all these tutorials that have all this markup and markup keyboard commands and stuff, you’re very likely to get rated higher than the tutorial site that does none of that. Because when greenways those two pages, if they see similar content, they’re going to look at yours and be like, Oh, we see them talking about, you know, this kind of content. And they’re using the KVD markup. So they’re clearly conveying more meaning to the user. Right? Again, this is me kind of looking inside Google in a way that I can’t but that is certainly the expectation and ideal, and it makes it easier, it makes sense. It makes it easier down the road. You know, if you are building a web application that does need a lot of keyboard controls. If your keyboard controls change down the road, it makes it a whole lot easier to find them in your documentation rather than trying to search span tags.

just gives it that much more meaning and improves your maintenance.

Okay, next one. This one is actually surprisingly unused is just the letter Q. With her key not john the land. It doesn’t you know, doesn’t turn you into a mariachi band on the bridge of the enterprise, although that would be awesome. Fun fact I’ve been in an elevator with john valency twice.

Who was Morgan Morgan Freeman was Batman’s.

I don’t know. I wasn’t gonna hate double oh seven. Okay,

Q stands for quote, what you might then say, yeah, you might say, well, don’t you mean blockquote? No, I do not. blockquote is a blockquote. It is literally a block of quote that you pull out of your text, it is a block level element. Q is just an inline quote. So Oh, if you so it’s like death versus spam, right? So if you are just writing, you know, and, and then he said, type q on your keyboard, right? And you put that in little quotes that would just be with you. It’s like when you do when you’re in Slack, and you do single backticks to like wrap something versus triple back to

It’s just a way to convey like if you’ve got some because a blockquote is ultimately a call out right? Like you are right? You are taking whatever is being said and usually it’s a little bit longer. Not always, yeah, it can be one line, but normally a blockquote is a call out in your text. So it’s right It is, it is an interruption in the flow in whatever you are writing to say this is an important quotation. But we write things constantly where we’re just doing the, you know, he said, she said, you know, the machine, the error said, whatever. And it’s just a line or something that we’re conveying. Using cue lets you mark it up in inline text without it having to disrupt the flow of that text. And you can also apply a slight element to it. So it will generally use my understanding is that’s the either the closest sibling citation so it’s not inside the queue. It’s either before or after it. Or you can add a site attribute to the element. So if you’re quoting something from a web page, for instance, you could include a site element on the queue. That includes that, that citation URL.

So it’s it’s just a nice clean way to do a quote. And again, add semantic meaning and show, you know, oh, this is something that was said by somebody else. And then Google knows, oh, this is a reference to something else. And again, when you talk about your that classic thinking that, oh, if I need my pages to rank well, in Google, I need backlinks. And backlinks were quickly gained and things like that. And so the value of them has decreased rapidly, but using things like you know, citations with links in them is kind of an another way to get some weight out of that that’s not necessarily being abused at this point, anyway. Yeah, I’m not saying Google absolutely does use those in page ranking. I don’t know. Nobody really does, but it certainly can’t hurt. How about time

yeah, ties. And so yeah, that’s what it is, it’s her time markup. Every time you’ve ever seen a post date on a blog post, or you looked at an events, calendar, any of those are opportunities to actually write it up with a time element. So that, again, from especially from a machine standpoint, that can be really useful for things like Google or even Facebook. You know, picking up when something is supposed to be when you’re sharing links around. This makes it machine readable. And you can then use that even internally like if you’ve got an internal system that keeps track of events or something. And you’re writing up a blog post that the classic example is, you could say something like we look forward to seeing you next Monday. But you can wrap next Monday in a time element and give it an extension. Listen timestamp, so that next Monday, literally the first actual day, yeah, it literally first 27.

that’s cool. Our CMS So a good example of this our CMS at work, actually it has an element are not a date method that gives you I think it’s called pretty date or pretty date text or something like that. So you feed it a date object, and then it will spit out something like, you know, this post was post or this this blog post was was published three minutes ago, or five days ago, or one week ago, and then it’ll start

And then they’ll start going, just like a normal date beyond that, but like it, we’re in that short term time span, it calculates kind of a pretty version of the date. Sure. So this gives you a way to wrap things like that and say this is you know what, that vague reference actually refers to There is a there is a date format that is in the spec that you can go look up in the show notes. It’s basically year, month, day, hour, minute seconds and then timezone offset if necessary. Okay, so it’s it’s pretty straightforward as far as how to use it. The really cool thing about it though is it does more than that it actually will support like a week notation. So you can tell it like the 14th week of the month is something or 14th week of the month. I’m not even one insider into this show. The 14th week of the year, you can give it okay. Oh, yeah, yeah, you can feed it durations. So you know, from x to y or five hours long or something like that. So it actually supports an array of formatting to convey time information to a machine. Perfect for any cut anything that you probably That you want the publish date on anything that you’re scheduling, whether that’s events or screencast of something, a webcast that you’re doing. Time is a good way because we use time notation. So many places.

So it’s a good opportunity to just add a lot more meaning to those to those pieces.

Yeah, absolutely. And again, because the thing I always go back to is I’m always thinking about the maintenance, you have to do not tomorrow, but in three years. So let’s say in three years, something comes up and you’re going to switch content management systems, you’re going to switch from Magnolia to Adobe expression engine. And so you’ve got to move all this stuff over. If you’ve started marking up your content semantically like this. You’re making it Really easy for yourself to write scripts that can help you know port content from one system to another, or, you know, translate. Like if you want your Say, say you want your date format to change, maybe you’re using American style dates. Or you start like that, let’s, let’s say for instance, you’re a US based developer, and you work on all this stuff. And he put in US style date. So we’re talking month, day year, right, and your client is in the EU. And after you’ve released everything, they say, Oh, yeah, by the way, we need to change the date on those 300 articles that you posted. Now, this isn’t gonna Yeah, now since you’ve got it marked up within that proper time element. You made it really easy on yourself to write a script that can go through their crawl them, right, hold the date time out and just rewrite it in the format they want to have it written in. Or just do that, naturally. You could do that if your visitor is a European visitor, use a little JavaScript to detect the time element and format your published dates for wherever your users coming from, you know, talk about a little bit of like micro UX there. But yeah, it’s it just is really easy to start thinking about how good semantics, it promotes good maintenance.

that the classic example there that I used to use a lot was a plugin that could extract microformats out of a page. And so like, right when stuff like h card specifically was getting really popular, you could have a little button in your status bar that you could click, it would extract all the micro format date out of the page, and you could see, you know, what the author or who The author was where their businesses, what their contact information was anything at all that they had marked up in a, you know, an identified micro format microformats or something? Well, we’ll talk about it in another episode. But it’s just additional semantics basically that you can add the pages. The next one web are

No, you are much closer the first time Unknown Speaker West Blue Ribbon. It’s something that would be a word break opportunity.

I don’t know why they left the Oh out of that. Web or word break opportunity. So this is if you are really picky about writing and or you have, you know, marketing folks who and this, this is a thing like it, there are people who really you know, they’re picky about the way or Friends may fall on a page are you there they want, like their their text is part of their design. And so they care about how the content breaks. Using these tags lets you rap really long strings to define where they should break at. So think about a word lights cool ordinary, right? Yeah right place to break the word extraordinary after the X is exactly after actually it’s most people in after the Y if you’re up to the wire in the UK, it’s after the x if you’re in the US after the tea. I mean that’s Everybody knows Unknown Speaker that. Normally you would break it

after extra and and then wrap the ordinary to the next line and hyphenate and all that. But if your container and this is really important for responsive design, if your container shrinks down, one of two things is going to happen. It’s either going to break it automatically without any care for the word Or it’s just going to overflow its container. So, okay. Right. So this gives you an option to say, you know what, no, this word we want to break here. A better use case, though. A better use case can be things like URLs. So if you’re printing out URLs onto the page for something you could have in specifically break at a slash to make it really easy or something like that. Because URLs can be very low. Yeah. So okay, it gives you another way to mark it up. And the thing about web art is, it doesn’t copy. So if you are copying text out of a paragraph, it doesn’t. doesn’t give you any extra stuff. Where this matters, and the reason I bring that up is there are other ways to hyphenate content. You can use CSS hyphens, that is an option, and you’re going to let the The machine decide where to hyphenate that word at. You can also use the shy guy technique.

the shy guy technique is add a zero with character it’s ampersand shy colon, so it’s shy it’s a short hyphen

bullshit Hey, I didn’t I don’t know anybody else that refers to the shy guy except me. Because it’s how I remembered it’s it’s mine, it’s my pneumatic device. The if you put the shy character in, it will wrap pretty it’ll give you the hyphen problem being it does copy out of some browsers so if you copy and pasted you would copy the hyphen with it. So So all of these things have trade offs all of them are given take web argue a lot of control but like so for instance. The reason it’s hard is because it breaks at the beginning of the tag, not the end. So you can’t style it with like after content. Okay? That’s, that’s the challenge to using that. But you get good control over the readability. css, Ivan’s lets you hyphenate, but gives you no control over where in the world it’s going to break at shei gives you control, but it can copy out. So use these at your own risk, test them to make sure they work the way you want. But w br is one that can give you a lot of control so that browsers don’t just do it opportunity, or rather, browsers do do it opportunistically, not programmatically.

No, it is it is a rapper.

So you you wrap the thing with which you want to break, and then if it’s still too long, then you know, the browser will take over and do whatever, you know, it thinks is right. But yeah, it is not. It is not Singleton. Because you can have multiple, like any URL, you may actually do several of them. So I don’t entirely know why that’s the case. Because it seems like it would make sense to do it like a normal br tag would be done, right?

Now I haven’t tested it with other browsers, you may be able to get away with using it like a singleton. And it may the browser may interpret it correctly. But that’s not the advised usage. So that’s, that’s what I’ll say about that. Okay, we’re almost into the final stretch here. The next one is Picture.

Like for illustration, what about like audio or video? Have you used them?

so picture is basically the image version of like a video or audio tag, okay, it’s an image tag, but smarter. It where it really shows off its strength is with responsive images. This is one of those areas, right. People have been frustrated with responsive imagery for years, right. We’ve run JavaScript replaces, we’ve used third party services. We’ve done all of this stuff, trying to Figure out how to get the right image to show up at the right sizes. And yeah, it gets especially nasty right on, like, really small devices where it’s not just that you want to show a scaled down version or a lower res version, but you maybe you want to show a differently cropped version of an image. Right? Okay, so that’s what picture allows. Inside the picture tag, you define sources, just like you would with an audio tag, and each source has a UI in it for whatever image you’re trying to pull. And you include a media query with it. And so you can say, Okay, if you’re, you know, if your min width is 1280, then we’re going to show the big picture. If our min width is your 320, we’re going to show the really tiny one. Right, and you can still include a normal image tag at the end of that which is then the failsafe So if the right, as far as I know, picture is just like all the rest of these, like it’s it’s supported across the board from a browser standpoint. But if somebody was using iE 11, and it didn’t work, that’s fine. It’s going to ignore the picture tag, it’s going to ignore the source tags. And it’s just going to render the image tag. So it should degrade gracefully and pretty much all cases. But this gives you that way to have real control, fine grained control over what images show are different sizes and different media queries. Nice, super useful for blog headers, super useful for any kind of hero image, anything where that control is valued, basically.

Next up, is the last big one that we’ll talk about, which is template.

and I barely let it make the cut.

to do list item.

So the reason that this sounds weird and and why Aaron’s driving it this Sort of conflict is the template tag is meant to contain any additional arbitrary HTML. It is parsed by the DOM, but it is not rendered to the page. So it is completely and totally hidden. The issue basically comes down to and the reason why this is kind of funky is do you and this is it’s totally workflow related. I think it’s it all comes down to your style. Do you want to write your HTML elements in JavaScript? And have all of that, you know, use template literals? And do all that there and react and whatever? Or do you define a template piece in your page that’s it is rendered to the HTML on your page, you just don’t see it in the page. But then you just reference that from your JavaScript and say, call this element and then do a clone note on it. And you can keep cloning it all you want to at that point, and it’s the basis for the rest of your elements.

Yeah, I felt like professionally that that’s what it’s for. And you can eat once you’ve cloned that node, you can add stuff to it, you know, if it’s a to do list item, it’s got the basic, you know, if it’s just a URL that you’re adding allies to, each Li maybe has a class name on it, or something, and the button inside of it for you know, whether it’s been done or not. And then you clone the node, you add your text to it, and then you render it to the page. And you can add that static HTML that’s there for you that’s immutable. That’s the real word. Up the right template tag, I believe is if and I’m going to get this wrong maybe but it should be read only if my memory is correct on it so that you can’t even use JavaScript necessarily change it.

That’s a good question that off the top of my head I was not prepared for No, no. I do know for a fact read aloud won’t read it. Okay, I know that for a fact. If it’s a browser based screen reader, I would presume The answer is absolutely No, it won’t. Because if it’s if it is a browser based screen reader, then it is reading the page as interpreted by WebKit or whatever. So, to those engines, that template tagging is parsed it exists, you can query it, but it is not rendered into your Dom in a way that makes it visible. Okay, now, if it is a system level screen reader, yeah, I don’t know. worth the test. If if somebody went wants to do that and get back to us. But that’s what’s for that’s and that’s there’s nothing really else to say about it. It’s just meant to encapsulate some HTML that you intend to reuse for something else on the page. it by itself, it is useless. You need to use JavaScript with it for something. But you know, and I said that there was a use case that I had thought of. There’s a site that I was working on that has a modal on it. And it used a rendered modal wrapper. In the HTML, it was invisible by default, but the wrapper for it was all set up there. You could use a template tag in that situation when you go to to render the the modal to the page, somebody clicks the deal. It was a, it was a modal tag. Well, not not a modal tag, it was just a modal, contextual sense. Okay, it was a pop up window in the page.

this a div. So somebody would click the contact button and the forum would pop up so you could have but we used it for more than that, that modal was used to drive an image gallery, it was used to drive some detail pop ups. So it was the same base markup. And instead, then what it would do is the page would load, be read that in the JavaScript, removed it and then use that as the clone point, this would be the same. But it would leave it in the HTML so that you didn’t risk something happening in JavaScript or, you know, through throw it away, or the variable gets reset or whatever. They use cases on this are kind of limited. And this is why it’s the last one I’m mentioning because I feel like it’s probably out of all of them. Maybe the least useful one. It is interesting, though, and it’s it’s always fun to go through and you take some time, go look through a list of all the possible HTML tags, and go look at Rp. You know, RP is a child of that Ruby element. You know, it’s kind of like using a dl or something like that. You look up, look up the mark tag. Mark is kind of interesting one for highlighting content. There’s all these different tags in there that are useful. Folks. Kick back for just a second, we’re going to get to our sponsors and be right back with a word from our sponsors, who is us. The drunken UX podcast is brought to you by our friends at New cloud. New cloud is an industry leading interactive map provider who has been building location based solutions for organizations for a decade. Are you trying to find a simple solution to provide your users with an interactive map of your school, city or business? Well, new clouds interactive map platform gives you the power to make and edit a custom interactive map in just minutes. They have a team of professional cartographers who specialize in map illustrations of many different styles and are ready to design and artistic rendering to fit your exact needs. One map serves all of your users devices with responsive maps that are designed to scale and blend in seamlessly with your existing website. To request a demonstration or to view their portfolio, visit them online at New cloud.com slash trumpkin Ux that’s in you cloud.com slash drunken UX.

glad you enjoyed it, Aaron, say it angry, you’re gonna re drugging through this.

I’m glad I’ve been able to

If you’ve Got a tag here that you think we aren’t using enough of and you think is especially useful. People don’t pay attention to let us know. Drop by Twitter or Facebook at slash drunken UX. Hit us up on Instagram at slash drunken UX podcast. You can check in with us on slack at broken ux.com slash slack. love to see if you agree or disagree, and we get any of these things wrong because that is always certainly an option. I like to think that I get them right from maybe, and I, we got them right, come call me. Now you’re going to go back. What you’re going to do is go back and listen and try to find the mistake just to call

stay tuned. We’ll be back in February with more new episodes of the podcast. Until then I want to give you one piece of advice and that is to keep your personas close and your users closer. Bye bye.