Introduction
When I started learning HTML, that was back then at the university. For some reason we spent the entire semester only talking about it, and even with all that time, it was still hard for me to remember the information, and the way we were taught just made me think that maybe web development wasn't for me. Now I'm glad that I still did give it a serious shot and didn't listen to my dark thoughts. My goal today is to give you some basics of html. This is my first post for a long journey, I will try to teach you what I know in the most simplest way. There are absolutely no pre-requisite required, I will try to explain things in a way that anyone can understand!
Why learn HTML?
HTML stands for "HyperText Markup Language", it is not a programming language but a markup one instead, in programming there is logic, there are operations, in HTML you don't have these. An important question you want to ask yourself before to start learning something is: "why should I learn it?", you also want to make sure that it matches your goals and priorities. Now, if you would like to become a web developer, you need to know that HTML is the skeleton of any web page; having a solid grasp of its core concepts will not only help you to become a web developer, but it will also distinguish you from the less good ones who write it arbitrarily.
Basic structure of HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
Your content here
</body>
</html>
Any HTML file would necessarly have this structure, and each element here has an important role:
- The DOCTYPE: I think that just its name gives us a hint about what it does (another hint: document type). This element tells to the browser that it is looking at the document of the specified type, in this case, the document type is html. Always put it at the top of your html file
- The html element: your real HTML code starts there. That's the root of your document, and I'm intentionally using the word root because, if you noticed, the structure looks exactly as a family tree, you have the ancestors, the one that has everything wrapped inside of it, and then parents and children,... And each family member has also its own family, just like us! Almost all html elements have an opening tag and a closing tag, and between them is the content of that element. You can also picture it as the russian dolls called Matryoshka, the only difference is that each doll in our html can have many other dolls at the same level, as much as we need!
- The head element: the html head element is where you put your meta data which are information concerning your page, for example the author, the description of the content, etc. For your SEO strategy, knowing what to include in the head element is crucial so that your page will be more visible. For now let's not over complicate it and just keep in mind that anything that is inside the head element won't be displayed in your page, but still will be used for different purposes.
- The charset meta tag: here you are setting the character encoding, there are different encodings (ASCII, ISO, utf-8, ...), but I've never seen so far another character encoding used other than utf-8 in web pages, still you can use whatever suits you!
- The viewport meta tag: you should include the viewport meta tag in all your html files, it allows the browser to control the page dimension and the way it scales. The initial-scale=1.0 means that the zoom level is set to one, and the width=device-width means that the width of the page is equal to the width of the user's screen. If you don't use it the page won't be displayed correctly.
- The title element: we use it to display the name of your page, simple as that! The titles you see on your tab are embedded inside that element.
- The body element: This is were you are going to put all the content that will be displayed in your page!
Some HTML elements
With that basic structure discussed above, the only thing you'll have is an empty page with a title in your tab, and chances are that you are more interessted in knowing how to make a real page with content in it. Anything you see in your page is inside the body element. But your content need to be formatted, it needs to have a structure, you don't want to throw your text or whatever directly okay? The first reason is that it's the only way for the browser to know the type of content you have, if it's a title, or a paragraph or an image... The second reason is that if you structure it nicely you'll have less trouble to style it, to add specific background to a part of your content, or something like that. Thankfully html has it all! That way your content will be both human and machine readable!
Types of HTML elements
We have just two types: standards elements, and empty elements.
- A standard element is an element that has an opening tag, a closing tag, and content in between. A standard element can also have many elements inside and in this case we will have what we call a nested element.
- An empty element has only a tag and the content is a value of an attribute.
Today I will show you elements that you can use as "containers", and elements that wrap your text, images, titles, etc!
The big containers
The header
Let's say that at the top of your page you have a menu and a logo, these are generally contained inside a header!
<header>Something</header>
nav
You use it to wrap your navigation, and it is generally inside your header element.
<nav>Your navigation here</nav>
section
You'll have for example a section for the introduction, one for the main content, a section for the contact information, you name it.
<section>Content of the section</section>
article
You want to include a magazine or a newspaper article? Simply use the article tag! Another cool thing is that if you have a list of articles, each one will be contained separately! Besides, you can find sections that have articles and vice versa.
<article>My article</article>
aside
If you have some information that is indirectly related to your main information you can use the aside tag to do that. In my copybook I put some aside information in the margin, the aside tag can be used in the same way!
<aside>My side information</aside>
footer
Most of web pages have a footer at the end where they put their copy right, some article links, etc. Use the footer tag to create a footer (oki)!
<footer>© Hildweig, 2021</footer>
Headings, paragraphs, lists, links, and images
To not make this post too long, I will just give you a general idea about what you can find inside of the previous containers.
You'll have:
- Titles: in HTML there are six tags just for headings so that we can semantically represent the importance and level of each of our headings. THe most important heading in your section will be h1 (heading 1), if you have a subtitle use h2, and so on. In your browser their size is also different, h1 is displayed very big, h2 less bigger, and the smallest is h6, but please avoid using a heading just for its size, instead you can resize them using css which is specially created for styling HTML elements, and avoid skipping heading levels, start with h1, then h2, and so on ^^.
- Paragraphs: Use the
tag to display your paragraphs!
<p>The journey of a thousand miles begins with one step.</p>
- Lists: In HTML, there are two types of lists: ordered lists, and unordered ones. A common use case for the unordered list is to be the container of your navigation elements, something like that:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
Both types of lists have li tags that refer to the element itself. Now say I want to display a recipe, or the top movies of 2020? Ordered lists are best for this task. And the only difference is that instead of using ul (for unordered list) we use ol (ordered list) and it has numbers.
- Links: What kind of page doesn't have links? To display links you use the a tag, but why a and not l for link? Well, here they use the a for "anchor". Here is the simplest way to add a url to your page:
<a href="https://www.facebook.com/HildweigDev/">More here</a>
You have your a starting tag, then a key value pair thingie, this is what we call an attribute; attributes provide additional information to your element and come as key value pairs, the href here means hyperlink , and its value is your url, what will be shown in your page is text in between, and clicking on it will send you to the page!
- Lastly, you want to have some beautiful images otherwise it's boring... For that you can use the img empty element. Okay finaly an empty element ^^'. So as I said before, empty elements have only one tag and the content is actually a value of an attribute. Check the html here: The src stands for "source", so there you'll add the link or path to your image. The alt attribute is optional, however I strongly think that you should add it. In case there is an issue and the image doesn't show up, the alt value (the text) will be displayed instead of the image. In addition, the alt provides a better context to search engine crawlers, helping them to index an image properly. I don't want to you to be lazy, so make sure to include it okay?
Thank you
If you read this post to the end, I want you to pat yourself on the back and be proud of your discipline. Becoming a web developer requires patience, discipline and curiosity. Big goals are achieved with small daily achievements. If you liked it please like and share your thoughts with me so that I can provide better educative content.
Top comments (0)