Categories
HTML Web development

HTML Basic Elements part.1

To complement a previous post today we will get to know in detail of HTML basic elements, which will make it easier planning 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:

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 are available:

* 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: red;
}

li {
  float: left;
}

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

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

<h2>Your website Menu</h2>
<p>You can create your own a navigation menu with CSS.</p>

<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>

Output:

That’s all for today.
Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *