# HTML Tags and Elements

# Elements

Elements always has a starting and ending tags. ex:

```xml
<startingTag>Your Content</endingTag>
```

The code written up there is just for an example. There are various ways to write our html.

## Element types -

To start with the html lets first understand the html's boiler code -

### `<html></html>` -

* An HTML element is a basic building block of HTML (HyperText Markup Language) used to create and structure sections of a webpage.
    

### `<head></head>` -

The `<head>` element is an HTML element that contains metadata and information about the document that isn't displayed directly on the webpage. This information typically includes:

* **Title**: Defined using the `<title>` tag, it sets the title of the webpage, which appears in the browser's title bar or tab.
    
* **Meta tags**: Provide metadata such as the character set, author, description, and keywords for search engines.
    
* **Links to external resources**: Such as stylesheets (`<link>`), scripts (`<script>`), and icons (`<link rel="icon">`).
    

For example:

```xml
<head>
  <title>My Webpage</title>
  <meta charset="UTF-8">
  <meta name="description" content="A brief description of the webpage">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
```

### `<body></body>` -

The `<body>` element is an HTML element that contains all the content of an HTML document that is displayed in the web browser. This includes:

* **Text**: Such as headings, paragraphs, and lists.
    
* **Media**: Like images, videos, and audio elements.
    
* **Interactive elements**: Such as forms, buttons, and links.
    
* **Other HTML elements**: Including tables, divs, spans, and more.
    

For example:

```xml
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <img src="image.jpg" alt="An example image">
  <a href="page2.html">Go to page 2</a>
</body>
```

### HTML Tags -

HTML tags are the building blocks of HTML that define the structure and content of a webpage. Each tag is enclosed in angle brackets (`< >`) and typically comes in pairs: an opening tag and a closing tag. The closing tag has a forward slash (`/`) before the tag name. Tags can also have attributes that provide additional information about the element.

For example:

```xml
<p>This is a paragraph.</p>
```

In this case:

* `<p>` is the opening tag.
    
* `</p>` is the closing tag.
    
* The text "This is a paragraph." is the content.
    

Some tags are self-closing and don't require a closing tag, such as:

```xml
<img src="image.jpg" alt="Example image">
<p>A paragraph</P>
<!-- br is another self closing tag -->
<br/>
<!-- This simply just give a line break in our webpage -->
```

HTML tags are used to create elements like headings, paragraphs, links, images, lists, and more, helping to structure and present content on the web.

### Short brief reminder what you have learnt today :D -

```xml
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Title of the document</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
```