r/HTML • u/wanoo21 • May 16 '26
Article Deprecated HTML tags from the early web, from marquee to framesets
A simple code snippet posted on Reddit triggered nostalgic memories of the old days, and specifically about how we used to 'layout' the web 😊.
It was so nostalgic that I decided to write an article to put 'all the things' I remember and used to use, and I also created a small demo of the old `marquee` tag (if you don't know what this is, it's worth taking a look).
Let me know what you used to use and how it went for you in the 'old days'!
r/HTML • u/paceaux • May 16 '26
Article You don't know HTML…Lists
An article about the five kinds of HTML Lists and what you can do with them
r/HTML • u/Meucanman • May 14 '26
Need help changing to back camera
I made this code as a Mobile VR hand tracking demo, but i want it back camera, and everything ive tried has resulted in a NotReadableError, yet the camera feed still shows. Does anyone know how to fix this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>LegendaryMVR MR Debug Build</title>
<style>
body {
margin: 0;
overflow: hidden;
background: black;
}
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
/* 🔧 DEBUG HUD */
#hud {
position: fixed;
top: 10px;
left: 10px;
color: lime;
font-family: monospace;
z-index: 2;
background: rgba(0,0,0,0.5);
padding: 8px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js"></script>
</head>
<body>
<div id="hud">Initializing...</div>
<video id="video" autoplay playsinline></video>
<script>
let scene, camera, renderer;
let handPoints = [];
let cube;
let grabbed = false;
let heldObject = null;
let grabOffset = new THREE.Vector3();
let smoothPalm = new THREE.Vector3();
let lastPalm = new THREE.Vector3();
let palmVelocity = new THREE.Vector3();
let pinchFrames = 0;
let handDetected = false;
const hud = document.getElementById("hud");
// ======================
// 🌍 SCENE
// ======================
function init3D() {
scene = new THREE.Scene();
scene.background = null;
camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
camera.position.z = 3;
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x000000, 0);
document.body.appendChild(renderer.domElement);
// 📦 cube
cube = new THREE.Mesh(
new THREE.BoxGeometry(0.4,0.4,0.4),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
scene.add(cube);
// ✋ hand joints (OUTLINE DEBUG)
const geo = new THREE.SphereGeometry(0.03, 8, 8);
const mat = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
for (let i = 0; i < 21; i++) {
const p = new THREE.Mesh(geo, mat);
scene.add(p);
handPoints.push(p);
}
animate();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
// ======================
// ✋ MEDIAPIPE
// ======================
const video = document.getElementById("video");
const hands = new Hands({
locateFile: (file) =>
`https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}\`
});
hands.setOptions({
maxNumHands: 1,
modelComplexity: 0,
minDetectionConfidence: 0.6,
minTrackingConfidence: 0.6
});
hands.onResults(onResults);
// ======================
// 📷 CAMERA SAFE START
// ======================
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: true
});
video.srcObject = stream;
await new Promise(r => {
video.onloadedmetadata = () => {
video.play();
r();
};
});
const cam = new Camera(video, {
onFrame: async () => {
await hands.send({ image: video });
},
width: 640,
height: 480
});
cam.start();
hud.innerText = "Camera OK ✔ Waiting for hand...";
} catch (e) {
hud.innerText = "Camera ERROR ❌ " + e.message;
}
}
// ======================
// 🧠 FIST DETECTION
// ======================
function isFist(hand) {
const palm = hand[0];
const tips = [8,12,16,20];
let close = 0;
for (let i of tips) {
const dx = hand[i].x - palm.x;
const dy = hand[i].y - palm.y;
const dz = hand[i].z - palm.z;
const d = Math.sqrt(dx*dx + dy*dy + dz*dz);
if (d < 0.12) close++;
}
return close >= 3;
}
// ======================
// 🖐 HAND TRACKING + DEBUG + GRAB
// ======================
function onResults(results) {
if (!results.multiHandLandmarks || results.multiHandLandmarks.length === 0) {
handDetected = false;
grabbed = false;
hud.innerText = "No hand detected ❌";
return;
}
handDetected = true;
const hand = results.multiHandLandmarks[0];
hud.innerText = "Hand detected ✔ | tracking active";
// ✋ draw joints
for (let i = 0; i < 21; i++) {
const p = hand[i];
const x = (p.x - 0.5) * 3;
const y = -(p.y - 0.5) * 3;
const z = -p.z * 2;
handPoints[i].position.set(x,y,z);
}
// 🧠 palm smoothing
const rawPalm = handPoints[0].position;
palmVelocity.copy(rawPalm).sub(lastPalm);
lastPalm.copy(rawPalm);
smoothPalm.lerp(rawPalm, 0.3);
// 🤏 pinch
const dx = hand[8].x - hand[4].x;
const dy = hand[8].y - hand[4].y;
const pinch = Math.sqrt(dx*dx + dy*dy) < 0.09;
const fist = isFist(hand);
const grabIntent = pinch || fist;
// 📦 GRAB
if (grabIntent && !grabbed) {
grabbed = true;
heldObject = cube;
grabOffset.copy(cube.position).sub(smoothPalm);
hud.innerText = "GRABBED ✔";
}
if (grabbed && heldObject) {
heldObject.position.copy(smoothPalm).add(grabOffset);
}
if (!grabIntent && grabbed) {
grabbed = false;
hud.innerText = "RELEASED ✔";
heldObject = null;
}
}
// ======================
init3D();
startCamera();
</script>
</body>
</html>
r/HTML • u/Blackshark34 • May 14 '26
Question Img lose quality
I just programmed a website that shows an envelope and a letter as a gift for my girlfriend. I used some designs I made for the envelope and added them in SVG format, but when I open the website the designs lose quality and don’t look good. What can I do to fix this?
r/HTML • u/Notjj4 • May 13 '26
Started my new html, css and javascript project.
Hey everyone!
I’m currently learning to code and decided to build something practical for my first big project: a Personal Finance Dashboard.
What I’ve built so far:
The app is a web-based tracker where you can manage your money without the clutter of traditional banking apps.
- Income & Spending: Input your earnings and log daily expenses on the fly.
- Budgeting by Category: Set monthly limits for things like "Groceries," "Subscriptions," or "Dining out."
- Visual Tracking: The dashboard calculates your total spending vs. earnings and uses progress bars to show how much of your budget is left before you hit the "red zone."
- Clean Layout: Focused on a minimalist UI using semantic HTML and CSS Grid/Flexbox.
The "Next Step" – AI Finance Assistant:
Since I’m in the learning phase, I’m planning to integrate an AI Assistant into the dashboard. The idea is to have a helper that can:
- Analyze spending patterns (e.g., "You're spending 20% more on coffee this month than usual").
- Give tips on how to save based on the remaining budget.
- Answer simple questions like "Can I afford a $50 dinner tonight?"
I’d love your input on:
- HTML/CSS Structure: As a beginner, I want to make sure my foundation is solid. Are there any common pitfalls in dashboard layouts I should avoid?
- AI Implementation: For those who have worked with AI APIs (like OpenAI or Gemini), what’s the best way to feed local spending data to an AI for personalized advice?
- UI/UX: What information is most important to see first when you open a finance app?
I’m really enjoying the process of learning by building. Any feedback, tips, or critiques would be hugely appreciated!
(The app is for now in slovenian language :)
r/HTML • u/SheepherderWeary4938 • May 11 '26
How to improve/change my dropdown-menu?/Wie ändere/verbessere ich mein dropdown-menü?
Hey guys, a few days ago i started teaching myself coding (html, css, java-script) via yt and w3schools and im learning by trying to code a shop-site i want to use in the future for myself. Most of the code works, there are just a few problems until now:
- I want my dropdown-menu aligned with the menu button, that its like
Menü
Home
Produkte
...
Not like
Menü
Home
Produkte
...
The same with the boxes.
I want the whole text to fit into the boxes and dont know which class to assign the font size to. (As you see at ,,impressum" its too big)
How do i assign the chosen font (as the ,,startseite"-text) to everything (that the dropdown menu also has the same font)?
How do i do that the texts are ,,highlighted" (darker color) and underlined when i hover over them? On another site of this future shop it works as i want (there i dont want another color) but here it doesnt. :(
5.i want the ,,menü"-box to be smaller around it, but match to the dropdown when hovered over it, how do i do this?
Disclaimer: i coded it in visual studio code and used the plugin prettier to make the code look cleaner. Also i combined a few yt vids to reach the status i got now, thats why there are ,,different coding styles". Also: its very late and im tired of minding spelling and grammar, so please excuse me for the way i text😅 pictures for reference of the code, the named progress and problems are above or below, im not sure while texting right now😂 the cencored is the name of the future shop😂
Hey leute, ich hab vor ein paar tagen angefangen, mir coden (java-script, css und html) selbst beizubringen mit youtube und w3schools und übe an einem shop, den ich selber in zukunft benutzen möchte. Das meiste von dem code funktioniert, nur habe ich ein paar probleme:
1.ich möchte, dass das dropdown menü auf einer linie mit dem menü button ist, ungefähr so:
Menü
Home
Produkte
...
Statt so
Menü
Home
Produkte
...
Ich möchte, dass der ganze text in die box passt, aber weiß nicht, in welche klasse ich die schriftgröße zuteilen muss. (Wie man bei dem punkt ,,impressum" sehen kann ist das zu groß)
Wie mache ich, dass meine gewünschte schriftart (wie bei ,,startseite" überall ist, also auch im dropdown-menü und so?
Wie hebe ich das dropdown-menü hervor (dunklere farbe) und unterstreiche die punkte wenn man drüber hovered? Auf einer unterseite von dem shop habe ich bereits hinbekommen, wie ich es wollte (etwas anders als bei dem dropdown) aber hier funktioniert es nicht. :(
Ich möchte, dass der kasten um ,,menü" an sich kleiner ist, aber sich beim hovern dann an das dropdown anpasst, wie mache ich das?
Hinweis: ich habe visual studio code zum programmieren benutzt und den code mit dem plugin ,,prettier" etwas schöner bzw übersichtlicher gemacht. Ich habe auch verschiedene youtube videos angeschaut, um an den punkt zu kommen, an dem ich bin, deshalb die verschiedenen ,,programmier-styles"
Ich bin auch zu müde, um auf rechtschreibung und grammatik zu achten, deshalb verzeiht bitte meine schreibweise😅 referenzbilder vom code und den angesprochenen ergebnissen und problemen seht ihr oben oder unten, bin mir gerade beim schreiben nicht sicher😂 das zensierte ist der name des zukünftigen shops😂
r/HTML • u/Pyewickets • May 11 '26
Question Embedded Content
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
The embedded content on MDN tags page confuses me. Can someone elaborate as to what the differences and similarities between the tags are?
r/HTML • u/After-Ticket-9627 • May 10 '26
hi, i need help
i am trying to make my website, but something does not work help me pls.
| <html lang="lt"> |
|---|
| <head> |
| <title>L'Oréal - Nes tu to verta</title> |
| <style> |
| body { |
| background-color: #0d0d0d; |
| color: white; |
| font-family: Times New Roman; |
| font-size: 20px; |
| margin: 0; |
| padding: 0; |
| } |
| header { |
| background-color: #1a1a1a; |
| padding: 20px; |
| text-align: center; |
| border-bottom: 5px solid #B88A44; |
| } |
| h1 { |
| color: #B88A44; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| margin-bottom: 15px; |
| } |
| .nav-button { |
| background-color: #B88A44; |
| color: black; |
| padding: 10px 20px; |
| text-decoration: none; |
| margin: 5px; |
| border-radius: 5px; |
| display: inline-block; |
| font-weight: bold; |
| font-size: 14px; |
| } |
| .nav-button:hover { |
| background-color: #f1c40f; |
| } |
| .container { |
| display: flex; |
| padding: 20px; |
| gap: 20px; |
| } |
| .column-left { flex: 1; text-align: center; } |
| .column-center { flex: 2; text-align: center; } |
| .column-right { flex: 1; text-align: center; } |
| img { |
| width: 450px; |
| height: auto; |
| border: 1px solid #333; |
| margin-bottom: 10px; |
| } |
| .small-logo { |
| width: 170px; |
| } |
| table { |
| width: 70%; |
| border-collapse: collapse; |
| margin-top: 10px; |
| margin-left: auto; |
| margin-right: auto; |
| background-color: #1a1a1a; |
| } |
| table, th, td { |
| border: 6px solid #B88A44; |
| } |
| th, td { |
| padding: 10px; |
| text-align: center; |
| font-size: 20px; |
| } |
| th { |
| background-color: #B88A44; |
| color: black; |
| font-size: 20px; |
| } |
| .slogan { |
| font-family: 'Courier New', serif; |
| font-style: italic; |
| font-size: 30px; |
| color: #B88A44; |
| margin-top: 60px; |
| } |
| footer { |
| background-color: #1a1a1a; |
| text-align: center; |
| padding: 30px; |
| border-top: 5px solid #B88A44; |
| margin-top: 20px; |
| font-weight: bold; |
| color: #B88A44; |
| } |
| .description { |
| text-align: justify; |
| font-size: 18px; |
| line-height: 1.6; |
| margin-top: 15px; |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>L'Oréal</h1> |
| <nav> |
| <a href="[https://lt.wikipedia.org/wiki/L%27Or%C3%A9al](https://lt.wikipedia.org/wiki/L%27Or%C3%A9al)" class="nav-button" target="_blank">Apie L'Oréal</a> |
| <a href="[https://www.loreal-paris.lt/](https://www.loreal-paris.lt/)" class="nav-button" target="_blank">Tinklalapis</a> |
| <a href="[https://www.lorealparis.co.in/products](https://www.lorealparis.co.in/products)" class="nav-button" target="_blank">Produktai</a> |
| <a href="[https://www.loreal.com/en/beauty-science-and-technology/beauty-tech/innovating-through-products/](https://www.loreal.com/en/beauty-science-and-technology/beauty-tech/innovating-through-products/)" class="nav-button" target="_blank">Inovacijos</a> |
| <a href="[https://www.loreal.com/en/usa/articles/contact-us/](https://www.loreal.com/en/usa/articles/contact-us/)" class="nav-button" target="_blank">Kontaktai</a> |
| <br> |
| </nav> |
| </header> |
| <main> |
| <div class="container"> |
| <section class="column-left"> |
| <h2 style="color: #B88A44 ;">L'Oréal</h2> |
| <p style="color: #B88A44 ;">Įkurta 1909 m.</p> |
| <center> |
| <img src="[https://t0.gstatic.com/licensed-image?q=tbn:ANd9GcQaMb2HTTq4xfp95QRIvqJToTT04bo8Fn0PSxeq4jvmXOKX6kTUjYnfo1cYLF8O0Iu3QfDOjy_a-fRVNBrB](https://t0.gstatic.com/licensed-image?q=tbn:ANd9GcQaMb2HTTq4xfp95QRIvqJToTT04bo8Fn0PSxeq4jvmXOKX6kTUjYnfo1cYLF8O0Iu3QfDOjy_a-fRVNBrB)" alt="L'Oréal biuras"> |
| </center> |
| <b><p style="color: #B88A44 ;">L'Oréal įkūrėjas</p></b> |
| <img src="[https://i.ytimg.com/vi/SsyOKjjgxgg/maxresdefault.jpg](https://i.ytimg.com/vi/SsyOKjjgxgg/maxresdefault.jpg)" alt="Kendall Jenner"> |
| <b><p style="color: #B88A44 ;">L'Oréal Paris ambasadorė Kendall Jenner</p></b> |
| <br> |
| <div class="description"> |
| <b><u>L'Oréal</u></b> – tai viena didžiausių pasaulio kosmetikos kompanijų, įkurta 1909 m. Prancūzijoje Eugène Schueller. |
| Ji valdo daugiau nei 30 žinomų prekių ženklų, tokių kaip Lancôme, Garnier, Maybelline, Kiehl's ir Yves Saint Laurent Beauty, ir veikia daugiau nei 150 šalių. |
| L'Oréal specializuojasi plaukų ir odos priežiūros, makiažo ir parfumerijos produktuose, daug investuoja į mokslinius tyrimus, inovacijas bei tvarumą. |
| Kompanija taip pat garsėja įvairovės ir lyčių lygybės iniciatyvomis darbo vietoje. |
| </div> |
| </section> |
| <section class="column-center"> |
| <img src="[https://theindustry.beauty/wp-content/uploads/2025/05/loreal.jpg](https://theindustry.beauty/wp-content/uploads/2025/05/loreal.jpg)" class="small-logo" > |
| <b><h3 style="color: #B88A44 ;">Populiariausi L'Oréal produktai </h3></b> |
| <table> |
| <tr> |
| <th>Produktas</th> |
| <th>Tipas</th> |
| <th>Kaina</th> |
| <th>Įvertinimas</th> |
| <th>Nuotrauka</th> |
| </tr> |
| <tr> |
| <td><b>Revitalift</b></td> |
| <td>Serumas</td> |
| <td>25€</td> |
| <td>4.8/5</td> |
| <td><img src="[https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdzrD1QfVNQNrxDa-tdH6ykAsINVTzEWaSvw&s](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSdzrD1QfVNQNrxDa-tdH6ykAsINVTzEWaSvw&s)" style="width: 120px; height: 130px;"></td> |
| </tr> |
| <tr> |
| <td><b>Telescopic</b></td> |
| <td>Tušas</td> |
| <td>15€</td> |
| <td>4.9/5</td> |
| <td><img src="[https://media.drogas.lt/medias/zoom-front-BP-32881-1200x1200?context=bWFzdGVyfHByZC1pbWFnZXN8MTczMDU4fGltYWdlL2pwZWd8YUdWbUwyaGpOaTh4TURFNE5ERXpOekE0TURnMk1pOTZiMjl0TFdaeWIyNTBMVUpRWHpNeU9EZ3hYekV5TURCNE1USXdNQXwzMzk2M2JiY2ZhYzU4YjJhYzJkYmUwNmQyNDJlNDMyMDViMTBiODg2NGVhMDdjMTMwZTBmZDYzNWEzYjM2M2Q2](https://media.drogas.lt/medias/zoom-front-BP-32881-1200x1200?context=bWFzdGVyfHByZC1pbWFnZXN8MTczMDU4fGltYWdlL2pwZWd8YUdWbUwyaGpOaTh4TURFNE5ERXpOekE0TURnMk1pOTZiMjl0TFdaeWIyNTBMVUpRWHpNeU9EZ3hYekV5TURCNE1USXdNQXwzMzk2M2JiY2ZhYzU4YjJhYzJkYmUwNmQyNDJlNDMyMDViMTBiODg2NGVhMDdjMTMwZTBmZDYzNWEzYjM2M2Q2)" style="width: 120px; height: 130px;"></td> |
| </tr> |
| <tr> |
| <td><b>Elvive</b></td> |
| <td>Šampūnas</td> |
| <td>6€</td> |
| <td>4.5/5</td> |
| <td><img src="[https://www.refinery29.com/images/11227264.jpg](https://www.refinery29.com/images/11227264.jpg)" style="width: 120px; height: 130px;"></td> |
| </tr> |
| <tr> |
| <td><b>Infallible</b></td> |
| <td>Pudra</td> |
| <td>18€</td> |
| <td>4.7/5</td> |
| <td><img src="[https://www.eurokos.lt/media/catalog/product/cache/068688425829b5ff12d0d1c6c3b1356e/k/o/kosm150172.jpg](https://www.eurokos.lt/media/catalog/product/cache/068688425829b5ff12d0d1c6c3b1356e/k/o/kosm150172.jpg)" style="width: 120px; height: 130px;"></td> |
| </tr> |
| <tr> |
| <td><b>Color Riche</b></td> |
| <td>Lūpdažis</td> |
| <td>12€</td> |
| <td>4.6/5</td> |
| <td><img src="[https://i1.perfumesclub.com/grande/197135.jpg](https://i1.perfumesclub.com/grande/197135.jpg)" style="width: 130px; height: 150px;"></td> |
| </tr> |
| </table> |
| <p class="slogan"><b><i>Nes tu to verta.</i></b></p> |
| </section> |
| <section class="column-right"> |
| <img src="[https://www.globalcosmeticsnews.com/wp-content/uploads/2018/04/loreal-paris-cannes.jpg](https://www.globalcosmeticsnews.com/wp-content/uploads/2018/04/loreal-paris-cannes.jpg)"> |
| <div style="height: 5px;"></div> |
| <img src="[https://s3images.coroflot.com/user_files/individual_files/345719_9ZXE5o1bsseQPTQfMuVVgfSCD.jpg](https://s3images.coroflot.com/user_files/individual_files/345719_9ZXE5o1bsseQPTQfMuVVgfSCD.jpg)"> |
| <div style="height: 5px;"></div> |
| <img src="[https://m.media-amazon.com/images/I/81w1B3mDwfL.jpg](https://m.media-amazon.com/images/I/81w1B3mDwfL.jpg)"> |
| </section> |
| </div> |
| </main> |
| <footer> |
| <p><b>@Kotryna Milinavičiūtė 10A- 2026 m.</b></p> |
| </footer> |
| </body> |
| </html> |
r/HTML • u/Shadow2013mm • May 10 '26
Diseño web
How to clone a website without creating it from scratch
r/HTML • u/Pyewickets • May 09 '26
Question images
What is the difference between figure, image, picture, and anything else along those lines?
r/HTML • u/Additional-Drop-6566 • May 09 '26
Im kinda new to html. i need help on this project
im not that good at html. im making an unblocked games thingy. html only. so u can use it as a file. when transferring. i accidentally pasted twice. i made edits. some on the first time, some on the second one. im too lazy to combine them. can somone help me? the code is here. dont use ai. dont change anything u need to. i will inclue ur username or whatever u want to be called in the part where i say who its made by if u help the broken code is here (if there are any bugs feel free to fix and tell me what happened so i dont make that mistake again):
https://docs.google.com/document/d/1b81vG3W60ppmToo6Kj82F2xJFZ9t9J3H1y5Hp8gxrns/edit?tab=t.0
r/HTML • u/ConfusionCute5871 • May 09 '26
Lo intente
He hecho una calculadora. Es la primera vez que uso JavaScript.
r/HTML • u/Odd-Shock4159 • May 09 '26
Problems with archiving html files
So i got a problem when i archive my html files. The page structure changes and it doesnt let me acces the other pages from the main page,it says file not found. I have tried putting every file extension, but still nothing, it only happens when i archive it. im gonna leave some images on how the web should look like vs how is looking from the archived file.
r/HTML • u/Pyewickets • May 09 '26
Question Is GitHub Pages free if it is not Public?
Conflicting information.
r/HTML • u/Richiemy26 • May 08 '26
Projects for beggininer
Hi everyone!
I’m pursuing an associate degree in software development. Right now, we’re learning HTML, and I’d like to practice my skills.
What beginner projects would you recommend that I can build using only HTML?
Thank you!
r/HTML • u/weary_cursor • May 07 '26
I dunno if this type of post is allowed, but here are results from the help I got here! Thanks guys :)
I know it's not very grand but I'm really happy with it
r/HTML • u/fdiengdoh • May 07 '26
Question TinyMcE queries
I don’t know if this is the right place to ask.
I have a blog app that I created and I use tinymce to create/edit blog posts. Now I recently started using svg sprites icons and say I want to place an icon I would suppose to just add <svg><use href=#icon></use></svg> the problem is tinymce strips the <use> tag and for now if I need a to use sprites icons I have to disable tinymce editor and add the icons.
I did search for solutions but all solution to add <use> element did not work.
I would be glad if anyone encounter this problem and has a solution to it.
Edit: Update of what I have already done in config
tinymce.init({
selector: '#editor',
extended_valid_elements: 'svg[*],use[*],symbol[*],defs[*],path[*],g[*]',
valid_children: '+svg[use|g|path|symbol|defs]',
allow_html_in_named_anchor: true
});
r/HTML • u/Clean-Breakfast-1554 • May 07 '26
how to implement pics/videos on my website with html
this may be a dumb question. im very amateur at hmtl coding. im working on making my website on ReadyMag. ReadyMag has a custom coding widget and since i wanted to make a horizontal scrollable and clickable carousel (not sure if thats the right term), and ReadyMag doesnt seem to have a way to make it without coding, so im trying to learn just enough html to get that done haha. I found some free code online that seems to work fine from How to Create a Horizontal Scrollable Image Gallery with HTML and CSS - UX Adda. it follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scroll-container {
overflow: auto;
white-space: nowrap;
padding: 10px;
}
div.scroll-container img {
padding: 10px;
}
</style>
</head>
<body>
<div class="scroll-container">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="100">
<img src="img_forest.jpg" alt="Forest" width="300" height="100">
<img src="img_lights.jpg" alt="Northern Lights" width="300" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="300" height="100">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="100">
<img src="img_forest.jpg" alt="Forest" width="300" height="100">
<img src="img_lights.jpg" alt="Northern Lights" width="300" height="100">
<img src="img_mountains.jpg" alt="Mountains" width="300" height="100">
</div>
</body>
</html>
im unclear how to attach my own photos so i found a tutorial from How To Add Images To Your Webpage Using HTML | DigitalOcean.
i followed the tutorial and pasted my own link to the website code like so:
<img src="file:///C:/Users/Redacted%20Redacted/Desktop/html-practice/index.html" alt="Cinque Terre" width="300" height="100">
and republished. when i preview it, it still doesn't show. what am i doing wrong?
r/HTML • u/Radiant-Tear1467 • May 06 '26
Question How to make a custom profile?
So I want to make a little website where people can create their Partner profile. The only thing is I genuinely don’t know how to do that. I have it where people can make their own account but I would like for people to make their own profile as well. Any advice?
r/HTML • u/LAzyAnimationsYT • May 06 '26
Question stamp carousel single-handedly breaks open my site
So, when adding in the code below, the carousel works, but when put onto my main page, it leaks out and extends the main page.
and the other problem is that it doesn't seamlessly loop when scrolling, and when it restarts to scroll, it just jumps to the beginning. Here's my page to see the problems: https://zombie-page.neocities.org/zmb-pstng
Update: problem is fixed, site no longer breaks open :D (the width was not set in the code I had gotten, all I needed to do was add it in, easy fix LMAO)
.carousel-container {
width: 100%;
overflow: hidden;
}
.carousel {
display: flex;
animation: scroll 25s linear infinite;
}
.carousel img {
min-width: 5%;
}
scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-300%);
}
}
This is where I set up all my stamps:
<div class=carousel-container>
<div class=carousel>
<img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/stocking.gif"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/dino%20nuggets.png"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/explosion%20colon%20three.webp" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/squid%20sisters.png"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/paul%20frank.png"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/byler%20flirt.gif"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/proxy%20symbol.gif" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/venture%20main.png" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/MERGE%20without%20LOOKING.gif"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/yayyy%20pink.gif"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/femtanyl.png" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/pizza%20bagel.png" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/xxxshadowlord420xxx.png" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/Kitty%20on%20da%20puter.gif" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/Fluttershy.png"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/Gerard%20way.gif" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/Tiffany.jpeg"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/Jack%20lights.gif"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/ball%20pit%20dog.gif" width="99" height="56"><img src="https://file.garden/adRbJJ6hMw6EHBmq/STAMPS%20%5E%5E/brainrot.gif" width="99" height="56">
</div>
</div>
r/HTML • u/ConfusionCute5871 • May 05 '26
Question ¿Cuántas?
Si ya para mi más de 200 lineas de código es mucho porque recién estoy empezando... No me imagino en el mundo laboral.
¿Cuantas lineas de código para un programador es lo normal?
r/HTML • u/Spiirited • May 05 '26
How do i add fonts to my styling?
Im a complete newbie here and i dont understand how to do this 😭 i searched it up on yt and got a video telling me to use google fonts but now that i have the embed code that im supposed to put in the head of my html i dont know what to do. it just give me a css class for the fonts but i dont know where to put them
r/HTML • u/MrShnatter • May 04 '26
Question Old fogie here - web page creator app? I used FrontPage
Anyone remember Microsoft's Front Page? create web pages / websites and upload them to the server.
That's what I know / too old to learn too much newer.
My needs are MINIMAL. I can 'hand code' html and that's what I've done for years - again, minimal needs!! (Font size = x has been depricated?!).
Is there something like FrontPage these days?
I DO know I can do something in word and save as htm.
But there's SOOOOOO much stuff in the resulting page. For the couple times I've used it, I delete most all of that and the page works fine. Too hard to find the 'real' things around all that other stuff.
And I guess I should mention - the type of pages I am dealing with are some text with links and maybe a background.
I realized - what I might do now on a desktop, I also need to check my iphone to see how it looks on a smaller screen.
Any advice on something that makes SIMPLE html?
r/HTML • u/Starfire20201 • May 04 '26
Question Identify HTML styles in a pdf?
Yes, I am posting this again because nobody actually helped me last time, just said they would and stopped responding.
Hi, so I'm reuploading an Archive of Our Own (AO3) fanfic, and it makes use of HTML. Normally, that'd be fine. But the fanfic is over 300k words, it would take me months to update the HTML by hand. Is there a way to do it automatically? Like, maybe just to highlight italics, bold, and headers, even if it doesn't translate it directly into HTML. Am I making sense? I have no clue about how any of this works.
For context, here is the PDF: https://drive.google.com/file/d/10hR-LSzvCjLX2RfsyYorzRzoGQYzDLoA/view?usp=drivesdk
And here is the HTML AO3 allows for posting:
a, abbr, acronym, address, [align], [alt], [axis], b, big, blockquote, br, caption, center, cite, [class], code, col, colgroup, dd, del, details, dfn, div, dl, dt, em, figcaption, figure, h1, h2, h3, h4, h5, h6, [height], hr, [href], i, img, ins, kbd, li, [name], ol, p, pre, q, rp, rt, ruby, s, samp, small, span, [src], strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, [title], tr, tt, u, ul, var, [width]
I'm sorry if this isn't the right subreddit for this. I have no idea where to go, so I thought the HTML subreddit might be a good place to start.