002 – Basic Tags – HTML/CSS Tutorial
HTML5 has many different tags that serve different purposes. In this episode, we are going to cover some of the basic ones that you will come across.
Header tags <h1>
Let’s start with the header tags. There are 6 header tags you can use, h1, h2, h3, h4, h5 and h6. The lower the number, the higher the importance and by default it will be larger in size. Just like most tags these tags have both an opening and closing tag.
Paragraph tags <p>
Next, we may want to add a paragraph of text to our website because otherwise, it may be a little boring!. In order to do this, we can use the “p” tag.
If you add that after your header tags you should see this.
One thing you will notice when writing HTML is that adding line breaks in the raw HTML code won’t translate to what is rendered on the screen. Everything is executed one after the other regardless of how much space you put between them in the editor.
Adding links is slightly more complicated because you need to tell your tag both what the link says and where to link to. To add a link we use what is called an anchor tag and in order to tell the tag where to link to we need to add an attribute to it called “href“. Then we can just treat it like any other tag and put the content you want to display inside the tags as seen below.
Lists are slightly different in that you require more than one tag to pull it off. You need a parent tag to contain the child list tags.
You also have 2 types of lists, unordered and ordered. Ordered lists are numbered and unordered just have bullet points by default.
The parent element for an ordered list is “<ol>” and for unordered “<ul>”.
Self closing tags
So far we have only been dealing with tags that have an opening and closing tag. However, another type of tag exists and that is the self-closing tag. The reason we have self-closing tags is for when the tag doesn’t have any content inside it. For example, an “img“ tag which refers to a source by a link or a line break “br“ tag that only serves to add a vertical break to the page.
You may see in some tutorials telling you to add a trailing “/” before the ending “>” in order to signify a self-closing tag. However, this was only necessary before HTML5 was released and is no longer something you have to worry about.
Below is a list of self-closing tags that you will come across.
Image tag <img>
The image tag is similar to the “a” in that tag we need to define a source link for the image, however the tag itself doesn’t contain any content so it can close itself like so.
As you can see we are linking to a placeholder image on a different website. We will cover hosting your own images in the next episode.
Break tag <br>
Another self-closing tag you will come across is the break tag. Unlike the image tag, the break tag doesn’t take any arguments as it’s only purpose is to break content to a new line like so.
So if you were following along then your code should resemble something like this.
In the next episode we will be looking at another important tag called the div tag and we will start to make our boring looking web page look a little more stylish with some CSS