To complement a previous post today we will get to know in detail HTML basic elements, that will make it easier to plan your own website. As we know now, all HTML documents consist of nested HTML elements and, the most common used by beginners elements of an HTML page are:

1) Headings <h1>,<h2>,<h3>,<h4>,<h5>,<h6>

2) Paragraph <p>

3) Horizontal rule <hr>

4) HTML Links <a>

5) HTML List <ul>,<ol>,<dl>

1) Headings

There are six different types of text headers. It’s important to use headings to show the website structure. <h1> should be used as a main heading, followed by <h2> headings, and then the less important <h3>,<h4>,<h5>,<h6>.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Once you inserted this code in your HTML editor, you will see in the browser this:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Importance of Headings: Search engines use headings for indexing the structure and content of the website.

2) Paragraph

The HTML <p> element defines a paragraph. So, anything mentioned within <p> and </p> is treated as a paragraph.

Example:

<!DOCTYPE html>
<html>
<body>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>

</body>
</html>

You can see these paragraphs in your browser as:

3) Horizontal rule

HTML tag <hr> is used to declare a thematic break for content. The <hr> tag is empty, so it does not require an and tag.

Example:

<!DOCTYPE html>
<html>
    <head>
        <title>HR Tag in HTML</title>
    </head>
    <body>
        <p>The horizontal rule tag below.</p>
        <hr>
        <p>The horizontal rule tag above.</p>
    </body>
</html>

You can see it the browser as:

4) HTML Links

The tag <a> (anchor element), is used to create a hyperlink to another website, or another location within the same website. The hyperlink created by the tag <a> can be applied to the text, image, or other HTML content nested between the opening and closing <a> tags.

The link’s destination is specified in the href attribute.

Example:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.lenastanley.com">This is a link.Click here!</a>

</body>
</html>

Output:

This is a link.Click here!

5) HTML Lists

Lists are used to group related pieces of information (people’s names, a shopping list, or things to do). There are three lists types in HTML:

a) An unordered (bulleted) list <ul> is used to group related pieces of information in no particular order.

b) An ordered list <ol> is used to group related pieces of information in a particular order.

c) A definition list <dl> is used to represents the description list. This tag is used with <dt> tag and <dd> tag.

Example of an unordered list and an ordered list:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Unordered HTML List</h2>

<ul>
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>

<h2>This is an Ordered HTML List</h2>

<ol>
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ol>

</body>
</html>

Output:

a) An unordered HTML list starts with the <ul> tag, and each list item starts with the <li> tag. In case of an unordered HTML list, you can change the bullet (small black circles) to one of several default styles, use an image, or display the list without bullets.

The CSS list-style-type property is used to define the style of the list item marker: disc, circle, square, or none.

Example – Circle bullets:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Unordered HTML List with Circle Bullets</h2>

<ul style="list-style-type:circle">
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ul>
</body>
</html>

Output:

b) An ordered HTML list starts with <ol> tag, and each list item starts with the <li> tag. An ordered HTML list can be displayed with several sequencing options. The default in most browsers is decimal numbers, but also you can use:

* Letters
type=”a” lowercase letters (a,b,c…)
type=”A” uppercase letters (A,B,C…)

* Numbers
type=”1″ numbers (1,2,3…)
type=”i” lowercase Roman numerals (i,ii,iii…)
type=”I” uppercase Roman numerals (I,II,III…)

Example – Uppercase letters:

<!DOCTYPE html>
<html>
<body>

<h2>This is an Ordered HTML List with Uppercase letters</h2>

<ol type="A">
  <li>Bread</li>
  <li>Butter</li>
  <li>Cheese</li>
</ol>

</body>
</html>

Output:

c) Thy <dl> tag is used to represents the definition list (in HTML4.1) or the description list (in HTML5). This tag is used with <dt> (a term name) tag and <dd> (a description of each term) tag.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>This is A Description HTML List</h2>

<dl>
  <dt>Sugar</dt>
  <dd>- 500 gr</dd>
  <dt>Milk</dt>
  <dd>- 1 litre </dd>
</dl>

</body>
</html>

Output:

In the next post, I will try to add a description of the rest basic HTML elements (like element div, span, images, and button).

As a bonus, I am posting an example of a horizontal list styled with CSS, which you can use in your layout to create a navigation section:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e76f51;
}

li {
  float: left;
}

li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #264653;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Landing page</a></li>
  <li><a href="#news">About author</a></li>
  <li><a href="#contact">Informations</a></li>
  <li><a href="#about">Contact</a></li>
</ul>

</body>
</html>

Output:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

Menu

Share this: