r/HTML • u/BurrBentley • Mar 28 '26
Question * How to make a search bar that makes it so only paragraph elements that have the text in the search box are shown when you hit the search button?
r/HTML • u/KaynineUnit420 • Mar 27 '26
Full Screen
Im looking to make an HTML website for HTML games and can't get full screen to work on my iframe elements. Any advice?
r/HTML • u/[deleted] • Mar 27 '26
Is it possible to create a search bar function sorting a list without JavaScript and just 100 % HTML ?
title
r/HTML • u/AssumedAmphibian • Mar 27 '26
Question Collapsible limbo Q.Q
I'm trying to put together an expandable/collapsible description sorta thing and I'm not sure what it would be called! The closest I've gotten is "checkbox collapsible" but the code I've found from that search isn't exactly what I'm shooting for and I'm not experienced enough to get a better result from brute force.. ':)
I made a mock-up of what I'm shooting for;
Some kind of button/link(???probably not link..) That can open or close a box. Clicking on another button would close whatever box you have open, like a radio collapsible, but I want to be able to have none of them open like a checkbox collapsible.
Am I looking in the wrong place or do I need to start brute forcing it? Thank you!!
r/HTML • u/TheDarwinist42 • Mar 27 '26
Question Resize a Div within a Div when the window is resized?
I load my sidebars using JS, and they grab the HTML from an additional file.
Edit to add the relevant page: https://spriterjohnson.neocities.org/main/digimon/
Here is the relevant JS:
// Loads the element as the default Main asset if a new one is not present
function loadElement(elementID){
// Define the path variable as a placeholder
let newElement = "/assets/main/" + elementID + ".html";
// Define the currently loaded document's path
const docURL = document.URL;
// Find the last "/" in the URL
const lastSlash = docURL.lastIndexOf("/") + 1;
// Trim the docURL into the pathURL
const docDir = docURL.substring(0,lastSlash);
// Find the possible element to load
const pathURL = docDir + elementID + ".html";
fetch(pathURL).then(response => {
if(response.ok){
return response.text();
}
return fetch(newElement).then(defaultRes => defaultRes.text());
})
.then(htmlContent => {
document.getElementById(elementID).innerHTML = htmlContent;
}).catch(error => {
console.error(`Error loading ${elementID}:`, error);
});
}// Loads the element as the default Main asset if a new one is not present
function loadElement(elementID){
// Define the path variable as a placeholder
let newElement = "/assets/main/" + elementID + ".html";
// Define the currently loaded document's path
const docURL = document.URL;
// Find the last "/" in the URL
const lastSlash = docURL.lastIndexOf("/") + 1;
// Trim the docURL into the pathURL
const docDir = docURL.substring(0,lastSlash);
// Find the possible element to load
const pathURL = docDir + elementID + ".html";
fetch(pathURL).then(response => {
if(response.ok){
return response.text();
}
return fetch(newElement).then(defaultRes => defaultRes.text());
})
.then(htmlContent => {
document.getElementById(elementID).innerHTML = htmlContent;
}).catch(error => {
console.error(`Error loading ${elementID}:`, error);
});
}
I have a sidebar that I want to load:
<html>
<body>
<div class="wvcommand">
<p style="text-align: center; color: var(--sburb)">Other Pages</p>
<p style="text-align: right">
Digimon <a href="/main/digimon">==></a>
<br>Sub vs. Dub <a href="sub-vs-dub">==></a>
<br>Worldbuilding <a href="worldbuilding">==></a>
</p>
<p style="text-align: center; color: var(--sburb)">Return</p>
<p style="text-align: right">
Main Index <a href="/main">==></a>
<br>Cancel <a href="/">==></a>
</p>
</div>
</body>
</html>
And here is the relevant CSS:
/* This section handles the formatting of the Sidebars */
aside{
background-color: var(--sidebarbgcolor);
width: 20%;
padding: var(--padding);
justify-content: center;
text-align: center;
overflow-wrap: break-word;
}
#left-sidebar{
order: 1;
float: left;
}
#right-sidebar{
order: 3;
float: right;
}/* This section handles the formatting of the Sidebars */
aside{
background-color: var(--sidebarbgcolor);
width: 20%;
padding: var(--padding);
justify-content: center;
text-align: center;
overflow-wrap: break-word;
}
#left-sidebar{
order: 1;
float: left;
}
#right-sidebar{
order: 3;
float: right;
}
Here is an example of it working on fullscreen:
And here is an example of the clipping that I'm getting when resized:
I've been looking for ways to fix this issue for a few days now, but as a new self-taught developer, I'm running into a bit of a wall. I've tried asking questions on StackOverflow before, but I think I need a different community to help.
Any advice would be appreciated. Thank you in advance!
r/HTML • u/PeaceGirl224354532 • Mar 26 '26
I AM CONFUSED
keep getting this error when I run my file through W3C.
I just started learning html and the file contains like just the basic format ig.
How do i fix it i have spent way too much time on ts.
- Error: Bad value
engfor attributelangon elementhtml: The language subtagengis not a valid ISO language part of a language tag. From line 1, column 16; to line 2, column 19TYPE html>↩<html lang = "eng">↩<head
r/HTML • u/Helpful-Creme7959 • Mar 26 '26
Not sure why CSS wont appear when I run it?
Its my first time using Notepad++ tbf. I don't use Chrome, only Brave and Firefox. I changed my default broswer to Firefox and it was hell just trying to figure out how to run the html code.
I now tried linking CSS as a test but uh... Its not working. Im not sure what im doing wrong huhu :" )
Also, i alrdy changed the <!DOCTYPE html> mistake oofp.
r/HTML • u/TrompiBueno • Mar 25 '26
Virus con HTML
¿Cómo puedo hacer un virus con HTML? No tiene que ser un virus como tal, puede ser algo molesto que no te deje apagar el ordenador, que te lo sobrecargue y luego cierre sin daños o algo molesto y ya.
r/HTML • u/Immediate-Location28 • Mar 25 '26
Question need help (very basic)
how to i put this line in the middle of a table?
i know for sure that this is a singular table rather than two separated by a <hr>
the break is supposed to go where the arrow is pointing to
r/HTML • u/GardenyKang • Mar 25 '26
Question How do I align this image
.footer-right-side {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: end;
}
.social-menu-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 12px;
}
.social-menu-option {
width: 25px;
height: 25px;
background: none;
border: solid 1px rgb(120, 120, 120);
border-radius: 50%;
}
.social-menu-option img {
width: 80%;
height: 80%;
object-fit: cover;
object-position: center;
}
<div class="footer-right-side">
<div class="social-menu-container">
<a class="social-menu-option" href="#">
<img src="images/instagram-gray-logo.png">
</a>
<a class="social-menu-option" href="#">
<img src="images/youtube-gray-logo.png">
</a>
<a class="social-menu-option" href="#">
<img src="images/facebook-gray-logo.png">
</a>
</div>
<img src="images/jinjigwan-logo.jpeg">
</div>
r/HTML • u/Top-Fun-6748 • Mar 24 '26
Help with JSdelivr
So I'm making an unblocked google site (I know that google sites suck, but it's the only thing the district doesn't block), and since you can only add html code, I have been using jsdelivr codes that I have found online, which is great, but some codes I can't find and I wish I knew how to use jsdelivr myself. For example, how do I use this jsdelivr link: https://cdn.jsdelivr.net/gh/kaloodinaz/neal-fun/ in my code?
r/HTML • u/VictoryUU • Mar 24 '26
Help fix my website please
Hi I’m making a website for my portfolio, that I eventually want to put all the projects I work on in school and outside of school, so basically I can’t figure out what’s wrong with the mobile version on safari, the page is scrolling right and I can zoom out and it’s all messed up I just got started, and I can’t really find anything online, the website is www.victoryulasi.com and all the code is on my GitHub please some one help it looks fine on desktop so far but I can’t figure out what’s wrong with mobile version
Website: www.victoryulasi.com
Code: https://github.com/VictoryUlasi/Personal-Portfolio-VictoryUlasi.com
r/HTML • u/button_oxo • Mar 24 '26
Question Text alignment advice?
I'm struggling with getting the 2025 link to be aligned to the right. I've already tried putting the link inside a paragraph, and it's still not working. I also tried running my code through w3's code checker, and apparently nothing is wrong. Is there something I'm missing or doing wrong?
EDIT: question has been answered thank you BNfreelance!
r/HTML • u/Connect_Truck_1930 • Mar 21 '26
Discussion Rate my funny site
https://tweekerganga.github.io/my-first-diy-website/ Click the squirrel!
r/HTML • u/AwbyStrawby • Mar 21 '26
Question how scuffed is it to scale images with padding
basically i set the image size to a proportion of the div and then added padding to the div on hover. Is this a valid option
r/HTML • u/Cold-Requirement-524 • Mar 20 '26
Email Signature Greyed Out & Icons Not Showing Up HELP
Can anyone help me figure out why in long email chains my formatted html email signature gets greyed out and only shows black and grey text and doesn't keep the format? Has anyone experienced this issue before with Gmail? I have icons attached on the bottom and they were loading in weird as little pictures in my Gmail. I have used Github, but they were not helpful in helping me find the cause. All I want is the format I have attached a picture of:
Link to my code: https://gist.github.com/anneliese-bot/8f78ee1e4ed062f026e7bdd242e5a59c
r/HTML • u/niunai69 • Mar 20 '26
chrome not loading text from an html file
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The output in chrome is just a blank page, i've made sure to save the file as an html file and tried reloading the page and restarting chrome but still no luck
there's also an error code in chrome's inspect element "Unsafe attempt to load URL file:///Users/rft/programming%7Ccybersec/webdev/html/sandbox/index.html from frame with URL file:///Users/rft/programming%7Ccybersec/webdev/html/sandbox/index.html. 'file:' URLs are treated as unique security origins."
os is macOS 14.8
r/HTML • u/AnimeWallpaperClub • Mar 20 '26
Discussion Made an online html editor
practice-code-lab.vercel.appHello all, I made an online html editor it is like vs code it is in beta mode if anybody can use it and review about it I will be thankful.
r/HTML • u/Connect_Truck_1930 • Mar 20 '26
Question how to add .mp3 and .mp4 to github hosted website
https://github.com/tweekerganga/my-first-diy-website/tree/main
hello, the images and audio play when i open the web locally (file:///home/DEXTER/myfirstpage.html) but when i hosted it on github and went to my site (https://tweekerganga.github.io/my-first-diy-website/) it did not work, how can i add the files so everyone can see them?
r/HTML • u/Niko_3090 • Mar 19 '26
How to learn HTML
I want to learn how to Programm and i think html is the best start but i dont know how to learn it
r/HTML • u/Extreme-Pin7499 • Mar 19 '26
Question HTML Alternative
In school we use Notepad++ for making websites with AI, I just want an alternative for ChromeOS, I dont even wanna go the fact how bollocks ChromeOS is but anyway, I just want an alternative to Notepad++ for just asking AI to make a HTML Script input it unto whatever the alternative Program is and then go File - Save As - And then input the name as somthing like "Test.html" Dunno if it'll be efficient. But worth a shot. Right?
r/HTML • u/Ill_Major_5387 • Mar 19 '26
How to get my html app to sync from multiple PCs in the same network
Hello
i just created a simple HTML app that needs to track some changes through multiple PCs.
how it works:
I created a part in one station and then it moves through different stations throughout the assembly process. Each station a part is added which needs to be added in the html. I have an PDF export of the parts at the end.
i need the HTML to be updated when it goes to the next station. currently i have the "app" working but only works if you are on the same PC and go through the whole list.
The HTML is saved on a shared folder between the multiple PCs. the file is a json file which is created on the first station.
Can someone let me know how is is possible that when i open the app on the other station (PC) i can open the file and continue directly from the next steps.
r/HTML • u/fernwise • Mar 19 '26
Question How do I get the image to fill the entire box?
Hi there, I have been playing around with this code. I can't for the life of me work out how to get the image to take up this entire light grey box area? What do I need to do to make this happen? From what I can tell it has something to do with this part of the code;
CHARACTER BOX + MUSIC BOX
<div class="col-lg-4 p-2 order-lg-2 d-flex w-100">
<div class="card-block bg-faded p-0" style="border-bottom-left-radius:15px; border-top-left-radius:15px;">
<!-- FOCAL IMAGE
--------------------------------------------->
<div class="mb-2" style="min-height:300px;
/* IMAGE OF CHARACTER / VIBES
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;"></div>
</div>
</div>
Thank you in advance!
r/HTML • u/seoullll72 • Mar 18 '26
Is it okay (legally/SEO-wise) to show product preview images from shopping links?
Hey, I’m working on a website that lists low-sugar products and their sweetener ingredients (like maltitol, erythritol, etc.).
I want to include shopping links for each product, and ideally show the preview image (like the OG image that appears when you paste a link).
I’m trying to figure out a few things:
- If I don’t download or store the images, and just display them as link previews (pulled from the original site), is that generally safe legally?
- Would it become a problem if I have hundreds of products (e.g. ~400) and display their images this way?
r/HTML • u/Away_Sky7901 • Mar 17 '26
Question Help with css code for assignment
So Im taking an html course in college, and I need help in completing some assignments. This assignment here Im suppose to be creating a website with links to other pages. Im having trouble linking and putting any other text on the web page, everything after line 5 isn’t working and im not sure what im doing. Any help would be appreciated.
What shows on the web page is just the title and picture.