Basic Website Design (HTML Elements)

Spread to the Techies

HTML Elements:

The web pages are the collection of lots of HTML Elements. There are two types of elements we are using in the web pages. They are:

  • Built-in elements
  • User defined elements.

All elements usually consist of a start tag and end tag, with the content inserted in between:

<tagname>
        Content goes here...
</tagname>

Example:

<p>
     This will be a paragraph.....................................
</p>

it was a paragraph element and it is a built-in element of HTML5.

Nested HTML elements:

HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

<!DOCTYPE html>
<html>
    <head>
         <title>webpage title</title>
    </head>
    <body>
         <h1>My First Heading</h1>
         <p>My first paragraph.</p>
    </body>
</html>


Now let’s try to understand the above example.

<html> defines the whole script of the web page. It has a start tag <html> and end tag </html>

<head>and<body> are the content and child element of <html> tag.

<head>It has a start tag </head> and end tag </head>.

This element has one content. <title> is here only child element of his element. It also has a start tag <title> and an end end tag </title>. some text here…….. is the content of the <title> tag.

<head>
       <title>some text here.....</title>
</head>

<body> element defines the document body of the web page.

It has a start tag </body> and an end tag </body> 

<body>
    <h1>We are doing some HTML scripting</h1>  
    <p> This is a paragraph element of HTML</p>
</body>

This element has two child element. <h1> and <p> as contents. Like the other element tags these two also has the start and end tags. like <h1> is the start and </h1> is the end tag . We are doing some HTML scripting is the content of this <h1> tag.

<h1>We are doing some HTML scripting</h1>

Like the above <p> is the start and </p> is the end.

 <p> This is a paragraph element of HTML</p>

Here, This is a paragraph element of HTML is the content of <p> tag.

Never neglect the end tags:

As your browser is intelligent so if you have missed any basic closing tag from the above code then it will may auto correct on the web pages in the browsers. But when there will be a hundred to thousand lines of codes then your browser will be messed up with the tons of misplaced design issues. So, never forget to close the tag if that tag has an end tag. If you start a tag like <body> then you must end that tag like </body>

Empty HTML Element:

You may also get some empty element tag. Like: <br> <hr>. These are called empty elements. They don’t have to be closed as they don’t have any content.

Always use lowercase tags:

HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML.

 

Leave a Reply

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