Hey readers, the title of this article is not click-bait, you can actually start learning HTML and get into CSS within a few hours even without knowing the fundamentals of it. This article here precisely tells you HOW TO DO THAT!
In this modern tech-focused world, there are many UI frameworks preferred while building any web-based application, but every single webpage on the internet is just HTML at its core. After reading this article to completion, you should be able to:
- Structure a website with basic elements of HTML.
- Apply basic formatting and learn separation of content in a webpage.
- Bring a webpage to life using different images and tables.
In a rush? Watch this video to learn the basics of HTML in 5 minutes!
1. What is HTML?
Hypertext Markup Language or HTML has become one of the core technologies that power every single website on the internet. HTML was first created by Tim Berners-Lee, Robert Cailliau in the year 1989. While there’s an age-old debate on whether HTML is a programming language or not, it is very important to note that every webpage that you create will have at least a part of HTML involved.
In my opinion, Markup languages are nothing but a simplified programming language consisting of easily understood keywords and tags, used to format the overall view of the page and its contents. If you are just starting off in web development, note that HTML is most commonly used with CSS (Cascading Style Sheets) for styling and JavaScript for added interactivity.
Image credits: freecodecamp.org
2. Structure of Tags
A Markup Language allows computers to speak to each other and controls how text is processed and presented. To do this HTML uses two things- tags and attributes.
a. Tag Names
In simple language, a tag is any piece of information that describes the data or content that it is assigned to. Tags can be used to display bookmarks, digital images, videos, files, and so on, represented within closed brackets . Most tags must be opened <p> and closed </p> in order to function.
Close what you open!
In any programming language, it is important that you use the syntax and structure your code appropriately. Each web browser has its own built-in code/rules, that govern how it will behave. You will find some browsers that will make a correct guess when it detects something like the missing closing tag in your example, but you can not rely on all browsers reacting the same way.
Therefore in the absence of closing tags, some browsers might think that all your other tags are a part of the same element, this can result in an unfavorable output. It is always a good practice to close all the tags in use.
The latest version of HTML, ie., HTML5 currently does not allow the use of self-closing tags.
But, there are some tags that are classified as self-closing tags which make use of a “/” character in order to effectively close out a beginning tag. To put it simply, there are a few tags that don't require closing tags and they can end within a starting tag only or survive without any! For example, <img> used to embed an image, is a self-closing tag.
b. Attributes
In an HTML element, the tag name is followed by an attribute that has a certain value. Most tags have a set of predefined attributes and are technically semantic. An HTML attribute is a way to provide additional information about the tag it's attached to. Think of attributes as a way to further customize the meaning and/or behavior of the tag. Each attribute has its own rules for the meaning of its value.
For example, look at the above image, the value of the src attribute has to be unique in the entire HTML document which is used to provide the path of the image.
Below is a visual representation of an HTML element with an open tag (start tag) followed by the name and attribute, and a close tag (end tag) showing a forward slash and open tag name. To know more about each of these HTML tags, stay tuned for a Bonus at the end of the article.
If you look at the HTML markup for any webpage today, you will see HTML elements contained within other HTML elements. These elements that are "inside" of other elements are known as nested elements, and they are essential to building any webpage today. Think of HTML tags as boxes that hold your content. Your content can include text, images, and related media. Sometimes, you need to places boxes inside of other boxes. Those "inner" boxes are nested inside of others. Let's learn with an example.
Anatomy of an HTML document:
- The
<html>element is the root element and it defines the whole HTML document and the whole code is nested in<html></html>. Therefore every other tag is the child element of<html>. - The
<head>element is a container for metadata and is always placed between the<html>and<body>tags. -
<title>sets the title of your page, which is the title that appears in the browser tab when the page is loaded. It is also used to describe the page when you bookmark it or mark it as favorite. - The
<body>represents or defines the document's entire body - The
<main>tag specifies the main content of a document and is unique to the document. It shouldn't contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. -
<h1>to<h6>define the heading and<p>defines a paragraph.
<!DOCTYPE html>
<html>
<head>
<title>First Project<title>
</head>
<body>
<h1>My First Heading</h1>
<main>
<p>My first paragraph.</p>
</main>
</body>
</html>
3. Semantic HTML
As a programmer, you could be reading through hundreds or thousands of lines of code. The easier it is to read and understand any programmed document, the easier it makes your job. Semantic HTML precisely does that for you. Semantic HTML elements provide meaning to your document rather than just a presentation.
According to Dictionary.com semantics refers to the correct interpretation of the meaning of a word or sentence.
Some Semantic HTML practices:
- Semantic markup requires that HTML elements be used according to their intended purpose.
- Semantic markup requires the separation of content and presentation.
Some tips and Bonus document
I have created a list of some commonly used HTML tags you can refer to.
You can use it to:
- Read about the most commonly used HTML tags
- Read the complete documentation of each and every tag mentioned
- Fork and use this project to learn
- experiment with different styling and optimizations
I recommend beginners to first start their projects on Codesandbox. Sandbox environments are websites designed to allow you to write and immediately run small pieces of code. This is a great learning tool for beginners and an excellent debugging tool for experts.
Please ‘fork’ the original sandbox so you can save your work! For any feedback or mentoring, you can share your project link with us in our Discord Community :
Following a huge demand, we're hosting a Live tutoring session on learning HTML this week. Signup using this form so that you don't miss out on the event. Links will be only shared if you fill the form, so sign up right away!
Link to Google Form
Summary (TLDR)
- Most HTML tags have an opening and closing tag, but not all
- Tags that don’t have a closing tag are not allowed to wrap content
- Self-closing tags (e.g.,
< />) are not allowed in modern HTML - If a tag has a
</>closing tag, always use it, even when it’s technically optional - Attributes are name-value pairs that provide us with some additional information about the tag
- To structure your code precisely practice Semantic HTML
Comment below your experience developing your first website. Don’t forget to show us some ❤ if you found this article helpful.
Let’s connect! I’d love to hear your feedback or questions.
Here are the links to my opensource projects:)
Google webpage recreation (without CSS)
Top comments (2)
It amuses me that the freecodecamp diagram doesn't contain a single link, since the original idea of "hypertext", as distinct from "text" was the free linking together of documents.
Excellent article! Very well written :D