In my first post about HTML, I went through the absolute basics in order to get you up and running to write some basic HTML of your own. We discussed what HTML stands for and how it’s used, what HTML elements are and we went through the use of the HTML boilerplate, comments and tags. Now, it’s time to round of the basics so that we’re ready to move on to more advanced topics next time.
What are we going through next?
In this post, I explain Divs, Spans and HTML attributes. These topics, together with everything I went through in my previous post, round off the basics of HTML nicely and should ensure that you have a good grasp of using it to design and properly format very simple HTML documents.
Divs & Spans
First up is the HTML Document Division Element, better known as the div element. The div element is a generic container. Not sure what that means? Don’t worry, I wasn’t the first time I heard about it either. In simple terms, it’s a container that encapsulates other elements and divides the HTML documents into sections. For example, if you have an HTML form, which we’ll talk about in the my next post, and want to separate it from other elements in your document, you can surround it with the <div> tag.
If you feel you understand what a <div> tag is, you’ll probably have an easy time understanding a <span> tag. Just like a <div> tag, a <span> tag is a generic container. The difference is that a span element is in-line. This means that it’s usually used inside a line of HTML, instead of surrounding a whole block of code like a div element. An example of where a span element is often used is inside of a paragraph element.
Attributes are some of the most important things to learn when it comes to HTML. All elements in HTML can have attributes. Attributes are additional values that either configure an element, or adjust its behavior. This can be in a lot of different ways, so naturally, I have the perfect resource for you to check out when trying out some of the new stuff you learn after you’ve gone through this entire post: the HTML attribute reference.
Let’s see how an attribute works. Say you have an unordered list (if you don’t know what it is just yet, try a search on MDN) of your favorite products on Amazon. In HTML, you can’t simply paste a URL, because while it may be visible when your viewing your document in your browser, you won’t be able to click it. You would have to copy and paste that link into your address bar. That’s an inconvenience that can easily be avoided. Take a look at the following piece of HTML where we create a simple list:
You want to link each of the items in the list to a specific product page. If you are a beginner, then you probably don’t know how to go about doing that. No worries! A search on MDN tells us that you need to use the href attribute to link some text to another page. It even gives an example! Be sure to find the page on MDN that describes the href attribute to learn about it.
With the statement above in mind, try to implement the href attribute and see if you can make it work. If you can’t figure it out, feel free to comment and I’ll be sure to help you. If you just want the solution, check out this CodePen. While you’re at it, why don’t you try adding some Divs and Spans and see what happens!
Now that we have gone through most of the basics, it’s time for you to master them! The best way to do so is by practicing and trying out some of the most used elements and attributes. A good exercise is drawing out a simple page on a piece of paper, then trying to actually recreate it using what you have learned up until now.
Be sure to let me know how it goes! Also, if you have any questions, concerns or tips, shout out in the comments below!