A web page is created using tags (known as markup) to the contents of the page. The tags provide extra meaning and allow browsers to show users the structure and the content of the page.
Other than the opening and closing tags HTML has other categories of tags as follows
- Structural Markup – these are composed of elements which can be used to describe both headings and paragraphs
- Semantic Markup – these provides extra information to the structural markup.
STRUCTURAL MARKUP
These are composed of
- Headings
- Paragraph
- Bold and Italic
- Superscript and Subscript
- White spaces
- Line breaks and Horizontal rules
i. Headings
HTML has six types of headings composed of <h1>,<h2>,<h3>,<h4><h5> and <h6>
The content displayed within the <h1> is the largest and this tag is mainly used for the main headings <h2> is used for subheading and the size smaller than the <h1>. The size varies and the content of <h1> is the largest while the content of <h6> is the smallest.
Example
<!DOCTYPE html>
<html>
<head><title>Introduction to web development</title></head>
<body>
<h1> Web development </h1>
<h2> Web development </h2>
<h3> Web development </h3>
<h4> Web development </h4>
<h5> Web development </h5>
<h6> Web development </h6>
</body>
</html>
ii. Paragraph
In HTML paragraphs are created with <p> element, enclose the content to be displayed in between the <p> and </p> tags. By default, a browsers display each paragraph on a new line with some space in between.
Example
<!DOCTYPE html>
<html>
<head><title>Introduction to web development</title></head>
<body>
<h1> Web development </h1>
<p> Web development is the creation of web sites or web application using browser rendered languages such as HTML, CSS, XHTML and so on </p>
</body>
</html>
iii. Bold and Italics
If you want text to appear in bold enclose the content between the <b> and </b>
The <b> element represents a section of text that would be presented in a visually different way.
Example
<!DOCTYPE html>
<html>
<head><title>Introduction to web development</title></head>
<body>
<h1> Web development </h1>
<p> Web development is the creation of web sites or web application using browser rendered languages such as<b> HTML, CSS, XHTML</b> and so on </p>
</body>
</html>
If you want the text to be italicized enclose the content between the <i> and </i>
The <i> element represents a section of text that would be said in a different way from surrounding content — such as technical terms, names of ships, foreign words, thoughts, or other terms that would usually be italicized.
Example
<!DOCTYPE html>
<html>
<head><title>Introduction to web development</title></head>
<body>
<p> <i> World Wide Web </i> is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet. </p>
</body>
</html>
iv. Superscript and Subscript
Superscripts are small letters/numbers raised above a number, letter or a word, if you want to apply superscript on a web page use the <sup> element.
<!DOCTYPE html>
<html>
<head><title>School Announcement</title></head>
<body>
<h1> Announcement </h1>
<p> Hello all! To all students who have borrowed a book from the school library kindly return by 4<sup>th </sup> April 2020 </p>
</body>
</html>
Subscript are small letters/numbers that are pushed below a number, letter or a word, if you want to apply this on a web page use a <sub> element.
<!DOCTYPE html>
<html>
<head><title>Chemistry</title></head>
<body>
<h1> Chemical formula </h1>
<p> The empirical formula for glucose is CH<sub>2 </sub>O </p>
</body>
</html>
v. White Space
These are extra spaces in between texts or tags on the source code which make it easier for web page authors to read the codes. White spaces may include starting new tags on a new line. Normally the browsers ignores the white spaces.
vi. Line breaks and Horizontal Rule
When the web page author does not wish to use several paragraphs but wants to use one paragragh and breaks in between them, they can use <br /> tag.
Example
<!DOCTYPE html>
<html>
<head><title>Recipes</title></head>
<body>
<h1> How to make chapatti </h1>
<p> Chapatti is one of the staple food in Kenya it is not hard to make the following is the procedure of making it <br /> In medium size pot boil one and a half cup water <br /> as the water is boiling in a mixing bowl add a half kilogram of all purpose flour <br / > make a hole on the middle and add a quarter cup cooking oil and 1tablespoon of salt <br /> once the water has boiled spill it to the flour mixture and start mixing it to make a dough <br / > kneed for about 10 minutes <br/> </p>
</body>
</html>
Horizontal rules can be used to create break between themes such as a change of topic in a book or a new scenein a play you can add a horizontal rule between sections using the <hr /> tag.
The <hr /> and the <br/ > elements are empty elements they only exist as one tag Before the closing angled bracket of an empty element there will often be a space and a forward slash character.
Example
<!DOCTYPE html>
<html>
<head><title>Recipes</title></head>
<body>
<h1> How to make chapatti </h1>
<p> Chapatti is one of the staple food in Kenya it is not hard to make the following is the procedure of making it <br /> In medium size pot boil one and a half cup water <br /> as the water is boiling in a mixing bowl add a half kilogram of all purpose flour <br / > make a hole on the middle and add a quarter cup cooking oil and 1tablespoon of salt <br /> once the water has boiled spill it to the flour mixture and start mixing it to make a dough <br / > kneed for about 10 minutes <br/> </p>
<hr />
<h1>How to make scrambled egg </h1>
<p> Scrambled eggs are easy breakfast meal <br /> beat two eggs in a bowl and set aside <br /> chop one small onion into fine pieces <br /> chop one small tomato into fine pieces as well <br /> peel one piece of a garlic clove and crash it <br /> put a frying pan on a medium heat <br /> add one tablespoon of cooking oil <br /> Add the chopped onion fry it till it is translucent, add the crashed garlic fry it till the raw smell is gone and finally add the chopped tomato <br /> stir it and wait for 2 minutes for the tomatoes to get cooked </br> Finally add the eggs in mixture stir the eggs with the tomato mixture and don’t forget to add a pinch of salt and pepper to season it. Keep stirring it and break the eggs when the eggs have dried you can serve it.
</body>
</html>
Study with Jamila 
Awesome post
LikeLike