All you need to know about Html Elements
Tags: html, programming, codenewbie, tutorial
Published: 2021-06-01 20:27:50

---
title: All you need to know about Html Elements
published: true
date: 2021-04-20 01:16:04 UTC
tags: [html, programming, codenewbie, tutorial]
canonical_url: https://www.devwares.com/blog//html-element
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oil5585ifsaek2y4ryv7.png
series: Devwares Web development Free Course
---

 **HTML ELEMENT:** An HTML element is defined by a start tag, an end tag and some content in-between the tags.

[![Contrast Bootstrap UI Kit](http://github.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

**EXAMPLE**

`<tagname> content goes here <tagname>`

The html element is everything from the start tag to the end tag:

Starting tag Element content End Tag

h1 My first statement h1

The HTML element without content are called empty element. Empty elements do not have an end tag, such as `<br>` (this is a line break).

**Nested HTML Element**

HTML element can contain element inside it or can be nested with element. All HTML documents contain nested element

**HTML Code**

```html
<!DOCTYPE html>
<html>
  <body>
    <h1>my first web heading</h1>
  </body>
</html>

```

**CODE EXPLAINED**

The `<html>` element defines the whole document and represent the root element. It has a start tag `<html>` and an end tag `</html>`. Then, inside the `<html>` element there is `<body>` element nested within the `<html>` element. `<body>` tag defines the body of the web. Inside the `<body>` tag is the `<h1>` element nested inside it. Never forget the end tag Some editor will help you put your end tag when you write the code. However, sometimes this may not be the case and when you forget to put the tag, unexpected error will occur. Empty HTML ELEMENTS As we stated earlier HTML element with no content are called empty elements. The `<br>` tag is an example of an empty element and it defines a line break.

**Html code**

```html
<p>
  This is a <br /> paragraph with a line break.
</p>

```

This is how the code looks like:

This is a   
 paragraph with a line break.

  

HTML is not case sensitive HTML tags are not case sensitive. For example, the `<p>` means the same as `<p>`. it is always better if you use the lower case when you write HTML tags.

**HTML ATTRIBUTES**

HTML attributes are always specified at the beginning of a tag and it usually provides additional information about the element. It usually come in name/value pairs: name="value"

**The href Attribute:** The html links are usually defined with `<a>` tag while the link address is specified in the href attribute:

**Html code:**

```html
<a href="https://google.com"></a>

```

**The src Attribute:** The `<img>` tag used to embed an image in an HTML page. The src attributes provides additional information such as providing the path of the image to be displayed.

**Html code**

```html
<img src="img-home.jpg" />

```

There are two ways to specify the url in the src attribute: The absolute URL – link to external images that are hosted on another website. eg `src="http://www.google.com/images/img-girl.jpg"`. Relative URL- links to an image that is hosted within the website. eg `src="img-girl.jpg"`. Its usually best to use the relative Urls. They will not break if you change domain.

**The width and height Attribute:** Images are known to have a set of size attributes, which specifies the width and height of the image.

**Html code**

```html
<img src="img-gril.jpg" width="250" height="500" />

```

**The alt Attribute:** The alt attributes specify the alternative message to display if the message is not shown there. The value of the attribute can be read by screen readers. This way, someone with impaired vision listening will hear the value of the element.

**Html code**

```html
<img src="https://gooogle.com/img/logo/gooogle.jpg" alt="google image with white background" />

```

**The style Attribute:** This is used to defined the styling of an element such as color, font, size etc.

**Html code**

```html
<h1 style="color : blue">Attributes in html</h1>

```

**The lang Attribute:** The language of the html document can be declared with the lang attribute This is important for accessibility application and search engines.

**Html code**

```html
<!DOCTYPE html>
<html lang="en-US">
  <body>
    <p>home all</p>
  </body>
</html>

```

The first two letter shows the language(en). And if there is a dialect, you can add it (US).

**The title Attribute:** The title attribute can be added to a `<p>` element. The title attributes add more information about that element.

**Html code**

```html
<p title="Im unstoppable">This is a track record.</p>

```

[![Contrast Bootstrap UI Kit](http://github.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)

## Resources 

- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)