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

Elements in HTML

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

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    30
    Trophy Points:
    0
    The HTML element consists of a start and end tag. The specific data is added inside the start and end tags. The general syntax for the HTML elements is:

    Code:
    <tagname> data </tagname>
    
    All the data is added inside these start and end tags.

    HTML elements



    HTML elements can be categorized into various categories depending on their use in a document. Let’s learn all the different categories in detail.

    1. Document elements

    HTML element is for informing the browser that the text contain the HTML format. The document element contains head, body, etc.

    The representation of the document element in tag format is:

    Code:
    <html>
    <head></head>
    <body>
    </body>
    </html>
    
    HEAD element is used for adding the header information which is not displayed in the specific document. The element contains tags like title, base, etc.
    Code:
    <head>
    <title>HTML elements</title>
    </head>
    
    TITLE element can be viewed in the browser header. The title must contain some specific meaning.
    Code:
    <title>The demonstration of html elements</title>
    
    BODY defines the document body in html. The color, text of the background can be assigned.
    Code:
    <body></body>
    
    2. Body elements

    Paragraph tag <p> is used for defining the paragraph in an html document.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <p>First paragraph</p>
    <p>Second paragraph</p>
    </body>
    </html>
    
    Output:
    [​IMG]

    Heading are used for adding text which is displayed as an individual paragraph on the browser. All the heading have a number and are displayed according to their precedence.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Learn HTML</h1>
    <h2 align="center">HTML tags</h2>
    </body>
    </html>
    
    Output:
    [​IMG]

    Horizontal rule is used for adding a horizontal line across the web page. The <hr> tag is used for adding the horizontal rule.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <hr size ="20" width="70%">
    </body>
    </html>
    
    Output:
    [​IMG]

    Line break is used for adding a single break at the middle of the item, heading, paragraph, etc. The <br> tag is useful for adding the break.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <p Learn about HTML <br>
    In simple and easy way</p>
    </body>
    </html>
    
    Output:
    [​IMG]

    The block quote element is used for displaying the text block which is indented on all the four sides of the document.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <blockquote>A stitch in time saves nine</blockquote>
    </body>
    </html>
    
    Output:
    [​IMG]

    3. Appearance and style elements

    Text can be displayed as bold, italic or underline using the <b></b>, <i></i> and <u></u> tags.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <b>HTML</b>
    <i>HTML</i>
    <u>HTML</u>
    </body>
    </html>
    
    Output:
    [​IMG]

    Strong tag is used to add strong emphasis to the text in the document. The text is usually displayed as bold.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <strong>Welcome</strong>
    </body>
    </html>
    
    Output:
    [​IMG]

    The <cite> tag is used for defining the title of the cited work. The text is displayed in italic style.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <cite>Harry Potter</cite>, by J.K. Rowling
    </body>
    </html>
    
    Output:
    [​IMG]

    4. Anchor element

    The element helps user to access the document using the specific URL and clicking over it. A named target might be added to the element.

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

    [​IMG]

    5. List elements

    The unordered list contains items in the format of bulleted list. The list items can be nested.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <ul>
    <li>Maths</li>
    <li>History</li>
    <li>English</li>
    </ul>
    </body>
    </html>
    
    Output:
    [​IMG]

    Ordered list can be displayed as a number of lettered list. The lists can be easily nested.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <ol type="a">
    <li>Maths</li>
    <li>History</li>
    <li>English</li>
    </ol>
    </body>
    </html>
    
    Output:
    [​IMG]

    Definition and descriptive list can be defined using the DD and DT tags. The main entries can be defined as DT elements. The annotations or definitions are defined using the DD elements.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <dl>
    <dt>new
    <dd>New to understand
    <dt>old
    <dd>Easy to understand
    </dl>
    </body>
    </html>
    
    Output:
    [​IMG]

    Nested HTML elements



    One HTML element can be added inside another HTML element. This is known as nested HTML element.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Demo of nested elements</title>
    </head>
    <body>
    <h1>Nested HTML elements</h1>
    <p>Adding one HTML element inside another</p>
    </body>
    </html>
    
    Output:
    [​IMG]

    Empty HTML elements



    The elements which do not contain any content are known as empty HTML elements. The elements are closed inside the start tag. Consider the line break tag which is represented as <br >. It does not contain a closing tag. It is not necessary for the user to close the empty tags.
     
    shabbir likes this.

Share This Page