DEV Community

Cover image for All you need to know about Html Elements
Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

All you need to know about Html Elements

#html #programming #codenewbie #tutorial

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

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

<!DOCTYPE html>
<html>
  <body>
    <h1>my first web heading</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

<p>
  This is a <br /> paragraph with a line break.
</p>
Enter fullscreen mode Exit fullscreen mode

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:

<a href="https://google.com"></a>
Enter fullscreen mode Exit fullscreen mode

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

<img src="img-home.jpg" />
Enter fullscreen mode Exit fullscreen mode

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

<img src="img-gril.jpg" width="250" height="500" />
Enter fullscreen mode Exit fullscreen mode

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

<img src="https://gooogle.com/img/logo/gooogle.jpg" alt="google image with white background" />
Enter fullscreen mode Exit fullscreen mode

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

Html code

<h1 style="color : blue">Attributes in html</h1>
Enter fullscreen mode Exit fullscreen mode

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

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <p>home all</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

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

<p title="Im unstoppable">This is a track record.</p>
Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Resources

Top comments (0)

Read next

thejoernal profile image

Add basic animations to your site using Animate.css and wow.js

Joseph Ochego -

muhammadsaim profile image

Read JSON file in GoLang (Unstructured Data)

Muhammad Saim -

shieldstring profile image

File Uploads with Axios

Agbo, Daniel Onuoha -

rohiitbagal profile image

Promices and Async Await

Rohit -