# Understanding HTML Tags and Elements
HTML Stands for Hyper Text Markup Language.use for creating web pages. It is describe the structure of a web page. it is consist a series of a elements.These elements are tell the browser to how to display the content.
```html
Document
This is my First Paragraph
```
Example Explanation:
1. The `` declaration defines that this document is an HTML document.
2. `` tag is a root element of an HTML Page.
3. `` Tag contain meta information about HTML Page Such as title character encoding, viewport settings,stylesheets and scripts.defer execute the external script after parsing the HTML.
4. The `` tag is one of the most impoertant element in HTML because it contains main content of webpages that user sees and interact with it .Lists ,Tables ,Containers,Semantic elements are the common elements which i write inside the body tag.
## HTML DOM Tree Structure
When we combine html elements such as `` ` ` `<body> <h1>` and `<p>` they form a tree like structure called a DOM Tree.A Tree represent the relationship between HTML elements such as parent child and sibling relationship.
Consider this HTML Code:
```plaintext
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Website
Welcome to My Website
I am learning HTML.
About Me
I am a web developer.
```
The Browser Parse this HTML and creates a DOM Tree in memory.
![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/f6981929-bee4-4fd8-8962-c3f752993835.png align="center")
Noticed that the `` element has two children `` and ``.The `` element has three children `
` `
` `
`.The Actual Dom also include text nodes, a document type node,a other possible type node.The above diagram focuses on HTML Elements to make a hierarchy easy to understand.
## Understand Parent Child and Sibling Relationships
1. A Parent is an element that directly contain another element.
2. A Child element directly nested inside an another element.
3. Siblings is an element that share same Parent.
## Ancestor and Descendanr Relationship
These relationships go beyond aprent child relations.
`
Hello World
`
For the `
` element `` is a parent element and `
` is a grandparent element.`` `` `
` are its ancestors.for the `` element `
` `` `
` are descendant.
## The Browser Process HTML in Stages
1. HTML source code
Browser receives HTML markup
2. HTML parsing
Browser recognizes tags, attributes, and text
3. DOM construction
Browser creates nodes and connects them
4. Rendering
Browser combines DOM, CSS, and layout information to display the page.
What is an HTML Tag?
A HTML Tag is a piece of markup Written inside angle bracket (< >) that tells the browser how to interpret the different parts of HTML document.
HTML Tags are used to define elements such as headings, paragraphs, images,links,tabl;es and forms.
Basic Example of an HTML Tag
1. `
Hello World
`
2. `
` is the Opening Tag.
3. `
` is the closing Tag.
4. `Hello World` is the Content.
## Types of HTML Tags
### 1\. Paired Tags
These usually have an opening tag and closing tag and content between them.
```plaintext
This is a paragraph.
This is a heading.
```
Example:`
` `
` etc.
### 2\. Void Tags
These elements do not have closng tags because they can not contain child content.
```plaintext
```
Example:` ` `` `` `` etc.
## What is a HTML Element
An HTML element is a complete component of HTML document , usually consisiting of an opening tag , content and closing tag.
Example of HTML Element
```plaintext
Hello World!
```
1. `
` tells the browser that a paragraph element begins.
2) `Hello World!` is the text inside the paragraph.
3) `
` makes the end of paragraph element.
Together Opening Tag. Content and Closing Tag Form a paragraph Element.
**Difference between HTML Tag and HTML Element.**
| HTML tag | HTML element |
| --- | --- |
| A tag is markup written inside angle brackets. | An element is a complete component in the document. |
| Example: `
` | Example: `
Welcome
` |
| Opening and closing tags are individual tags. | The element includes its tags and content. |
## What is a Block Level Element
A Blocl Level Element normally starts on a new line and next block level element appears below it.
Example:
```plaintext
Hello World
This is a paragraph.
This is a div element.
```
The Browser Display these elements onn separate lines by default
Browser preview
![](https://cdn.hashnode.com/uploads/covers/6a670b7b711c6f3b57c87574/d6534413-a865-486a-a0a8-7115e528e266.png align="center")
**Common Block Elements**
1. `
` generic container
2. `
` paragraph
3. `
` to `
` headings
4. `` section of a document
5. `` self-contained content
6. `` introductory content
7. `
```
Example:`