HTML is a markup language,meaning it uses tags and attributes to define the structure and content of a webpage.It was developed by Tim Berners-Lee in the early 1990s and has since evolved into an essential technology for web development. HTML works alongside CSS (Cascading Style Sheets) and JavaScript, which add style and functionality to websites, respectively.
The Basic Structure of an HTML Document :
An HTML document follows a standard structure that all webpages share. Here’s a simple example of an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first webpage.</p>
</body>
</html>
Key HTML Tags and Their Functions:
HTML uses tags to structure content.Tags are enclosed in angle brackets
(< >).Most tags come in pairs,with an opening tag(e.g.,<h1>) and a closing tag (e.g.,</h1>). Here are some of the most commonly used HTML tags:
a. Headings (<h1>to<h6>): Headings define the importance and hierarchy of text. <h1> is the most important heading, and <h6> is the least important.
<h1>Main Heading</h1>
<h2>Subheading</h2>
b. Paragraph (<p>): A paragraph tag is used to define blocks of text.
<p>This is a paragraph of text.</p>
c. Links (<a>): The anchor tag is used to create hyperlinks, allowing users to navigate to other pages or websites.
<a href="https://www.google.com/">Click here to visit Google.com</a>
d. Images (<img>): The image tag embeds images into the webpage.It requires a src attribute that specifies the image file location.
<img src="image.jpg" alt="Description of the image">
e. Bold text (<b>): b tag is used to represent bold text with respect to its surrounding text.
<b>This text is bold.</b>
f. Bold text (<strong>):The HTML element defines text with strong importance. The content inside is typically displayed in bold.
<strong>This text is important!</strong>
g. italic (<i> and <em>):The i tag is use to make the text italic,and em tag is also use to make the text italic but search engine understand it better.
<i>This text is italic</i>
<em>This text is emphasized</em>
h. <del> - Deleted Text:
The <del> tag represents text that has been deleted from a document. It is typically rendered with a strikethrough (line through the text) to visually indicate the removal of the text.
<p>This is <del>old</del> new text.</p>
i. <ins> - Inserted Text:
The <ins> tag is used to represent text that has been inserted into a document. This text is often displayed with an underline to indicate it is newly added.
<p>This is <ins>new</ins> text.</p>
j. <u> - Underlined Text:
The <u> tag is used to underline text. However, it is generally used for styling purposes and should be avoided for semantic meaning, as modern CSS can handle underlining more effectively.
<p>This is <u>underlined</u> text.</p>
k. <sup> - Superscript Text:
The <sup> tag is used to display text in superscript, making it appear slightly above the normal line of text. This is commonly used for mathematical exponents or footnotes.
<p>(a+b)<sup>2</sup>.</p>
l. <sub> - Subscript Text:
The <sub> tag is used to display text in subscript, making it appear slightly below the normal line of text. This is often used for chemical formulas or other scientific notations.
<p>The chemical formula for water is H<sub>2</sub>O.</p>
m. <mark>- Marked or Highlighted Text:
The <mark> tag is used to highlight text, typically for emphasis. This tag is often used when indicating a search result or highlighting important text. It is usually rendered with a yellow background.
<p>This is a <mark>highlighted</mark> text.</p>
n. <br> - Line Break:
The <br> tag is used to create a line break within a block of text. It does not require a closing tag. This tag is commonly used for poetry, addresses, or other content where line breaks are needed.
<p>This is the first line.<br>This is the second line.</p>
o. <hr> - Horizontal Rule:
The <hr> tag is used to create a horizontal line (or rule) across the page. It is often used to separate sections of content and is typically displayed as a thick, horizontal line.
The <hr> tag is used to create a horizontal line (or rule) across the page. It is often used to separate sections of content and is typically displayed as a thick, horizontal line.
p. <kbd> - Keyboard Input:
The <kbd> tag is used to represent user input that would typically come from a keyboard. The text within this tag is often displayed in a monospaced font, making it easy to distinguish keyboard inputs from other content.
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
q.<pre> - Preformatted Text:
The <pre> tag is used to display preformatted text, preserving both whitespace and line breaks exactly as written in the HTML code. This is useful for displaying code snippets, poems, or text that requires precise formatting.
<pre>
This is preformatted
text.
It preserves spaces and
line breaks exactly.
</pre>
r. <code> - Inline Code:
The <code> tag is used to display a piece of inline code, often within a paragraph or other text content. It typically uses a monospaced font to distinguish it from regular text.
<p>The <code>print()</code> function is used to display output in Python.</p>
s. HTML Comments:
You can add comments to your HTML code, which are ignored by browsers but useful for explaining the code to yourself or others. Comments are written between <!-- and --> tags:
<!-- This is a comment -->
These tags help structure content in meaningful ways, enhancing readability and providing context for the user. Understanding how and when to use them can improve your web pages' accessibility and user experience.
Top comments (0)