ColorCode

Every... HTML page is made up of these things called elements, or tags or nodes. They’re all referring to the same thing. Pretty much.

These are building blocks that you put together to create an HTML page. That simple. They’re like bricks you put on top of each other to build a wall. But don’t... build a wall, because that’s stupid.

Look at any page on the internet. You start to notice clear separations between different pieces of a page. Chances are those are built using separate HTML elements.

There are a lot of different kinds of elements.

So the first one I want show you is the Paragraph tag. The <p> tag. It’s used as a building block to create a paragraph.

All elements are created the same way.

<p></p>

You do a left arrow and then a right arrow and put your tag name in between. In this case p. This is called your opening tag. <p>. You also need a closing tag which is exactly the same as the opening tag with an extra slash. Like this </p>. So you end up with an opening tag, and a closing tag. Anything you put between these becomes a paragraph. Becomes the thing that the browser will actually show to the end user.

<p>This text will be rendered as a paragraph! Yay.</p>

So the same way we added text inside your element, you can also include elements inside other elements but we’ll get to that later.

So a couple of things:

Do not forget to close your tags. When you open it, you close it. Needless to say, when you open it using p you need to close it using p as well. So the opening and closing need to match.

Also, the tag name is not case sensitive, which means it can be P or p, but no one really does uppercase so try to be consistent, keep it to lowercase.

These are some of the tags that are available to you:

• <p> : Paragraph
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Heading (big to small)
• <a> : Anchor tags for links from page to page
• <button> : Clickable Button
• <ul> : Unordered List
• <ol> : Ordered List
• <li> : List Item
• <img> : Image
• <Video> : Video
• <Audio> : Audio
• <div> & <span> : Containers that can hold other elements
• <Header> : Page Header
• <Footer> : Page Footer
• <nav> : Navigation Bar
• <script> : Link to load JavaScript
• <link> : Link to an external file like CSS files
• <style> : Define the Styles of your page

These are just some of them. There are even more and I will walk you through some of them. But that’s pretty much what HTML tags are. I think we’re getting somewhere. Stick around, it's only starting to get interesting...