learning basics of web designing

Basic HTML elements

As we learn that HTML is a collection of tags. So tags are the basic elements for an HTML document. In this lesson, we will learn about some basic tags. So let’s get started.

HTML tags for <head> section

As we know that <head> have special tags that should use within the head tag. Let have eyes on some basic tags that use in the head.

Title tag

<title> tag show text in the browser’s tab. In other words, it gives a title to our HTML document. We already use it in the previous lesson.

<title>My First Webpage</title>

meta tag

Meta tags are a piece of text that describes the page content. Meta tags are not visible to the reader, but useful for the search engine. Search engine reads them and gets an idea about the content of the page.

<meta name="description" content="This field has information about your page. It is usually around two sentences long.">.
<meta name="author" content="Darshan Saroya">

There are a number of meta tags available, they are for SEO of the page. Look into above code, you will find that meta tag has 2 attributes, name and content. Name specified the filed name and content give it a value. Like in below meta tag, it tells that author of this HTML page is Darshan Saroya.

link tag

<link> tag connect external file to HTML page. External files generally are stylesheet files. We will learn about this in CSS section.

<link rel="stylesheet" type="text/css" href="css/default.css">

link tag is always used with some attributes, like rel, href. Rel attribute defines the relationship between the HTML page and the linked file.

General body tags

Paragraph Tag <p>

<p> tag use to print a paragraph. Here paragraph means a collection of the lines that show in one piece. p tag does not read enter. If you add enter in text in p tag then it will not print line in next like. It prints it just in the next line.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus purus sit amet magna eleifend facilisis. Curabitur hendrerit ex ut dolor elementum facilisis. Nam sit amet turpis eu arcu consectetur dignissim id iaculis nibh. Cras condimentum ac ex vitae efficitur.

<p>Aliquam eu turpis quam. Fusce accumsan, nisl non tristique suscipit, purus quam lobortis est, id tristique tellus sem ac eros.

Quisque pretium imperdiet vulputate. Vestibulum facilisis pretium tincidunt.
Donec at nunc vehicula, volutpat lacus non, mattis turpis. Nulla egestas massa tellus, in cursus neque pretium hendrerit.

This will print,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus purus sit amet magna eleifend facilisis. Curabitur hendrerit ex ut dolor elementum facilisis. Nam sit amet turpis eu arcu consectetur dignissim id iaculis nibh. Cras condimentum ac ex vitae efficitur.

Aliquam eu turpis quam. Fusce accumsan, nisl non tristique suscipit, purus quam lobortis est, id tristique tellus sem ac eros. Quisque pretium imperdiet vulputate. Vestibulum facilisis pretium tincidunt. Donec at nunc vehicula, volutpat lacus non, mattis turpis. Nulla egestas massa tellus, in cursus neque pretium hendrerit.

Point to be noted:

  • In 2nd p tag, there are 3 new lines, but when print on the web page, they just show in a simple way.
  • You can use other tags in p tag content.

Preformatted text <pre>

<pre> tag show content as it in code.

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks
</pre>

will print,

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks

But when you use same text with p tag, it will print

Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks

Hope this makes you differentiate between them.

Headings

Heading tags are used to show important heading in content.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h5>

will print,

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Adding link in HTML

You might not believe but links are the base for the internet. Link uses to connect the document to another document. <a>tag is used for the link.

<a href="https://darshansaroya.com" target="_blank" title="Go to darshansaroya.com">Darshan Saroya</a>

We already talked about this in the previous lesson, but let me clear it once more time for you.

  • href attribute contains the link of the page to connect with it.
  • target attribute adds a way to open the linked page. Here page will open in new tab.
  • title attribute show text on putting the mouse pointer on the link.

Darshan Saroya

Move your mouse pointer to link you will see the title and when you click it, it open in new tab. You can also use another tag in a tag.

Adding Images in HTML

An image can be added to HTML page like this.

<img src="img/yourimage.jpg" alt="your image" height="400" width="300">

Copy this code to your HTML file in the body tag. Create a folder name ‘img’ in your folder and add an image named yourimage.jpg. Your image will show in the HTML page. Now let me explain this tag in more details.

    • src attribute give the location of the image that is going to use. Here address is img/yourimage.jpg, so the first browser looks for img folder and then look for the image. If the image finds there, the image will show.
    • If the image is not found or address is wrong, then alt text will show in place of the image.
    • If alt attribute is not added then break image will show.
    • height and width show image in the specified dimension. Values are in the pixel.

Adding HTML list

There are 3 type of lists available in HTML.

  1. Ordered list,
  2. Unordered List and
  3. Definition List

Ordered List

<ol>
<li>First item </li>
<li>Secont item </li>
<li>Third Item </li>
</ol>

Output:

  1. First item
  2. Second item
  3. Third Item

Unordered List

<ul>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3</li>
</ul>

Output:

  • Item 1
  • Item 2
  • Item 3

Definitive List

<dl>
<dt>Item</dt>
<dd>The definition goes here</dd>
</dl>

Output:

Item

The definition goes here

Table

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

Output:

Row 1 – Column 1Row 1 – Colunm 2Row 1 – Column 3
Row 2 – Column 1Row 2 – Column 2Row 2 – Column 3

When drawing a table we must open an element with the <table> opening tag. Inside this tag we structure the table using the table rows, <tr>, and cells, <td>.

Division <div>

Division tag allows you to bound other tags. <div> tag will be discussed in the next lesson.

Some other tags

<b>
Bold text
<strong>
Important text (normally displayed as bold text)
<i>
Italic text
<em>
Emphasized text (normally displayed as italic text)
<mark>
Marked text (normally displayed with a yellow background)
<small>
Small text
<strike>
Striked out text
<del>
Deleted text (normally displayed as striked out)
<u>
Underlined text
<ins>
Inserted text (normally displayed as underlined text)
<sub>
Subscript text
<sup>
Superscript text

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. Can build a custom theme for your business.  I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

Free Bootstrap 4 Theme

Mega UI Advanced Material Design Blogging WordPress Theme

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.


Basic HTML elements

Time to read: 6 min
0