2.5 Common HTML Elements
When you’re getting started in web design you only need to be familiar with a handful of HTML elements in order to make great sites. In this lesson you’ll learn the bread and butter of web design: the most common HTML elements.
1.Introduction1 lesson, 00:56
2.Learn Basic HTML6 lessons, 44:21
3.Conclusion1 lesson, 02:47
2.5 Common HTML Elements
Hey welcome back to start here learn HTML basics. Now so far you've learned that websites are made up of a bunch of different HTML elements that you piece together. And you've also seen that there are quite a few of these HTML elements that you can choose from. However, in practice you'll only find that there are a handful of these elements that you'll use in pretty much every project. You will use lots of smaller use case elements but for the most part If you're familiar with these most common elements you'll be pretty well equipped to make all kinds of websites. And we're gonna go through what these common HTML elements are in this lesson. I'm gonna keep this pretty quick because in the lesson after this you're actually gonna go through and code up a web page with the elements that will be talking about here. And it's always easy to wrap your head around something by actually doing it yourself. But I just wanna give you a quick overview so when we move into coding you'll already be a little bit familiar with the elements that you're working with. And so that you have this here as a reference to these elements that you should get to know before all of the other elements. Now you remember earlier that I said the three main categories of element that you're going to want to start looking into are elements for metadata, content and structure. Now that's true, but there is also an extra type of element that you'll use in every single project that you create. And I like to think of those elements as the essential elements. Without these elements, a web page just won't work. These four elements have to be included in every single web page that you make. So first up we have the doctype which tells the browser what type of HTML you're writing. We have the HTML element and all of the rest of the code that you write is gonna be nested inside this HTML element. So the HTML element holds all of your HTML. Then inside your HTML element you have two sections. You have the head section and the head section holds all of your metadata. Then you have the body section and the body section holds all of your structure and content elements. Now as I said don't worry too much about trying to memorize everything that I'm telling you here or understand it too deeply because we'll move on to using these practically in the next lesson. Now with your metadata that is included in the head section gonna be working with these three elements primarily. You have the tittle well, you set the title for the web page and that will appear in the tab that your web page is being viewed through. You have the meta element which allows you to provide all kinds of extra information about your web page. And then you have the link element which allows you to create links between this document and other types of documents like CSS stylesheets, for example. For a structure, you primarily work with the six elements. You have the head element which is typically where you'll find some type of heading tells you what the whole page is about and possibly some menu items. You have the footer element which will generally include things like copyright message or some information about the creators of the website or the owners of the website. You have the main element, which lets you indicate which portion of your HTML is the main content of the site. You have the section element which allows you to organize your content into discrete little packets. The side element basically lets you attach information that is relevant to a certain part of your content but rather than being contained in the content itself is more logically placed as an extra attachment. And then you have the div element which is essentially just a generic organizational element. And because it is generic you typically only use it when you need to control layout or you need to control the styling of a section of your site. And then finally for content elements, we have our heading tags and there are six different types of heading tags. You have h1, h2, h3, h4, h5, and h6 and typically the h1 tag would give you the largest size heading and the h6 tag will give you the smallest size heading. But on top of just how the headings look in h1 heading the main heading for a certain section in your site. Then the h2 heading will be a subheading below that. The age three will be a subheading below that again. And so on all the way through to age six, and then we have the p tag which allows you to create paragraphs of text. We have the image or img tag which allows you to embed images into your pages. We have the unordered list or ul tag which used to create bullet lists. The ol or ordered list tag which lets you create numbered lists and then you have the li or a list item tag they used to create list items with in either unordered or ordered list. So as you start to practice writing HTML, keep coming back to this list of elements and practicing different ways that you can work with them. And this will give your a really excellent foundation that will give you a lot of different things that you can create and then you can build on these elements by learning extra elements when you're ready. All right, so now we're ready to start putting this into action. In the next lesson, you're going to hand code a complete HTML page From scratch. We're gonna take everything that you've learned so far. We gonna take all of these elements that we've just gone through and begin to cut up an HTML page all the way from the beginning. So we'll see in the next lesson.