DEV Community

Ranjith srt
Ranjith srt

Posted on

MERN - Html (Day 2) 

1. HTML Structure
Enter fullscreen mode Exit fullscreen mode

An HTML document has a basic structure that includes important tags to define the webpage.

Basic HTML Structure
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode 
Explanation:
Enter fullscreen mode Exit fullscreen mode 
<!DOCTYPE html> – Tells the browser that this is an HTML5 document.
<html> – The root element that contains the entire webpage.
<head> – Contains metadata (like title, styles, and links).
<title> – The webpage title (seen on the browser tab).
<body> – Contains the visible content of the webpage.
<h1> and <p> – Header and paragraph tags used to display text.
Enter fullscreen mode Exit fullscreen mode 
2. <meta> Tag (Metadata)
Enter fullscreen mode Exit fullscreen mode

The <meta> tag provides extra information to the browser, such as character set, page description, and viewport settings.

Examples of <meta> Tags
Enter fullscreen mode Exit fullscreen mode 
 <head>
    <meta charset="UTF-8">  <!-- Defines character encoding -->
    <meta name="description" content="This is a sample webpage">  <!-- Page description -->
    <meta name="keywords" content="HTML, Web Development">  <!-- Search keywords -->
    <meta name="author" content="Your Name">  <!-- Author of the webpage -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Makes page responsive -->
</head>
✅ Note: The <meta> tag is self-closing (does not need a closing tag).
Enter fullscreen mode Exit fullscreen mode

HTML Structure:

<!DOCTYPE html> – Declares HTML5.
<html lang="en"> – Specifies language (English).
<head> – Contains metadata (title, description, viewport).
<body> – Contains visible content.
Enter fullscreen mode Exit fullscreen mode 
Meta Tags:
Enter fullscreen mode Exit fullscreen mode 
meta charset="UTF-8" – Supports all characters.
meta name="viewport" – Makes the page responsive.
meta name="description" – Describes your blog.
meta name="keywords" – Helps with SEO.
meta name="author" – Displays the author's name.
Enter fullscreen mode Exit fullscreen mode 
3. Text Formatting Tags
Enter fullscreen mode Exit fullscreen mode

Text formatting tags help style text, such as making it bold, italic, underlined, etc.

Tag Description Example
<b> Bold text   <b>Bold</b> → Bold
<i> Italic text <i>Italic</i> → Italic
<u> Underline text  <u>Underlined</u> → <u>Underlined</u>
<mark>  Highlight text  <mark>Highlighted</mark> → <mark>Highlighted</mark>
<s> Strikethrough text  <s>Strikethrough</s> → Strikethrough
<strong>    Strong importance (bold)    <strong>Important</strong> → Important
<em>    Emphasized (italic) <em>Emphasized</em> → Emphasized
<sup>   Superscript x<sup>2</sup> → x²
<sub>   Subscript   H<sub>2</sub>O → H₂O
<small> Small text  <small>Small text</small> → Small text
<del>   Deleted text    <del>Deleted</del> → Deleted
Enter fullscreen mode Exit fullscreen mode

Image description

Image description

Image description

4. Example Using Text Formatting Tags
Enter fullscreen mode Exit fullscreen mode 
 <!DOCTYPE html>
<html>
<head>
    <title>Text Formatting Example</title>
</head>
<body>
    <h1>Text Formatting in HTML</h1>
    <p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>
    <p>This is <mark>highlighted</mark> and <s>strikethrough</s> text.</p>
    <p>Water formula: H<sub>2</sub>O and Math equation: x<sup>2</sup></p>
    <p><small>This is small text.</small> <strong>This is strong text.</strong></p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Image description

Top comments (0)