Let´s learn HTML, the structure of the Web

HTML is the language that gives structure to the web. It stands for HyperText Markup Language. HTML has a special notation and a lot of tags we will be using. Some of them are very useful to remember and for the others, that every one of us always forgets, I have a best friend that can help you with that. Google.

If you want to become a developer Google has to be your best friend, don´t even question it, embrace it, and don´t feel bad about it. At first, I recall I didn´t even know how to properly search for issues when I needed answers, but you learn about it. What worries me is when I see people struggle because they feel like they cheat if they use Google for solving an issue and that they should remember that, WRONG. Every developer from junior to the most senior of the seniors use google. Of course, experience and practice come in handy and you shouldn´t be looking for EVERYTHING on google because that would make your development process very slow, but it’s fine to search for solutions to particular problems and some tags and things like that until you learn them. “Nobody is born knowing, everyone was once a beginner”.

google is your friend

Side Note: When I say google you can replace that with your favorite search engine, it just happens that Google is the most popular of them and I happen to use it so I will use it as my search engine in this and all the articles, but feel free to use bing or duckduckgo or whatever you prefer.

OK, let’s start with some basic ideas and your first tags. Most tags in HTML will require to be opened and closed. We write tags enclosed with the less than and greater than signs (<>). So for example our HTML page will have and HTML tag enclosing everything like this:

<html>
</html>

Great, that´s your first tag, hurray 🎉. Now we will learn 2 more tags that will be used on every website. The first one is head. Head tag is used to add meta-data (data about the data), basically, we use this set things like the title of our page, link our stylesheets and scripts, etc. And the second one is the tag body. Body is the main container of our whole website, every tag that structures our site should be inside this tag. Note that both head and body are unique, you cannot have 2 of them in your HTML document. So if we put this together our HTML would look like this:

<html>
	<head>
		<!-- Write your metadata here -->
	</head>
	<body>
		<!-- All your website tags here -->
	</body>
</html>

That´s very good, this starts to look like a boilerplate code for every HTML page we want to create. Something new I added there is a comment tag. To write comments (they will be ignored by the browser, they are there just to help you and other developers who read the document) you have to use that syntax <!– YOUR COMMENT HERE –>.

We are missing 3 more tags and then we will have our starter HTML ready to build on our site structure. Something we missed before the HTML tag (on purpose) is to declare that the document the browser is going to read is indeed an HTML document. And we do that with the tag <!DOCTYPE html> which is self-enclosing (does not need a closing pair tag). Then we will need the tag meta, which will be used to define the meta-data we talked about before. And as you can imagine it will go inside the head tag. And lastly, we will need the title tag which will also go inside the head. Adding all those tags will result in this:

HTML boilerplate tags.

Well, almost. This has a couple of extra Atributes that we haven´t talked about yet, but the tags are all the ones we just went through. Attributes define extra characteristics of the tag, they are like properties. So for example our HTML tag has a lang (for language) attribute that we set to “en” for English. This is read by both search engines and screen readers. So It makes your site more accessible which is very important and we will cover more later on and also helps make your site more discoverable. Same for the charset, it defines the way the document is encoded (we are not going to go into details of this, you can search it elsewhere if you are curious).

You can see this is an image and looks different from the block above. That’s because I took this from my Visual Studio Code window. And that´s where I do most of my website work. Sometimes for smaller things you can use codepen or other online sites. That´s why in the next two articles we will cover how to use CodePen and installation and configuration of Visual Studio Code.

VSCode and Codepen trademark images.

Keep in mind you can write your HTML with whatever editor you want, you can use Notepad even if you want (I wouldn´t recommend it, but you can haha). You can use Notepad++, atom, vim, sublime, etc. It doesn´t matter, in the end the editor just help you feel comfortable writing code and whatever helps you do it better it is fine. So feel free to search for your favourite text editor or if you don´t know any of these I recommend using Visual Studio Code and CodePen for online shorter stuff.

Click on the image above so you don’t miss out on future content.