What is HTML

What is HTML 

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. The hypertext refers to the fact that HTML makes it so that you can click on links in webpages. 

That's the hypertext the words, Markup Language just means that it's something that you use to markup normal English to indicate things. Let me show you what I mean. This is a normal web page in WordPress, and the entire page uses HTML to tell the browser what to do with all of this text. Some of it is more important than others. Some of it is in tables, some of it is images. And on any web page, 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 wiziwig. 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. 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. 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 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, etc. And down below the table, we have an image 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 you 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 What's inside. Now we can update.

We'll come out here.

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 winning wp.com