HTML

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using elements, which are represented by tags.

HTML Introduction

HTML (HyperText Markup Language) is the standard language for creating web pages.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Introduction to HTML</title>
</head>
<body>
    <h1>Welcome to HTML!</h1>
    <p>This is my first HTML page.</p>
</body>
</html>

HTML Editors

You can write HTML in editors like VS Code, Sublime, or Notepad.

Example in VS Code: Create an index.html file and type:

<!DOCTYPE html>
<html>
<body>
    <p>Created with VS Code!</p>
</body>
</html>

HTML Basic

Basic structure includes <!DOCTYPE>, <html>, <head>, and <body>.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Basic HTML</title>
</head>
<body>
    <h1>Basic Page</h1>
    <p>This is a basic HTML structure.</p>
</body>
</html>

HTML Elements

HTML elements include a start tag, content, and an end tag.

Example:

<p>This is a paragraph element.</p>

HTML Attributes

Attributes provide additional information about elements.

Example:

<p style="color:blue;">This paragraph is blue.</p>

HTML Headings

HTML supports headings <h1> to <h6>.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example:

<p>This is a paragraph of text.</p>

HTML Styles

Inline styles can be applied using the style attribute.

Example:

<p style="color: red; font-size: 20px;">Styled paragraph!</p>

HTML Formatting

Formatting tags include <b>, <i>, <u>, and <strong>.

Example:

<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>

HTML Quotations

Use <blockquote> for block quotes and <q> for inline quotes.

Example:

<blockquote>“This is a block quote.”</blockquote>
<p><q>Inline quote</q> inside a paragraph.</p>

HTML Comments

Add comments with .

Example:

<!-- This is a comment -->
<p>This is visible content.</p>

HTML Colors

Define colors using names, HEX, or RGB.

Example:

<p style="color: #ff0000;">This is red text.</p>

HTML CSS

CSS can be added inline, internally, or externally.

Example:

<style>
    p { color: green; }
</style>
<p>Styled using internal CSS.</p>

HTML Links

Links are created using the <a> tag.

Example:

<a href="https://example.com">Visit Example</a>

HTML Images

Images are embedded using <img>.

Example:

<img src="image.jpg" alt="Description of Image">

HTML Favicon

Favicons are added in the <head>.

Example:

<link rel="icon" href="favicon.ico" type="image/x-icon">

HTML Page Title

Set the page title with the <title> tag.

Example:

<head>
    <title>My Page Title</title>
</head>

HTML Tables

Create tables using <table>.

Example:

<table border="1">
    <tr>
        <th>Header 1</th><th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td><td>Data 2</td>
    </tr>
</table>

HTML Lists

Create ordered and unordered lists.

Example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>Step 1</li>
    <li>Step 2</li>
</ol>

HTML Block & Inline

Block elements take up full width, inline elements do not.

Example:

<div>This is block.</div>
<span>This is inline.</span>

HTML Div

Div is a container for grouping.

Example:

<div style="background-color: lightgrey;">
    <p>Inside a div.</p>
</div>

HTML Classes

Use class to group elements.

Example:

<p class="text-green">This is green.</p>
<style>
    .text-green { color: green; }
</style>

HTML Id

The id attribute uniquely identifies an element.

Example:

<p id="intro">Unique paragraph</p>
<style>
    #intro { font-size: 20px; }
</style>

HTML Iframes

Embed another webpage with <iframe>.

Example:

<iframe src="https://example.com" width="300" height="200"></iframe>

HTML JavaScript

Embed JavaScript into HTML.

Example:

<script>
    alert("Hello, world!");
</script>

HTML Forms

Forms collect user input.

Example:

<form>
    <input type="text" placeholder="Enter your name">
    <button type="submit">Submit</button>
</form>

HTML Canvas

Draw graphics using the <canvas> tag.

Example:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

HTML Video

Embed video files.

Example:

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

HTML Audio

Embed audio files.

Example:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

HTML Web Storage

Store data locally using localStorage.

Example:

<script>
    localStorage.setItem("username", "John Doe");
    alert(localStorage.getItem("username"));
</script>

HTML Geolocation

Get the user’s location.

Example:

<script>
    navigator.geolocation.getCurrentPosition(function(position) {
        alert("Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude);
    });
</script>

HTML Drag/Drop

HTML5 provides drag-and-drop functionality using the draggable attribute.

Example:

<p>Drag this text:</p>
<div id="drag" draggable="true" style="width:100px; padding:10px; background-color:lightblue;">
    Drag me!
</div>
<script>
    let drag = document.getElementById("drag");
    drag.addEventListener("dragstart", function(event) {
        event.dataTransfer.setData("text", event.target.id);
    });
</script>

HTML Web Workers

Web Workers allow running scripts in background threads without blocking the page.

Example:

<script>
    let worker = new Worker("worker.js");
    worker.postMessage("Hello Worker!");
    worker.onmessage = function(event) {
        document.body.innerHTML = event.data;
    };
</script>

worker.js:

onmessage = function(event) {
    postMessage("Message from Web Worker: " + event.data);
};

HTML SSE (Server-Sent Events)

SSE allows the server to push updates to the client.

Example:

<script>
    let eventSource = new EventSource("server.php");
    eventSource.onmessage = function(event) {
        document.body.innerHTML += "<p>" + event.data + "</p>";
    };
</script>

server.php (example server code):

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
echo "data: Server time is: " . date('h:i:s') . "\n\n";
flush();
sleep(1);

HTML APIs

APIs integrate advanced functionality into web pages. Examples include geolocation, storage, and drag/drop.

HTML File Paths

File paths determine the location of resources like images, CSS, or JavaScript.

Example:

<img src="images/example.png" alt="Example Image">

Relative Path: images/example.png
Absolute Path: https://example.com/images/example.png

HTML Head

The <head> section contains metadata, links to stylesheets, and scripts.

Example:

<head>
    <meta charset="UTF-8">
    <meta name="description" content="A simple HTML example">
    <title>HTML Head Example</title>
    <link rel="stylesheet" href="styles.css">
</head>

HTML Responsive

Responsive design ensures pages work on different devices using CSS media queries.

Example:

<style>
    body {
        font-size: 16px;
    }
    @media (max-width: 600px) {
        body {
            font-size: 12px;
        }
    }
</style>
<p>Resize the browser window to see responsive text size.</p>

HTML Computercode

Tags like <code>, <pre>, and <kbd> display computer-related content.

Example:

<pre>
<code>
function hello() {
    console.log("Hello, World!");
}
</code>
</pre>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>

HTML Symbols

Use symbols for currency, math, and more.

Example:

<p>Currency: &dollar;100</p>
<p>Pi: &pi; ≈ 3.14</p>

HTML Emojis

HTML supports emojis using Unicode values.

Example:

<p>&#128512; Smile Emoji</p>
<p>&#128151; Heart Emoji</p>

HTML Charsets

Specify the character set using UTF-8 for modern web pages.

Example:

<meta charset="UTF-8">
<p>UTF-8 supports special characters like €, ☺, and ñ.</p>

HTML URL Encode

URL encoding converts characters to a valid format for URLs.

Example:

<a href="https://example.com/search?query=hello%20world">Search</a>

HTML vs. XHTML

HTML is more forgiving, while XHTML requires stricter syntax.

Example XHTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>XHTML Example</title>
</head>
<body>
    <p>This is XHTML.</p>
</body>
</html>

HTML SVG

SVG creates vector graphics.

Example:

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

HTML Media

HTML supports video, audio, and YouTube content.

HTML YouTube

Embed YouTube videos using <iframe>.

Example:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video" allowfullscreen></iframe>

PreviousFront-end Development NextHTML Tips and Tricks

Last updated 1 year ago

hashtagHTML Introduction

hashtagHTML Editors

hashtagHTML Basic

hashtagHTML Elements

hashtagHTML Attributes

hashtagHTML Headings

hashtagHTML Paragraphs

hashtagHTML Styles

hashtagHTML Formatting

hashtagHTML Quotations

hashtagHTML Comments

hashtagHTML Colors

hashtagHTML CSS

hashtagHTML Links

hashtagHTML Images

hashtagHTML Favicon

hashtagHTML Page Title

hashtagHTML Tables

hashtagHTML Lists

hashtagHTML Block & Inline

hashtagHTML Div

hashtagHTML Classes

hashtagHTML Id

hashtagHTML Iframes

hashtagHTML JavaScript

hashtagHTML Forms

hashtagHTML Canvas

hashtagHTML Video

hashtagHTML Audio

hashtagHTML Web Storage

hashtagHTML Geolocation

hashtagHTML Drag/Drop

hashtagHTML Web Workers

hashtagHTML SSE (Server-Sent Events)

hashtagHTML APIs

hashtagHTML File Paths

hashtagHTML Head

hashtagHTML Responsive

hashtagHTML Computercode

hashtagHTML Symbols

hashtagHTML Emojis

hashtagHTML Charsets

hashtagHTML URL Encode

hashtagHTML vs. XHTML

hashtagHTML SVG

hashtagHTML Media

hashtagHTML YouTube

HTML Introduction

HTML Editors

HTML Basic

HTML Elements

HTML Attributes

HTML Headings

HTML Paragraphs

HTML Styles

HTML Formatting

HTML Quotations

HTML Comments

HTML Colors

HTML CSS

HTML Links

HTML Images

HTML Favicon

HTML Page Title

HTML Tables

HTML Lists

HTML Block & Inline

HTML Div

HTML Classes

HTML Id

HTML Iframes

HTML JavaScript

HTML Forms

HTML Canvas

HTML Video

HTML Audio

HTML Web Storage

HTML Geolocation

HTML Drag/Drop

HTML Web Workers

HTML SSE (Server-Sent Events)

HTML APIs

HTML File Paths

HTML Head

HTML Responsive

HTML Computercode

HTML Symbols

HTML Emojis

HTML Charsets

HTML URL Encode

HTML vs. XHTML

HTML SVG

HTML Media

HTML YouTube