Semantic HTML

Welcome to InSpec, a show about web design and web development. I'm your host Ajay, and with me as usual is Kay. Hey guys. In today's episode, we're going to be talking about semantics and HTML structure and some of the more recent HTML elements that have been added to InSpec and how to use them in the correct way.

Okay. So what is semantics? What's your understanding of semantics? Or semantic HTML?

Yeah, I suppose we should start on what the sort of definition of semantics is. So by definition, definition semantics is the study of meanings. And so in HTML contexts, that's basically the study of the correct use of certain elements. So there's various HTML elements which are designed to do a particular thing.

You have a PE type or a paragraph, you have a UL for an unordered list and an ordered list. And semantics is just the case of using those correct elements for their intended use. There was always a common mistake that maybe a lot of beginner developers might make is to wrap all this or content in divs or wrap all of their text in paragraph tags and where it may not need to be like that. Maybe not using the right heading level to sort based on the hierarchy of the page.

So semantics is basically just using the right elements in the right place for the right type of content. Any thoughts on that? Yeah, I think that makes sense. I think I'll just go back to when I first started coding HTML.

I think back then I had no concept of semantic HTML or the correct way to use it. I mean, this is before HTML5, right? So HTML4 in its infancy when HTML or the web first came about. So I was like, I don't know about you, but I was creating web pages using divs, which is semantic anyway, but giving the div meaningful name.

So I understood what that div was and if another developer took the code on board, they'll understand what's going on as well. So it's about breaking down a page using things like navigation div class header, then inner header, main content, and then splitting up the main content into left, right, div class footer, things like that. So literally giving every single div a meaningful name. And then with the add bit on HTML5, everything just got a lot easier.

I think we'll talk about those semantic tags that introduce HTML5, but things like using header instead of using div class header. The head is under straight away by the browser and by search engines as well. So yeah, I think that's it. I think when I first started, I had no concept of it.

So I kind of just gave my own meaningful name. Those names will probably really pull really, really long sort of class things for divs, but I kind of gave myself an idea of what was going on on the page. Yeah, exactly. That's the way it was before HTML5 really came into play, which was like in 2014, before then, like you said, everyone, you know, there was divs everywhere.

And yeah, we were just creating context by using IDs and classes to name those divs. And then HTML5 came around and introduced a bunch of new elements. And those were there for structuring your content better and, you know, giving a bit more meaning to the content rather than just having everything in this sort of meaningless div container, which is basically, that's all it is, the div is just the box without any real, real, real meaning to the browser. So, yeah, some of the HTML5 elements that were introduced, the main ones I suppose, header, footer, main, there was nav, section, aside, and article.

Those are the sort of seven, that seven, right, new ones that we introduced. So yeah, we're supposed to just go through each of those and just give a quick outline about what it's for, where it should be used and, you know, what's the best way to sort of structuring your page using those now? I think I'm probably like a culprit of not really taking much notice of these semantic HTML tags. I'll be honest with you, like when I code pages, usually I'm heavily relying on what I've already coded in the actual theme or the page template.

So whatever I've usually coded in there, I kind of like go along with. And I kind of usually let the content dictate how far the semantics will go on a page. So if there's no block quotes, no use for, you know, an article tag or, you know, a side tag or anything like that, I just want to use them at all. And I tend not to use those particular tags anywhere.

But yeah, I think, you know, we talk about the very first one, header. To me, I've always used, you know, div class equals header in my code. So when that came about in HTML5, it was like, okay, brilliant. Cool.

I know exactly where this goes, you know, at the top of the page, usually for any kind of my important heading elements, I think I'm a logo would go in there, the navigation will sit in there, maybe the search bar might sit in the same sort of, the same container as all in the header container. I think there's a main kind of elements that I usually put in the header. Yeah. And the beauty about things like the header is that they don't come with any default styling so if you have got an existing site which has div class header, you can literally just rename that div to header and then in your HTML, basically what you would have is header class header.

So your CSS will still pick up the class name, but semantically your HTML will just automatically make sense now because it's wrapped in the correct element. So actually upgrading to these more semantic HTML elements is actually quite easy, especially if you have got meaningful classes on it. Exactly. Yeah.

Of course, if you have got a header element, you don't necessarily need the header class on their result because you can, you know, in your CSS, you can target the element directly. But the thing with a thing with the header, for example, is that you can have multiples on a page. So it is still quite handy to have a class on there as well because just to differentiate one header from another. But yeah, that's a very quick and easy way to operate your HTML is just to rename some of those elements that you've got, these wrapper elements.

Yeah. Yeah. And the same thing goes with the footer. So, you know, the footer should, you know, be at the bottom of your content.

After your main content, it generally includes things like your contact information, copyright information, maybe some like links to maybe like a site map or something like that. On non trivial pages in your site, normally has like a link back to the top. So it's basically just a wrapper for stuff that you'd expect to be in the footer. But again, like the header, you kind of multiple footers on a page.

And we'll get into that in a second about sort of the scoping of sections. But one of the good ones that was introduced, I think, is an AV element. Yeah. Which again, doesn't actually have any styling attached to it.

It doesn't have any children. So it doesn't necessarily say that this is going to spit out a navigation ball. It's just to say that whatever's contained inside this nav element is the navigation for the site. So inside the nav element, you could have an unordered list or you could just have a bunch of hyperlinks.

It doesn't really matter what you've got in there. As long as they are links to other sections of the site, how your structure is, is up to you really. The nav is just to the nav element is just to say that this content is navigational content. Yeah.

And I think that's for me, that was like a winner for me. Because a lot of the time when I was coding a menu that was always using an unordered list to create them. And you can use them in the audio of a page as well. When you're creating lists throughout your page content.

But then they've got to use well-defined class names to separate them. One thing I always found was in my early days, coding HTML and CSS, just giving these unordered lists the same name sometimes. Or sometimes I wasn't giving them a class name. So when I was coding a menu, it would affect every other unordered list on the page.

So it was about getting really, really granular with the name conventions for these class names. But having the nav up there strictly tells you, tells the browser, tells search engines that this is the navigation element for this page and for this site. So yeah, I think that was really a little semantic HTML. Yeah.

And that's the biggest takeaway really. The class names and IDs, they're going to help you with your styling and maybe with some JavaScript hooks. But the actual element, these semantic elements, they're going to help the browser know and search engines especially know the importance of various bits of content on your page. So you can have a header, for example, which has two lists in it.

One list is being used for navigational elements and then the list can be used for showing some list of promotions, for example. In terms of HTML, they're two unordered lists. But by wrapping one of them in an app element, it just tells a search engine that these are the navigational links and you should treat these as links to other pages and treat them with that importance. Whereas the other list, although you may also contain links, those links aren't navigational links, they could be links to, you know, which pop-ups or links to external sites or something like that.

I'll give an example, I've taken on a client who are helping out with a website they got built by someone else and for some reason, well, I know the reason why, but their website was appearing in Google search results with their footer menu being given prominence over the main navigation. So the fringe links were showing up for their listing, for their organic listing. So things like, you know, contact us, website designed by so-and-so, email us and things like that. So they couldn't get the head around why that was happening.

So after a quick browse over their coding for their website, the nav tag was used in the footer but not in the main menu. And they're using a theme and the fact that the theme isn't using the correct semantics within it is, you know, that's a long-bell straightaway. So I kind of figured out why that's happening, but whether or not it has any effect or not making changes is another thing to look at. But yeah, that's a perfect example.

Yeah. Yeah. So these things, they are important. Yeah.

The sections thing, I think we spoke about this last week, although, especially when you've got really, really long websites or one page website, sorry, that scroll on and on and on. And my sort of, my sort of rule was to only include one H1 tag per page. And then, you know, you mentioned that as long as you're using sections and you're defining sections clearly on that page, you can have more than one per section. Yeah, that's right.

That's right. Yeah. So this is the thing. So I kind of like with the semantic side of things, I know the semantic HTML tags are when to use them, et cetera, but something like that, you know, that was new to me and you bought that last week.

So that's pretty cool that you can use multiple H1s on a, on a, on the same page if you're using your sections, right? Just stop and think about it for a second. It makes total sense because a section is basically like a new block of content and there's no, it's like a chapter of a book. You wouldn't expect chapter one to have a nice, you know, bold heading for its chapter title and then every other chapter after that doesn't have one, you know, you'd expect them all to look and feel the same as just going through a book.

So if, if once you start a new section, then this is where I was saying just, just earlier about having multiple headers and footers. So you can have your whole site wrapped in a main element, which has a header and a footer and then you can have a section which can have a header and footer and then another section, and each of those can have their own H1, H2, H3 hierarchy in there as well. So you basically, you can sort of structure your page as lots of individual pages just by using the section tag to sort of break up that content. And one way I like to think about all this is, so when you've got a word document and you're writing say a piece of work for school or something and you're using the formatting options within your web processor.

So you're setting your title, you're not just, you're not just increasing the font and making it bold. You're actually defining it as a title one or heading one and then you're, you know, your paragraphs, you're defining those as normal text or whatever you decided to name them. And then when you have got a smaller heading, you're not just decreasing the font size, you are assigning it as heading two. Essentially what you're doing is you're creating a HTML structure there.

And the nice thing is in Word or some of the Google Docs or whatever, you have this like overview panel on the left where you can sort of look at your document structure and all it does, it doesn't show you like every single part of your document, it just shows you the titles, it just shows you all the H1s and all the H2s and what other formatting options you've used. And that's the way I like to think of HTML as well is that by defining these, these headings and these sections, you're just basically creating this document structure, this document outline which is, which you can then, you know, get like a high level view of how your content is structured. Right, yeah. I think it's very similar to when you look back at, if you went to university, you handed in a dissertation.

There was a very strict guidelines as to what that dissertation is to follow in terms of its presentation and they are, you know, even for the font size and double spacing and line heights and things like that. But I think the important things are, yeah, you're talking about your, your title, your main title, headings, subheadings and then using bullet lists and bullet points and citation and quoting in the correct manner and things like that. So it's very, very similar to that. So when you think about that way, so if you would like from, you know, my background, I don't really think much about some indication and I'll just kind of like go with it.

If you take that sort of concept of how a dissertation should be structured for university and take that concept and bring it forward to your web page, I think it works hand in hand and it's more easier to kind of understand. Because even to this day, like right now, I'm going to do these HTML tags that we've got listed on our Trello Gordon, it's a few, I'm not going to see. So it's crazy. Yeah, I think, you know, as, as the purpose when you're, when you're putting together a web page, it's, it's sometimes you need to just get something down, you know, just do sort of get proof of concept out and it is quick to just throw a bunch of divs on the page and just get your structure right because the structure could change over time.

So, you know, if that's the case, then semantics are normally a bit of an afterthought and, you know, it's very easy to just sort of forget about them and, you know, the site is working, it's looking good, right? Let's get it, let's get it live. But it's only a little bit further down the line when you're trying to maybe do some SEO or you're trying to, you know, you're trying to sort of surface some particular content in some sort of social capacity, like on, you know, a sharing widget or something like that, when you realize that actually your content is not structured quite right and your search engines aren't seen, what they need to see. Exactly.

And then you have to go and do all this rework. So it is good to have it front of mine, but you know, I think it's one of those things that most people it is a little bit, a secondary step, step one is just to get your content out first. So I mean, I brought you, I mean, when I create templates for a website, using my own theme that I have, the semantics are in there, so, you know, so the things like, you know, your head are main, you know, your H1 through to your H6, but I never really get to H6. I mean, any page that I create, you're doing goes up to my H4, maybe a H5.

So like footer and things like that. So everything like that is in there, but the rest of it is purely, my personal opinion, the rest of it is all dictated by the content and the type of content that the page is going to have. So later on down the line, if the client decides to, you know, send over a content from your page and, well, if let's say for a blog post, they don't have any blog post and now they want to put a blog post on their website. So, okay, we create the blog page layout for them and then we kind of emphasize this, that this is an article, you know, then we use all the other semantically, you know, HTML tags to outline the fact that this is an article and is an author attributed to it and this citations in there is, you know, subscript, superscript or, you know, anything like that is kind of dame defined as a window content, so that makes sense.

Yeah, I mean, a lot of it is determined by the content as well. So until you've actually got some real content in your site, you're not going to know whether to use any of these elements. So it's these few sort of structural ones that are the most important. I think it's that, you know, like we discussed the header for the main nav section and then there's article on the site.

Articles are an interesting one because you just, I tend to use that one a fair bit now. If you go into the podcast website and expect to find each episode is wrapped in an article. Okay. And the reason for that is because article is supposed to be used for like reusable content.

So blog posts or obviously articles, it could be, you could wrap it around like a product page, for example, which, which may, that product may appear in various different scenarios, like on a feed or in a basket page. So you can wrap an article around that as well. So it's just a way of defining like reusable content. And then the other one that gets used a bit less is a side, which is a bit of a funny one because a side is supposed to be used as secondary content to your secondary content to your main content.

So the obvious one is like if you've got a blog and then you've got a sidebar. Yeah, but it can also be, like a site can also be used within an article. So you can have your main content of your article and then you can have an aside in your article. So for example, in an article, suppose you've got a bunch of a bunch of headings and you've got quite a long form article.

You may have a little table of contents just towards the top of the article, some links, which aren't navigational links necessarily, but they just sort of links to anchor links further down the page. That could be an an aside or if you've got an advert, you know, if you're selling ads on your website, you could put your adverts in and aside. So it's not necessarily part of the article, but it's kind of linked to that article. Okay.

Yeah. But that one, I don't use it very much. I don't always have a good use case for it apart from the sidebar. The only time, the only time I'm ever using that is in the sidebar for a WordPress powered website on the blog page because it's there by default.

So I won't actively go and code that into any other template. I mean, unless it's required. So if another content page on the website about us requires a sidebar, which has maybe some ads in there and, you know, at least some blog posts, then it will be thrown in there. But that very, really happens.

So yeah, I mean, the first time I saw that was in WordPress template and it makes sense. It does make sense. It's probably the better to use it more to define your content. Yeah.

Yeah. And I think the rest of the HTML semantic tags are fairly obvious when they should be used. You've got a abbreviation tag, you've got an address, a block quote, you've got things like sub and superscript keyboard. So you've got a KBD tag, which is supposed to be like text-centered by user.

But the one that's slightly not obvious is when you've got a bold and a strong and then you've got italic versus emphasis because they both visually, visually, both do the same thing. And before strong was introduced, I don't know when that was introduced, it was pre-haged in my life. But obviously, if you wanted to make some text bold, you wrap it in a beat. But it was becoming more and more common now, especially with CMSs, is that they wrap it in a strong tag.

Do you know what the difference is? I was going over it, but I think it wants to emphasize the importance and the others to highlight. Yeah. I mean, my understanding is that the bold tag is purely visual, whereas a strong gives it some contextual emphasis as well.

Correct. And the place where that will really take effect is if you're using like a screen reader and if the screen reader is reading your text and you've got a pair of sentences with a bold word in the middle, wrapping a B, wrapped in a bold tag, then the screen reader will just read that normally. Whereas if it's wrapped in a strong tag, then the screen reader should and the reader just changes slightly to give it a bit more emphasis. Yeah.

Essentially, it's the B and the eye tags. They're not semantic, then this is what I was reading. No, they're not. They're purely decorative.

Visual, that's what it is. Yeah. But that was an interesting one because I was like, okay, what's the difference? So I think I'm going back to my website.

Yeah, when you use CMS, a rich text editor, it will use strong. But then I've gone back to some old websites where I've actually used B. And yeah, but it's a mixture of B and strong. Yeah.

Again, it comes out of context. Do you want this text to just look slightly bolder just because it looks nicer or do you want it to sort of shout out a little bit? Do you want it to be bolder to create emphasis and then you need to use it as the correct one, I guess. I think if you just use it strong everywhere rather than bold, then you're probably in a safe place because all the CMSs seem to do that as well now.

Yeah. It's the open with you. It's not frowned upon as well. Yeah.

Just to change that, you know, one of them is one letter and the other one is six. Exactly. Yeah, that's a killer. So again, it comes down to, you know, getting your code out quickly or getting it out cleanly.

So if you're all going for speed, then you probably will just type a B. Whereas if you want to be correct, then you should try and use a strong wherever possible. Yeah, that makes sense. Yeah.

Okay. So that kind of covers all of the semantic tags. You use any tools that you've got to test your code or make sure that you're writing through properly. I've used, how much money are you?

So apart from the W3C validator, there's a browser I was using when I was using Firefox to build websites. And it's just, I think it's called semantic checker. And what that does is like your Chrome inspector. So your dev tools, it highlights everything using different colors and, you know, kind of like notifies you or anything that's missing as well.

So it kind of advises you that, you know, you could also add this and this to the page. I was using that a while ago. And then it's outliner that I'll use for Chrome. But to be honest with you, I tend to, when I'm carrying an SEO check or an on-page SEO check, two or three of the SEO checking tools that I subscribe to actually generate a report and provide quite a lot of information about the semantic data on the page.

So I tend to just go with those now and they're paid for tools that are used. They're not cheap. And I'm purely using it for on-page SEO just to make sure, you know, pages are loading quickly enough and file size is all good. And, you know, we've got deferring in the synchronous loading scripts and things like that.

The other clever part is it does actually give you a massive report on your semantic HTML. I can't remember the names of the ones I'm using, but it goes SEO, such as one. But yeah, that's what I'm using. I've got some links to put them and show notes afterwards.

Yeah, definitely. Yeah, the main one I use is a Chrome extension called HTML5 outline. Is that the same one that you just mentioned possible? Yeah, outline of a Chrome.

Yeah, which is really good. So essentially what it does, you just click on the extension and it adds, what it's doing in the background is it adds a bunch of IDs to all of your HTML5 elements that it finds. And then it uses those IDs to sort of generate the report. But what it does is it finds all the H1s, the articles, the sections and so forth.

And it lays them out in a sort of an indented tree sort of structure. Yeah. So you can quickly see that, OK, I've got a title from my blog post and I've got it as a H2, for example. And then you click on Outliner.

And if that H2, that title is appearing maybe further indented than it should be, then you've probably got something wrong in your actual sectioning elements. So then maybe that H2 is scoped wrong within your HTML. So it's a bit hard to explain, obviously, on audio podcast, but it's definitely worth checking out. And if you just go into some of your existing work that you've done or some pages that you often just click on it and just see how that page is structured.

And you get quite quickly, you get an idea of the way this thing works. One thing that it does do though is it expects to have a heading inside each sectionable content. So a sectionable content is not just the section tag, it's also the main tag and the nav. And I don't know if this is a hard and fast rule, but really all of those should have a heading in them.

If you've got a section, it should have a header and a header should always have a heading inside it. Whether that heading is visible or not, that doesn't matter. But in terms of just to attach a label to it. So for an example, if I go to the inspect website and I just run this outline on the homepage, what I do is I get the H1 is the title of the site.

So it says inspect and then indented is giving me an untitled nav because I've got a nav element around the main navigation of the site, but there's no heading inside that nav. So then it's untitled. So really what I should do to get rid of that error is not an error, but to that warning is to put a heading inside the nav and then just would CSS just hide it. Exactly.

Yeah, that makes perfect sense. I've got an example as well. So WordPress by default always attaches, I think it's a heading tag to every single page. It gives it a H1 by default and it exists on every single page on your single post template on your index page template.

And what I tend to do is I write some CSS to hide all these things that I don't require because I don't use them. And then what I do is I bring in my own heading and H1 tags into the template myself. So I see what you're talking about and that's exactly what I do with WordPress. There's a lot of stuff that displays which I don't need.

And then upon running, this is the weird thing actually. I run a SEO check on one of these sites I was working on and picked up two H1 tags on the website on the homepage. And I found that really strange that it was doing that, although it was hidden using this plainer. And so I found out that it was actually being generated in the actual theme template.

So I have to go and find that template part and change that H1 or remove it. Yeah. So I see how that happens. And yeah, I do tend to kind of like just remove the stuff that's all needed.

Yeah. And this HTML that I know, Chrome extension will make that quite visual because you'll have basically all the time to the left of your tree, your document tree. You'll have two entries because they're both H1s. So you'll quickly be able to see it.

And if you wanted the second one to, if that was intended to be intended as a H2 level, then you'll either need to wrap it in another section or you need to change it. Obviously to H2. What's your take on, I saw a conversation between some developers on Twitter, like I always do. What's your take on giving your heading classes different names depending on their site?

So H2 large, H2 medium and H2 small appearing within the same section on the same page. I try and avoid giving class names, things like a large, small medium. I try not to make my classes represent the way they look, but rather represent the way they are used, for example. So I would try and avoid having a class on a button which says like Big Red button, right?

But then I may have a class which is primary call to action button, for example. And then that will be styled in that way. Generally I try and avoid having classes on headings as well, unless I really need to target a specific one for some reason. I try and just let the hierarchy of the headings be defined, you know, defined the sizes.

And you know, by using these sectioning elements, you can do that as well because you could have a H2 intersection and you can have a H1 that's not intersection and visually they may look the same because they're both rendering as a top level heading, if that makes sense. Again, this isn't great, protocols content. It's something that you can already see in an example. I would avoid using a class like H2 large, I would give it a more contextual class name and then slightly however you need to really.

One thing I had in a project that I'm currently working on is a request from the client actually is to make all headings on the website look the same. So they all visually look the same size color, weight, everything. I was just going to ask you about that, yeah. Yeah, so it's a bit annoying because then when we do need a heading which is slightly smaller, we then need to start introducing overrides.

So yeah, blanket in the CSS file we've got H1, two, three, four, five, six, all given the same font size. So although they have got different meaning, semantically, visually they're all at the same. So the team, the developers are still encouraged to use the correct heading where appropriate, but it's not going to look indifferent. And then if we need one to look slightly smaller than we need to add a specific class on to that particular one and override it.

Which is a better way than obviously making all of the headings, headings, all of the H2s. Yeah, definitely. If that is your end goal is to have all the headings within the same. But ideally, I'm not very keen on that approach.

I'd rather have some visual hierarchy with headings. Yeah, and I think from SEO point of view, I think Google and any SEO site check that you're using will, I think it will pick up on that. And it will kind of probably give you a warning, not a red warning, but with that amber warning saying your headings are the same size to give prominence to the most important one. Yeah, it's important for the users of just to know what they should be focusing on.

When a user approaches a page, if there's some text that's slightly bigger and bolder, I can be drawn to that first. Yeah. Yeah, OK, great. Well, that's everything that we've got on the list for semantics.

I mean, it's not very difficult topic. It's just something that all developers should really think about. If you are working on a project right now, just stop and think. Are you just wrapping everything on a div just for speed-sake?

Or can you structure this content to give it some proper meaning, especially if it's something like a blog where it's got lots of texts and maybe different levels of hierarchy in the text as well. Now's probably the good time to just take a step back and just try and structure your content properly. Definitely 100%. All right, brilliant.

Well, that wraps that up. Before we go, do you have any recommendations for this week? Anything that you're watching or listening to? Anything on a share?

Watching jumped on, stranded things, season three. Oh, yeah. I mean, so I think it was episode four. And if you've seen season one and two, you're going to love stranded things.

It's really good. Yeah, I'm sorry. You haven't had as brilliant. It is really good.

One that a lot of people or listeners will be surprised about is just like watching lost. OK. I've never seen lost. You obviously either.

Well, I've just blitzed through seasons one and two and I'm going to see you in three now. And this thing, have you ever seen prison break? Not really. It's in a couple of episodes.

OK. Very, very similar. It's just like it's a twist and a story and everything sort of connected and there's another twist and there's another twist. It's brilliant.

It's absolutely brilliant. I think when those sorts of series came out lost and like Sopranos and a few of the other sort of classic ones, I was never really into watching TV series back then. I only really got into them after watching Breaking Bad. That was the one that broke me in, I guess.

So I do at some point need to go back and watch some of these classics. Yeah. I'm glad I jumped on that now. So yeah, that's pretty cool.

I jumped on that one. Where else was there? I think the usual podcasts or vlogs that I watch on YouTube, the conspiracy guys, apart from being hilarious, the hosties are about hilarious. The content that he has and it's not to be talked about.

It's brilliant. So they talk about all kinds of conspiracy theories and true crime. I'm really interested in true crime. That was a good one too.

I think definitely getting involved. You've got a time for it. Some of these episodes are about two hours long. OK.

But there's a lot of banter involved. So definitely one to check out. All right. Cool.

So the question is this website called poolside.fm. I saw your post on that. Yeah. It's brilliant.

The website is designed like an old interface and it's meant to look like something straight out of the 80s. And essentially what it is, it's just a music. It's just an internet radio station. In the background, I've done some thinking around in the code and stuff.

It's basically a sound cloud playlist in the background, which is being streamed through this nice looking interface. And it's just mainly house tunes, but quite funky, the sort of thing that you would hear whether you're on holiday sitting by the pool. And yeah, it's just brilliant. A brilliant playlist is the branding is on point.

And the guys that have made it, there's a couple of guys from France and this one from Poland, I believe. They've also done another site called Foreign Wrap. So if you're into hip hop and you're into maybe some non-English hip hop, then it's worth checking this one out because it's got filters for different countries. And Foreign Wrap, what it does is it's not just a playlist, it plays the videos, YouTube videos.

And there's a full screen in the background. And cool thing is they've also got an Apple TV app. So you can have these videos playing on your Apple TV. So yeah, check out those two.

Cool site FM and foreignwrap.com, I believe it is. Yeah.com. And they're both by the same, same or similar people. Some of the same people.

Yeah, excellent. All right, okay. So yeah, that's it for this episode. And if you liked what you heard them do hit subscribe in your podcast player.

And leave us a rating or review on Apple Podcasts. So other people can find this. And the best thing that you can do is actually just share this with your friends. If you want to get in touch with us, you can get on Twitter at Inspector Fem.

And then you can find links to our personal Twitter accounts as well. And the show notes for this episode and all the archive is going to be on the website at www.inspect.fm. We can also listen to the show on your desktop if you want to. So until then, we'll catch you next time.

Yeah, see you then. Bye.