Have you ever wondered about the colourful, fancy, creative websites you thoughtlessly scroll through almost daily? How they are made? Let’s dive into this by learning the basics of it first.
Websites are built using three core technologies:
HTML (Structure)
CSS (Style/Design)
JavaScript (Interactivity)
HTML: The Skeleton of Websites
HTML is the fundamental building block of web pages. Think of it like the human skeleton:
Provides basic structure and framework
Defines content placement and organization
Creates the foundational blueprint for web pages
But how does it work?
Let’s look into this code for a while.
What do you see here?
Well, if you aren’t familiar with or are a newbie in the coding world, this is HTML code. Yes, HTML is a language. But unless C, C++, this is not a programming language, but a markup language.
HTML which stands for HyperText Markup Language. This language is specifically focused on structuring content. That’s why it’s like the skeleton of a website, as it provides structure to it. It doesn’t perform computations or logical operations.
Now, let’s look again into the code to dig deep into the concepts of tags & elements.
Tags vs. Elements
<HTML>, <head>, <title> etc. What do you think looking on to them?
These are all the tags. A tag is a building block of HTML. They are enclosed in angular brackets (<>).
They usually come in pairs: opening tag (eg. <body>) and closing tag (eg. </body>). And the content goes between them.
<p>This is my first webpage! </p>
Now, this as a whole is called an element. An element is a combination of the opening tag (<p>), closing tag (</p>) and the text between them.
Here, <p> is the opening tag, </p> is the closing tag, and the text "This is my first webpage!" is the content, making it a complete element.
Chalo, let’s learn about Key HTML tags and their usages.
Key HTML tags and their usages
Structural Tags:
<!DOCTYPE html>: Declares the document type as HTML5<html>: Root element of an HTML page and signals the beginning and end of an HTML document.<head>: Contains metadata about the document.<body>: Contains all visible content of the webpage like text, images, links and other displayable items.
Content Organization Tags:
<div>: Block-level container for grouping content.<span>: Inline container for text or small content elements.
Heading and Text Tags:
Heading Tags
<h1>to<h6>: Represent different levels of headings with<h1>as the most important heading and<h6>as the least important heading.Paragraph Tags
<p>: defines paragraphs.
Hyperlink and Navigation Tags:
<a>: Anchor tag for hyperlinks.<nav>: Defines a section of navigation links.
List Tags:
<ul>(Unordered List): Creates a bulleted list<ol>(Ordered List): Creates a numbered list<li>(List Items): Defines individual list items and used within<ul>or<ol>tags.
Likewise, there are various other tags to study. I’ll be attaching the source to read more.
Conclusion
HTML is the foundational language of web development, acting as the skeleton that structures digital content. These simple yet powerful tags transform raw information into meaningful, organized web pages.
Key Insights:
HTML provides the basic structure for websites
Tags define how content is displayed and organized
Understanding HTML is the first step in web development
Remember, every great website begins with a solid HTML foundation. Start learning, experimenting, and creating your digital world!