Full HTML In Just 5-MINUTES

HTML in 5 Minutes: Quick Guide

HTML (HyperText Markup Language) is the foundation of web development. It structures web pages using tags.

HTML Basic Tags with Their Uses

HTML (HyperText Markup Language) uses various tags to structure web pages. Below is a list of basic HTML tags with their uses.

1. Structure Tags

Tag Use

`<!DOCTYPE html>` Declares the document type and version of HTML

`<html>` Defines the root of an HTML document

`<head>` Contains metadata and links to styles/scripts

`<title>` Sets the title of the web page (shown on browser tab)

`<body>` Contains all the visible content of a webpage

Tag	Use
`<!DOCTYPE html>`	Declares the document type and version of HTML
`<html>`	Defines the root of an HTML document
`<head>`	Contains metadata and links to styles/scripts
`<title>`	Sets the title of the web page (shown on browser tab)
`<body>`	Contains all the visible content of a webpage

2. Heading & Text Tags

Tag Use

`<h1> to <h6>` Defines headings (h1 is the largest, h6 is the smallest)

`<p>` Defines a paragraph

`<br>` Inserts a line break

`<hr>` Inserts a horizontal line

`<b>` Makes text bold

`<i>` Makes text italic

`<u>` Underlines the text

`<strong>` Indicates important/bold text

`<em>` Indicates emphasized/italic text

`<mark>` Highlights text

`<small>` Displays smaller text

`<del>` Shows deleted text with a strikethrough

`<ins>` Represents inserted text (underlined)

Tag	Use
`<h1> to <h6>`	Defines headings (h1 is the largest, h6 is the smallest)
`<p>`	Defines a paragraph
`<br>`	Inserts a line break
`<hr>`	Inserts a horizontal line
`<b>`	Makes text bold
`<i>`	Makes text italic
`<u>`	Underlines the text
`<strong>`	Indicates important/bold text
`<em>`	Indicates emphasized/italic text
`<mark>`	Highlights text
`<small>`	Displays smaller text
`<del>`	Shows deleted text with a strikethrough
`<ins>`	Represents inserted text (underlined)

3. Links & Media Tags

Tag Use

`<a href="URL">` Creates a hyperlink

`<img src="image.jpg" alt="description">` Displays an image

`<video controls>` Embeds a video

`<audio controls>` Embeds an audio file

`<iframe>` Embeds another webpage into the current page

Tag	Use
`<a href="URL">`	Creates a hyperlink
`<img src="image.jpg" alt="description">`	Displays an image
`<video controls>`	Embeds a video
`<audio controls>`	Embeds an audio file
`<iframe>`	Embeds another webpage into the current page

4. Lists Tags

Tag Use

`<ul>` Defines an unordered list (bullets)

`<ol>` Defines an ordered list (numbers)

`<li>` Defines a list item inside `<ul>` or `<ol>`

`<dl>` Defines a description list

`<dt>` Defines a term in a description list

`<dd>` Defines a description of the term

Tag	Use
`<ul>`	Defines an unordered list (bullets)
`<ol>`	Defines an ordered list (numbers)
`<li>`	Defines a list item inside `<ul>` or `<ol>`
`<dl>`	Defines a description list
`<dt>`	Defines a term in a description list
`<dd>`	Defines a description of the term

5. Table Tags

Tag Use

`<table>` Creates a table

`<tr>` Defines a row in a table

`<th>` Defines a header cell in a table

`<td>` Defines a data cell in a table

`<caption>` Adds a title to the table

Tag	Use
`<table>`	Creates a table
`<tr>`	Defines a row in a table
`<th>`	Defines a header cell in a table
`<td>`	Defines a data cell in a table
`<caption>`	Adds a title to the table

6. Forms & Input Tags

Tag Use

`<form>` Creates a form for user input

`<input>` Creates an input field

`<textarea>` Defines a multi-line text input field

`<button>` Defines a clickable button

`<label>` Labels an input field

`<select>` Creates a dropdown list

`<option>` Defines an option in a dropdown list

`<fieldset>` Groups form elements together

`<legend>` Defines a title for a fieldset

Tag	Use
`<form>`	Creates a form for user input
`<input>`	Creates an input field
`<textarea>`	Defines a multi-line text input field
`<button>`	Defines a clickable button
`<label>`	Labels an input field
`<select>`	Creates a dropdown list
`<option>`	Defines an option in a dropdown list
`<fieldset>`	Groups form elements together
`<legend>`	Defines a title for a fieldset

7. Semantic HTML Tags

Tag Use

`<header>` Defines the header section of a webpage

`<nav>` Defines a navigation section

`<section>` Defines a section in a document

`<article>` Defines an independent article

`<aside>` Defines content aside from the main content

`<footer>` Defines the footer of a webpage

`<main>` Specifies the main content of a document

Tag	Use
`<header>`	Defines the header section of a webpage
`<nav>`	Defines a navigation section
`<section>`	Defines a section in a document
`<article>`	Defines an independent article
`<aside>`	Defines content aside from the main content
`<footer>`	Defines the footer of a webpage
`<main>`	Specifies the main content of a document

8. Inline & Block Elements

Element Type Example Tags

Block Elements `<div>`, `<p>`, `<h1>`-`<h6>`, `<section>`

Inline Elements `<span>`, `<a>`, `<b>`, `<i>`

Element Type	Example Tags
Block Elements	`<div>`, `<p>`, `<h1>`-`<h6>`, `<section>`
Inline Elements	`<span>`, `<a>`, `<b>`, `<i>`

9. Meta Tags

Tag Use

`<meta charset="UTF-8">` Defines character encoding

`<meta name="viewport" content="width=device-width, initial-scale=1.0">` Sets the viewport for responsiveness

`<meta name="description" content="Page description">` Provides a short page description

`<meta name="keywords" content="HTML, CSS, JavaScript">` Defines keywords for search engines

`<meta name="author" content="Your Name">` Specifies the author's name

Tag	Use
`<meta charset="UTF-8">`	Defines character encoding
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	Sets the viewport for responsiveness
`<meta name="description" content="Page description">`	Provides a short page description
`<meta name="keywords" content="HTML, CSS, JavaScript">`	Defines keywords for search engines
`<meta name="author" content="Your Name">`	Specifies the author's name

10. Miscellaneous Tags

Tag Use

`<div>` Defines a division or section

`<span>` Defines a small section within a line

`<script>` Embeds JavaScript code

`<style>` Embeds CSS code

`` Adds comments in the code

This guide covers all the basic HTML tags with their uses! 🚀 Happy coding!

Tag	Use
`<div>`	Defines a division or section
`<span>`	Defines a small section within a line
`<script>`	Embeds JavaScript code
`<style>`	Embeds CSS code
`<!-- Comment -->`	Adds comments in the code

1. Basic HTML Structure

Every HTML page follows this structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first webpage.</p>
</body>
</html>

2. Essential HTML Tags

Tag	Purpose
`<h1> to <h6>`	Headings (h1 = biggest, h6 = smallest)
`<p>`	Paragraph
`<a href="URL">`	Hyperlink
`<img src="image.jpg" alt="description">`	Image
`<ul>` & `<li>`	Unordered list (bullets)
`<ol>` & `<li>`	Ordered list (numbers)
`<table>`	Table structure
`<input>`	Input field
`<form>`	Form for user input

3. Example with Links & Images

<a href="https://example.com">Click Me</a>
<img src="image.jpg" alt="Sample Image">

4. Forms & Input Fields

<form>
    <input type="text" placeholder="Enter Name">
    <input type="submit" value="Submit">
</form>

5. Inline vs Block Elements

Block elements: Take full width (e.g., <div>, <p>, <h1>)
Inline elements: Take only necessary space (e.g., <a>, <span>, <img>)

6. HTML Comments

<!-- This is a comment -->

7. Embedding a Video

<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

8. Best Practices

✅ Always close tags
✅ Use meaningful tags
✅ Structure your page properly

Now, you know HTML basics in just 5 minutes! 🎯

Happy Coding! 🚀

How to Add Fonts in HTML

There are 3 main ways to add fonts in HTML:

Using Default Web-Safe Fonts
Using Google Fonts (External)
Using Custom Fonts (CSS @font-face)

1. Using Default Web-Safe Fonts

Web-safe fonts are pre-installed on most devices. Example:

<p style="font-family: Arial, sans-serif;">This is a text in Arial.</p>

Common Web-Safe Fonts

Font Name	Font-Family
Arial	`Arial, sans-serif`
Verdana	`Verdana, sans-serif`
Times New Roman	`Times New Roman, serif`
Georgia	`Georgia, serif`
Courier New	`Courier New, monospace`
Comic Sans MS	`Comic Sans MS, cursive`

2. Using Google Fonts (External)

Google Fonts provides stylish, free fonts.

Steps to Add Google Fonts:

Go to Google Fonts
Select a font and copy the <link> tag
Paste it in the <head> section of your HTML
Apply it using CSS

Example: Adding "Poppins" Font

<!-- Step 1: Add Google Font Link in <head> -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

<!-- Step 2: Apply the Font in CSS -->
<style>
    body {
        font-family: 'Poppins', sans-serif;
    }
</style>

<p>This text is in Poppins font.</p>

3. Using Custom Fonts (CSS @font-face)

If you have a custom font file, you can use the @font-face rule.

Steps to Add a Custom Font:

Download the font (e.g., MyFont.ttf)
Save it in your project folder
Use @font-face in CSS

Example: Adding a Custom Font

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyFont.ttf') format('truetype');
}

p {
    font-family: 'MyCustomFont', sans-serif;
}

📌 Supported Font Formats:

.ttf (TrueType Font)
.otf (OpenType Font)
.woff (Web Open Font Format)
.woff2 (Compressed Web Open Font)

Font Styling in CSS

You can style fonts using these properties:

p {
    font-size: 18px;  /* Text size */
    font-weight: bold; /* Light, Normal, Bold */
    font-style: italic; /* Normal, Italic */
    text-transform: uppercase; /* Uppercase, lowercase, capitalize */
    text-decoration: underline; /* Underline, overline, line-through */
    letter-spacing: 2px; /* Space between letters */
    word-spacing: 5px; /* Space between words */
    line-height: 1.5; /* Space between lines */
}

🎯 Summary

✔ Use Web-Safe Fonts for compatibility
✔ Use Google Fonts for stylish text
✔ Use Custom Fonts for uniqueness

🚀 Now you can add and style fonts in HTML like a pro!