What is HTML
HTML stands for hyper, text, markup language. And it the most widely used language in writing web pages and after writing your web page you might need to give it design, that is where CSS comes into play. CSS is used to give a web page or a general website a more modern look by styling it using some decoration. HTML has a structure that whatever you write must fall within that structure. Here is the structure.
<!doc type html>
<html>
<head>
</head>
<body>
</body>
</html>
above are some tags which are collectively called HTML structure.
- The first tag is <!doctype html> this is the tag that is used to define the document type and HTML version.
- The second tag is <html> is the tag the tag that encloses the entire html document and which consists of tags like <head>......</head>, <body>.....</body., It is document body which is donated by <body>....</body> tag.
- The third tag is <head> which also has a closing tag as </head> it is consists of tags like <tittle>, <link> tags and even sometime private information.
- The fourth tag is a <body> tag which contains tags like <h>, <p>, <ul>, <ol> and anything that need to be displayed in page must to be within the <body>......</body>.
- The last tag is a </html> which is used as a closing tag on the whole page.
HTML BASIC TAGS
In each part of HTML structure, there is a list of tags that play their roles differently so now we are going to all most all of them if not all.
<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>
</body>
</html>
This will produce the following result:
lets now take look at an example of a paragraph
<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the main heading</h1>
<p>This paragraph contains the most important content. As it has the biggest heading, it like you will just have to write
anything that can be relevent to the content blow.</p>
<h2>This is a level two heading</h2>
<p>This paragraph contains about some of the things that are not as important as the one under h1 tag</p>
</body>
</html>
This will produce the following result:
One of the things to be aware of that the difference between the two headings as they have different sizes. And content contained in the level one heading is the priority one then followed by the level two heading.
- Any document must starts with heading in html. which is used to give a kind of description to the content of the page, And we have six levels of headings which use the element <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. The browser normally reduces their size form <h1> to <h6> . <h1> is of biggest size and <h6> is of smallest size
<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the main heading</h1>
<h2>This is a level two heading</h2>
<h3>This is a level three heading</h3>
<h4>This is a level four heading</h4>
<h5>This is a level five heading</h5>
<h6>This is a level six heading</h6>
</body>
</html>
This will produce the following result:
This is the main heading
This is a level two heading
This is a level three heading
This is a level four heading
This is a level five heading
This is a level six heading
Now you will realize that their size is decreasing in ascending order. This will give an idea of the importance of your paragraph as the browser manipulate the size.- The <p> tag represents the paragraph and it has both opening and closing tag, paragraph comes after the heading tag
lets now take look at an example of a paragraph
<!doctype html>
<html>
<head>
</head>
<body>
<h1>This is the main heading</h1>
<p>This paragraph contains the most important content. As it has the biggest heading, it like you will just have to write
anything that can be relevent to the content blow.</p>
<h2>This is a level two heading</h2>
<p>This paragraph contains about some of the things that are not as important as the one under h1 tag</p>
</body>
</html>
This will produce the following result:
This is the main heading
This paragraph contains the most important content. As it has the biggest heading, it like you will just have to write anything that can be relevant to the content below.This is a level two heading
This paragraph contains some of the things that are not as important as the one under the h1 tag.One of the things to be aware of that the difference between the two headings as they have different sizes. And content contained in the level one heading is the priority one then followed by the level two heading.