HTML basics for absolute beginners

Unicorn Labs (🦄) — Sat, 13 Apr 2024 05:45:48 +0000

You will never succeed as a web developer without learning these HTML fundamentals

Why do you need to master HTML ?
HTML Primer
Bonus Tips
Conclusion

Why do you need to master HTML ?

HTML stands for Hyper Text Markup Language. It is the foundation Lego piece you need to get right to create any webpage.
Learning good foundations in HTML can help you in 2 key areas

SEO(Search Engine Optimization)
Accessibility

SEO

Before understanding about SEO, we need to understand what happens when you search for something in Google. Here's a great article that summarizes the whole flow. Gist is that when Google crawls the web page, it indexes and ranks them. It serves the webpage when user searches for a specific query. SEO is the process for optimizing the webpage so that it can rank higher. A great way to do this is using Semantic HTML.

Accessibility

Web is for everyone irrespective of their gender, race, caste, disability etc. It is not a place just for the elite. Making website accessible for people with disabilities is a great way to encourage more people to try out your website. Semantic HTML helps in terms of accessibility.
Now that you know about why you need HTML, lets dive into fundamentals

HTML Primer

To describe any piece of content on a webpage you need a tag.
Some of the most commonly used tags are

<h1></h1>
<h2></h2>
<h3></h3>
<div></div>
<a />
<img />
<select />
<input />
<form></form>
<body></body>
<button></button>

You can find the bigger list here
Each tag might have attributes to fine tune it to specific use cases.
An example might be You are developing a website for artists and need a color selector you would use "color" in type attribute

<input type="color" />

Here's a sample html page with some tags

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello, Everyone
</body>
</html>

Bonus Tips

While you can write text inside of div, using appropriate tag like h1/h2 is the best route of take in terms of SEO, as search engines indexes titles for keywords. Writing semantic HTML is very crucial If you want to create a website which many people want to use.

Conclusion

HTML should be seen as a structure/blue print for any webpage you visit. HTML is a way to organize the text on any webpage. If you are building a house at least in the United states you would first set up the structure of the home, and then put in the walls, paint them etc. HTML structures your webpage just like a structure helps you in building the house.

Please comment down If you want me to write any article about How search works. Please like this post If this helped you.

DEV Community: Unicorn Labs (🦄)