Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:8Length:48 minutes
  • Overview
  • Transcript

2.2 HTML Elements

HTML elements are the building blocks of websites. In this lesson you’ll learn what they are, how they come together to make up web pages, and what different types of HTML elements are available to us as designers.

Related Links

2.2 HTML Elements

Hey,welcome back to start here learn HTML basics. In the last lesson we went through what HTML actually is. And in this lesson, we're gonna go through the most essential building blocks of HTML and that is HTML elements. Every website is made up of a series of HTML elements and there are all different kinds of HTML elements. As you go through learning web design, one of the most useful tools that you have at your disposal is the inspector in either Chrome or Firefox. So we're gonna use that to have a look at some of the elements that make up tutsplus.com So right here we have a hinting element and let's take a closer look at that element. So right click it and choose inspect and then our Chrome web developer tools open up and right here You can see that this is our heading element, and as you go through all of this code, there are multiple different types of elements. And you can tell what type of element something is by looking at the word or just the characters that are immediately after this less then sign here. And we're gonna go into the structure of this code that you're looking at a little bit more closely in the next lesson. So don't worry if you don't understand this completely just yet. But looking through this code here, if we just highlight these first words. What you can see in these window are div elements, an image element, an h1 element, a paragraph element A main element, a footer element, and a script element. So just look for that first word and that will tell you what type of element you're looking at. So let's have a look at another one. Right here we have an image element. So we'll inspect that. And you can see here we have this little segment of code. And that is our image element. Now, let's go into this tutorial. Now, if we have a look here, here is another element. This is a paragraph element. So I'm going to grab the selector here to take a close look at it. And then if we have a look in our card. We can see at paragraph element. So all websites a built up of these discrete little chunks of content. So as you start to learn HTML, you'll want to start familiarizing yourself with the most commonly used types of elements. And there are quite a lot of elements. But to begin with, you only need to know about a fraction of them. For your purposes at this stage, there's really only three different categories of elements that you need to think about. One is the elements that allow you to put content onto your page, things like our paragraph element here, that allows you to put a paragraph of text on a page, or our here a heading element, to allow you to put a heading on the page or over hear, An image element, so that you can put in image on to the page. And then to organize all of your content related elements, you also need structure elements. You need to be able to group up different sets of content. Into areas on a page so that you can lay them out and also say that when search engines come to your site, they know which parts of your site are the main content and which parts are extra bits and pieces like headers and side bars. So for example, if we select the main area of our content in this page You can see here we have a main element. So that's helping to organize all of this content. And then right down at the bottom, we've got our footer. And you can see here, this is our footer element. So those are a couple of examples of structuring elements that you can use to organize all of your content elements. And then the third main category of element that you going to want to know about as you're getting started, Document Meta Data Elements. And these are elements that provide extra information about overall Now one example of this is the title element. Now up here in the tab of our browser window you can see that we have a page title, JavaScript ES6 Fundamentals, Envato Tuts+ Course. And that title isn't anywhere on the visible page here. It doesn't come from any of the content elements that we had looked through and it also doesn't come from any of the structure elements. So where does it come from? It comes from the title element. Now I'll show you the title element in the code. And right here This is our title and then you can see above and below it. There are quite a few other elements that are also providing metadata for the document. So it's got several link elements and these are used to link in external resources like CSS stylesheets or in the case of the link element that we're looking at hear, this loads in the favicon. That shows up in our tab here. And then we've also got elements like the meta element. And that can be used for all different kinds of things like giving instructions to my board devices on how things should be displayed. Or helping you integrate Google Analytics like the element that we're looking at here. So once again don't worry too much about the envatotuts detail of all of these elements that we've just gone through because we're going to go into things more closely in the next couple of lessons. The main thing that I want you to remember out of this is these three different types of elements. You've got your content elements for helping you put text, image and videos onto a page. You've got your structure elements, they're helping you group and organize those content elements. And then you've got your document metadata, which is a bunch of stuff that is not visible in the main body of your website. But it helps to provide extra information about your site and add some extra functionality. So now that you know what HTML elements are, the building blocks that make up websites. You're ready to learn how to create HTML elements and the way that you create HTML elements is with tags. So in the next lesson, you're going to learn about what HTML tags are. How to use them. And the difference between opening tags, closing tags, and void tags. So I'll see you in the next lesson.

Back to the top