# Getting Started with HTML Tags and Elements ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1769952007082/f235682e-f619-4e59-9325-0cfa6154b29e.png align="center") In general term HTML is a language for website creation , and generally referred a the foundation of the web. It is generally used for the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes. Before the visuals wow us and the interactions amaze us, every great website starts with a script **HTML**. **HTML** doesn’t make pages pretty, it makes them readable, just like a book’s structure. You are able to read this because of html. Lets deep dive into and learn what HTML is and how its work. ## HTML Document Structure The above code shows the basic boilerplate code for the HTML. `` - This declaration notify the browser about the document type and version of HTML used, ensuring proper rendering and preventing potential issues. `` - This element act as a wrapper holding the entire page and is sometimes known as the base element. It includes the `lang` attribute, setting the primary language of the document. `` - This element holds the document’s metadata and configuration data rather than user-facing content. It contains SEO-related information, stylesheet references, character set definitions, and other resources required for proper page rendering. `` -This element specifies UTF-8 as the document’s character encoding, enabling broad multilingual character support and reducing the risk of text-rendering problems. `` - This viewport element tells the browser to match the page width to the device’s screen width, preventing mobile browsers from displaying the page at a larger width and scaling it down `` - This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it. `` - This contains *all* the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else. # HTML — The Skeleton of a Webpage Think of a website like a human body: * **HTML** → Skeleton (structure) * CSS → Skin (style) * JavaScript → Muscles (behavior) HTML does not make a page beautiful — it gives it **structure and meaning**. # What is an HTML Tag? An **HTML tag** is a keyword enclosed in angle brackets `< >`. Example: ```plaintext

This is a paragraph tag

``` You can think of a tag like a **label on a box**. It tells the browser what kind of content is inside. For example: * `

` → This is a paragraph * `

` → This is a main heading * `
` → This is a container * `` → This is a small inline container # Opening Tag, Closing Tag, and Content Most HTML tags which we use come in pairs: ```plaintext
This is a paragraph
``` ```plaintext
→ Opening tag This is a paragraph → Content
→ Closing tag ``` The closing tag has a forward slash /. ### Box Analogy Think of it like a box: ```plaintext Opening Tag → box with open lids Content → content inside the box Closing Tag → closed box ``` --- # What is an HTML Element? An HTML element is everything together: ```plaintext Opening Tag + Content + Closing Tag ``` Example: ```plaintext
Welcome
``` Here: * `
` → Tag * `Welcome` → Content * `
` → Closing tag * Entire thing → Element ### 🔎 Difference Between Tag and Element | Term | Meaning | | --- | --- | | Tag | Just the label (`
`) | | Element | Full structure (`
Hello
`) | # Self-Closing (Void) Elements Some HTML elements do not need a closing tag. Example: ```plaintext

``` These are called void elements. Why? Because they do not wrap content. Examples: * <img> → Displays an image * <br> → Line break * <hr> → Horizontal line # Block-Level vs Inline Elements ## Block-Level Elements A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. Example: ```plaintext
Heading

Paragraph text

Container
``` ### Visual Idea: ```plaintext [Heading ] [Paragraph ] [Another Section ] ``` Each appears on a new line. ## Inline Elements Inline elements in HTML are elements that do not start on a new line and only take up as much width as necessary to display their content. Example: ```plaintext Hello World ``` ### Visual Idea: ```plaintext Hello World ``` # Commonly Used HTML Tags (Beginner Level) ### Headings ```plaintext
Main Heading

Subheading
``` ### Paragraph ```plaintext
This is a paragraph.
``` ### Division (Container) ```plaintext
This is a section
``` ### Span (Inline container) ```plaintext Inline text ``` ### Link ```plaintext Visit Website ``` ### Image ```plaintext ``` # Simple Mini Example ```plaintext My Title //title of the Webpage
Welcome

This is my first website.
```