What is HTML?
Hypertext Markup language (HTML) is the standard markup language used to structure web pages and their content.
History of html:
The first version of HTML was written by Tim Berners-Lee in 1993. Since then, there have been many different versions of HTML. The most widely used version throughout the 2000's was HTML 4.01, which became an official standard in December 1999.
Here is the basic structure of html.
<DOCTYPE HTML>
<!DOCTYPE html> <!-- Declaration of HTML5 document type -->
<html lang="en"> <!-- Start of HTML document with English as the language -->
<head>
<meta charset="UTF-8"> <!-- Character encoding declaration -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Viewport settings for responsive design -->
<title>My Blog</title> <!-- Title of the blog -->
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>
<!-- Header section -->
<header>
<h1>My Blog</h1> <!-- Heading of the blog -->
</header>
</html>
In total html has 6 heading tags, those are:<h1>,<h2>,<h3>,<h4>,<h5> and <h6>.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Tags Sample</title>
</head>
<body>
<h1>This is a Heading Level 1</h1>
<!-- The <h1> tag defines the most important heading. -->
<!-- There should be only one <h1> tag per page, representing the main heading of the document. -->
<h2>This is a Heading Level 2</h2>
<!-- The <h2> tag defines a level 2 heading. -->
<!-- These are used for sub-sections of the main document. -->
<h3>This is a Heading Level 3</h3>
<!-- The <h3> tag defines a level 3 heading. -->
<!-- These are used for sub-subsections or further details within the document. -->
<h4>This is a Heading Level 4</h4>
<!-- The <h4> tag defines a level 4 heading. -->
<!-- These are used for smaller sub-sections or details within the document. -->
<h5>This is a Heading Level 5</h5>
<!-- The <h5> tag defines a level 5 heading. -->
<!-- These are used for even smaller sub-sections or details within the document. -->
<h6>This is a Heading Level 6</h6>
<!-- The <h6> tag defines the least important heading. -->
<!-- These are used for the smallest sub-sections or details within the document. -->
</body>
</html>
Output:
Commonly used tags in html are
<p>: Defines a paragraph of text. It's used to structure and separate blocks of text within the document.<hr>: Represents a thematic break or horizontal rule. It's used to separate content sections or create visual distinctions between elements.<a>: Defines a hyperlink. It's used to create clickable links to other web pages or resources. Thehrefattribute specifies the URL of the page the link goes to.<br>: Inserts a single line break. It's used to force text to the next line without starting a new paragraph. It's often used for formatting purposes or when there's a need to break a line within a paragraph.
EXAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags Sample</title>
</head>
<body>
<p>This is a paragraph tag. It is used to define a paragraph of text.</p>
<!-- The <p> tag defines a paragraph. It's used to separate blocks of text. -->
<hr>
<!-- The <hr> tag defines a thematic break or horizontal rule, used to separate content. -->
<p>This is another paragraph.</p>
<a href="https://www.example.com">This is a link</a>
<!-- The <a> tag defines a hyperlink. It's used to create clickable links to other web pages. -->
<!-- The href attribute specifies the URL of the page the link goes to. -->
<br>
<!-- The <br> tag inserts a single line break, forcing text to the next line. -->
<p>This paragraph is on a new line due to the line break created by the <br> tag.</p>
</body>
</html>
Output:
<i> and <em>:
<i>tag: This is used to apply italic formatting to text.<em>tag: Similar to <i> but it carries emphasis in terms of semantics, typically indicating stress emphasis or importance.Example:
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
<u> tag:
This is used to underline text.
Example:
<p>This is <u>Underlined</u> text for reference.</p>
Image Tag:
The
<img>tag is used to embed an image in an HTML page. It provides the link for the referenced image.Example:
<img src="image.jpg" alt="Image">As you can see image tag takes into consideration 2 required attributes. src = It specifies the path of the image alt = It specifies the text which is displayed when the image is somehow not being loaded.
You might note that <img> tag does not have an end tag and tags which do not have an end tag are known as self closing Tag.
<sub> and <sup>:
<sub>tag: This tag is used to render text as subscript<sup>tag: This tag is used to render text as superscript.Example:
<p>H<sub>2</sub>O</p> <p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p><strike> and <del>:
<strike>tag: This tag is used to render text with a strikethrough effect.<del>tag: Similar to<strike>, but it carries a semantic meaning of indicating deleted text.EXAMPLE:
<p>This text is <strike>strikethrough</strike>.</p> <p><del>This text is deleted</del></p>Output:
This text is strikethrough.
This text is deleted<code>:- This tag is used to represent computer code.
Example:
<p>This is an example of <code>code</code> formatting.</p>
<pre>:
- This tag is used to preserve whitespace and line breaks within text. It's commonly used for displaying code blocks.
Example:
<pre>
given text can be print
without any changes</pre>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formatting Tags Sample</title>
</head>
<body>
<p>This is example for <b>bold</b> text. It's <strong>strongly emphasized</strong>.</p>
<p>This is example for <i>italic</i> text. It's <em>emphasized</em>.</p>
<p>This is <u>underlined</u> text.</p>
<p>H<sub>2</sub>O is a chemical formula for water.</p>
<p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup> is the equation of a circle.</p>
<p>This text is <strike>strikethrough</strike> and <del>deleted</del>.</p>
<p>This is an example of <code>inline code</code>.</p>
<pre>
function example() {
console.log("This is a code block.");
}
</pre>
</body>
</html>
