- By
Understanding HTML opens up the web. Once you know what it is, and how it works, you’ll soon see how the basics of much of the entire internet functions – and more importantly: both how basic webpages are created and how to edit them. What’s more, although daunting at first, HTML is really a very very simple language to learn! Ready to find out all about HTML?
Let’s take a look…
What is HTML and What Does it Do?:
– (note: video credits to Topher DeRosia – creator of HeroPress)
Video Transcript:
Hi! This is Topher with WinningWP. In this video, we’re going to answer the questions: What is HTML? What does it do, and what is it used for? I’m going to start off by telling you what it stands for and then I’ll show you what it does and what it’s used for. HTML stands for hypertext markup language, and the hypertext refers to the fact that HTML makes it so that you can click on links in web pages. That’s the hypertext. The words markup language just mean that it’s something that you use to mark up normal English to indicate things. Lemme show you what I mean: This is a normal web page. It’s in WordPress, and the entire page uses HTML to tell the browser what to do with all this text. Some of it is more important than others, some of it is in tables, some of it is images, and on any webpage, in any browser, you can right click and view page source, and see all that HTML. Fortunately, you don’t need to know all that HTML. I’m going to show you what you need to know in the context of WordPress. This is that same post, but in the admin area, and if you’re used to WordPress, this should look familiar. This is the normal content area. This type of editor is called wysiwyg, because it means what you see is what you get. This word first is a little darker than all the others because I highlighted it and clicked the bold button, and so now it looks bold. This word, statistics, is actually a heading, size three, and diversity is also a heading, size four, but this normal text is just a paragraph. Now a neat thing about this editor is that right here in the top right is a button that says text. And now we’re looking at the same information, but we can see the raw HTML. Right here is the word first. Do you remember how I highlighted it and made it bold? What actually happened is it got wrapped in some HTML tags called strong. HTML usually comes in two tags: an opening and a closing, and the closing is different because it has this little slash here. So something really important to know about HTML is that it describes the text that it’s marking up. I don’t really want this to be bold. I want it to be strong. In a screen reader, it doesn’t matter if it’s bold or not, but the strong tag tells the reader to say it extra forcefully. My headers, three and four, right here, indicate a hierarchy to this text. It can be useful for people reading, but it’s really useful for Google to understand what’s going on with your text, and it also is useful for screen readers. Something important to note is that not all browsers render HTML the same way. Even right here within this browser which is Chrome, this is a header size four, and it looks the same as paragraph text. But if we go back to the actual post, you’ll note that it’s a lot bigger than the paragraph text. Also important to remember is that not all browsers show things the same way. So you can’t count on HTML to make this larger and bold. You’re simply using HTML to describe it as a header size three and then the browser takes care of what to do with that. In some cases it makes it larger and bold, but in other cases it doesn’t. Within this post, we have a table right here, and if we go to the text mode, you can see that it’s right here: table, table body, table row, et cetera. And down below the table we have an image. And in the html the image looks like this: it starts with img, then there’s a class, which we’ll talk about in another video, and then there’s the source tag, which tells us where the image is on the internet. We have an alt tag for screen readers, and we have a width and height tag, so that the browser knows ahead of time how big this image is going to be. You probably won’t need to use this text tab very often, but learning a little bit about how HTML works can save you a lot of time sometime in the future. When the wysiwyg editor isn’t behaving like it should, you can click the text tab and see what’s going on. Maybe you really want this colon to be inside the strong tags, but your mouse didn’t want to highlight it right. But there you are, now it’s inside. Now we can update, and we’ll come out here, and I haven’t reloaded yet, so the colon is still outside the strong, but if I reload now you’ll see that it just got a little bit bolder. Let’s review what we’ve learned so far: HTML stands for hypertext markup language, and that means that it’s a language intended to mark up normal English into hypertext, and originally hypertext simply meant that you could click it, but now it means all sorts of things, like declaring headers and tables and images. HTML describes the purpose of text. Then, it’s up to the web browser to know what to do with that text. If you’d like to learn more about WordPress, check out WinningWP.com.
Anything to add?
