1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

The Basic HTML tags

Discussion in 'Web Design, HTML And CSS' started by MinalS, Jun 4, 2016.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    30
    Trophy Points:
    0
    Heading tag

    Every html document contains a heading. All the heading have a particular size. Depending on the levels, the tags are ranging from <h1> to <h6>.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Example to demonstrate heading</title>
    <body>
    <h1>Heading 1 in the document</h1>
    <h2>Heading 2 in the document</h2>
    <h3>Heading 3 in the document</h3>
    <h4>Heading 4 in the document</h4>
    <h5>Heading 5 in the document</h5>
    <h6>Heading 6 in the document</h6>
    </body>
    </html>
    
    Output:

    [​IMG]

    HTML links

    The link in html is used as a connection to a web resource. It is a hypertext structure used for referencing a website or webpage. The link contains an anchor tag and a direction.
    The <a> tag is used for defining the links.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <body>
        <a href="http://www.google.com">Google</a>
    </body>
    </html>
    
    Output:

    [​IMG]

    HTML paragraphs

    The paragraph is defined using the <p> tag. The paragraph content must be added inside the <p> …</p> tags.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <title>Paragraph example</title>
    <body>
        <p>Paragraph 1 of the document</p>
        <p>Paragraph 2 of the document</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Images

    The <img> tag is used for defining the html images. Different attributes like size containing width and height, alternative text, and source file are provided.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <body>
        <img src="oval.jpg" width="200" height="100" >
    </body>
    </html>
    
    Output:

    [​IMG]

    Line break

    The <br /> element is used for adding a line break to the text in the document. The content after the element are added to the next line. There is no start and end tag needed for the line break tag. It is also known as an empty element.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Line Break Tag</title>
    </head>
    <body>
    <p>Welcome User<br />
    Learn about html tags.<br />
    Useful for styling</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Horizontal lines

    The <hr> tag is used for creating a horizontal line in the document. It creates a line from the present position to the right margin. User can add line between two heading, paragraphs, images etc.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Horizontal line</title>
    </head>
    <body>
    <p>Welcome User</p>
    <hr />
    <p>Explore the tags in detail</p>
    </body>
    </html>
    
    Output:

    [​IMG]

    Center content

    The <center> tag is used for adding the content to the center of the web page. The contents can also be added to the table center.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Content centering</title>
    </head>
    <body>
    <p>Text is added on the web page</p>
    <center>
    <p>The value is visible on the center of the web page</p>
    </center>
    </body>
    </html>
    
    Output:

    [​IMG]

    Formatting text

    There is a requirement that the text format added must be similar to the one added in the HTML document. The <pre> tag known as preformatted tag is used. The text which is placed inside the pair of <pre>…</pre> tag will preserve the formatting.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Formatting</title>
    </head>
    <body>
    <pre>
        function test1 ( data ) {
        alert ( data )
    }
    </pre>
    </body>
    </html>
    
    Output:

    [​IMG]

    Nonbreaking spaces

    The nonbreaking space entity &nbsp; is used for adding the space between the text. The space added using the tag is different from the normal text.

    Example:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Nonbreaking spaces</title>
    </head>
    <body>
    <p>Learn different technologies like "Java&nbsp;C#&nbsp;SQL."</p>
    </body>
    </html>
    
    Output:
    [​IMG]
     

Share This Page