Basic HTML tags (Top 10 tag)

 

There are over 100 tags in HTML5 that contains nearly 30 new tags.

Today we will discuss the most used part of these tags which are found in all websites which represents the most used hyperlinks tag (<a> ...... </a>), representing more than 20% of the number of HTML5 tags used in websites.

Titles:-

1-<a> :- html  hyperlinks.

2-<be> :- break, new line.

3-<div> :- part of html document, division.

4-<h1> :- use this tag for title.

5-<i> :- make an italic text.

6-<img> :- insert image in html document.

7-<ol> :- order list.

8-<ul> :- unorder list.

9-<p> :- paragraph.

10-<span> :- style text inside open and close span tag.

 

HTML hyperlinks  ( <a href="url">text</a> ):-

This tag helps you to create a link for web pages or create internal links on the same page in order to take you to the required part of it by clicking on the link.

When clicking on the link to display another page, there are two ways to display the page that the link refers to.

    1- open a new page on the same window.

    

            <a href="https://ayoubshindi.blogspot.com/">Ayoubshindi Blog</a>

    2- open the required page in a new window in the browser ' just add target="_blank" '.

    

Break <br>:-

    use this tag when you have to create new line for example style of paragraph.

    example:-

    code

    

    output

    

    example with <br>

        code.

        output.

    

<div>

It is mostly used to work on assembling number of parts on the page into one book, through which it can facilitate the process of controlling the contents within the page.

<h1>

use this tag to create title and it contains 6 sizes of headings (h1, h2, h3, h4, h5, h6).

examples :-

        code.

        output.

        

<i> italic :-

you can use around the words you want to emphasize in order to convey a message to the reader about the importance of this text.

example:-

    code

     output

<img> insert image :-

this tag use to insert image into web page you can display image (from you computer or server and from internet ) using image url.

    example:-

        <img src="img1.png">

*you can control width and height.

    example:-

        <img src="img1.png" width="100" height="70">

 *you can add text is display when event of failure loading the image.

    example:-

         <img src="img1.png" alt="Error">

<ol> order list:-

This tag used to build an order list whose items are automatically marked by numbers.

    example:-

        code

            <ol>

                    <li> h1 </li>

                    <li> h2 </li>

                     <li> h3 </li> 

              </ol> 

    

           output

                                1-h1 

                                 2-h2  

                                 3-h3 

<ul> unorder list:-

This tag used to build an unorder list whose items are automatically marked by small black circles.

    example:-

         code

            <ul>

                    <li> h1 </li>

                    <li> h2 </li>

                    <li> h3 </li>

            </ul>

        

           output

                       . h1

                       . h2

                       . h3

<p> paragraph:-

This tag used to identify the existence of a paragraph that has special properties so that the browser places it on a new line and create a margin on both sides.

    example:-

        <p> This tag used to identify the existence of a paragraph </p>

<span> style text betwen o pen and close span tag:-

use this tag on the page when there are parts or text on the page that we need to control, such as changing the color of text.

example:-

<p> use this tag on the page <span style="color:green;">  when </span>  there are parts or text </p>

output:-

        use this tag on the page when there are parts or text

channel link :- https://www.youtube.com/channel/UC1DFWpD1k1PtxIzYbdBAj6g 

Add your comment 

Signature :- Ayoub Shindi (Dev AAS).