DEV Community

Cover image for HTML basic elements for beginners
Jemima M
Jemima M

Posted on

HTML basic elements for beginners

Let's talk about HTML Elements....

HTML elements are embedded within the HTML structure. This blog will list and explain all basic HTML elements.

Heading Element:

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

Paragraph Element:

<p>

List Element:

  • <ul> (unordered list)

  • <ol> (ordered list)

  • <li> (list element)

Image Element:

<img>

Span Element:

<span>

Div Element:

<div>

I'm sure we all now know what the heading and paragraph elements mean (if not, read my blog about HTML tags), so let us now look at what the other listed elements mean...

The <ul> tag stands for 'unordered list'. It creates an unordered list which is presented with bullet points.

The <ol> tag stands for 'ordered list'. It is used to create an ordered list. It is basically the opposite of the <ul> tag.

The <li> tag stands for 'list element'. It is placed either within a <ul> or <ol> element to represent each individual item within that list.

Here are some examples of the list elements:

<ul>
   <li>This is an item...</li>
   <li>This is an item...</li>
   <li>This is an item...</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
<ol>
   <li>This is an item...</li>
   <li>This is an item...</li>
   <li>This is an item...</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

The <img> tag embeds an image into the document. It has two required attributes (we will talk more about attributes in another blog) These attributes are 'src' and 'alt'. I will give an example below:

<img src="image.jpg" alt="image">
Enter fullscreen mode Exit fullscreen mode
  • The 'src' attribute states the path to the image.

  • The 'alt' attribute states an alternative text describing the image and this is needed if for some reason, the image cannot be displayed.

In the next blog I want to talk about the <span> and <div> elements, as they are a bit different to the other elements....

I hope that this blog has helped and thank you for reading!

Keep Coding 😁

Top comments (0)