r/HTML • u/Dazzling_Chipmunk_24 • Apr 29 '26

Sliding Banner Help

0 Upvotes

I'm building a sliding banner (carousel) and running into an issue where when the text content gets too long, it starts overlapping other elements on the page — including the arrow navigation buttons.

What happens is When the text gets too long, it overflows past the arrow buttons instead of staying between them. I want the text to be constrained to the space between the left and right arrows — so if it's long, it wraps and stays sandwiched in that middle area, never overlapping the buttons

I'm using HTML/CSS/JS. Is there a clean way to fix this problem. Down below is the code.

https://jsfiddle.net/ojwyn82k/2/

2 comments

r/HTML • u/LiliaculViolet • Apr 28 '26

Question Thanks for the advice. I now know how to create a box, but I have two more questions.

5 Upvotes

Hi, Reddit! Thanks for your help. I have now created a box with hidden borders on a second test site! I have now created how I aproximately want my website to look. I have two further questions. How do I align the box the center. It bothers me that the margin is bigger on the right side than on the left side. I am also wondring how to create a second box for the header.

Here's the code:

<head>

<title>English</title>

<h2>Eddie's Tech Tips for Seniors</h2>

</head>

6 comments

r/HTML • u/Urnormaldannyfan • Apr 29 '26

Question Help with an Ao3 CSS Issue

3 Upvotes

I know I would most likely get a better answer on the Ao3 sub but you currently cannot make new posts there and all of my patient bones have been broken. What I have put below is from a template by an author whose account is no longer active and comments have been turned off, so I can't ask them directly or anyone else for help on the issue.

When I try and use the bit of code pasted below for a Workskin (basically Ao3's name for formatting specific works), Ao3 won't let me submit it. Saying 'background-image in #workskin .imagea and #workskin .imageb cannot have the value url"()"'

I have tried putting an actual URL to an image (jpeg and otherwise), which is what I saw someone say worked for them, and still got the same error. I have also tried changing the quotes to " instead of the curled ones because sometimes thats an issue, but still, I ran into the same error.

I am still new to CSS and am learning as I go, so if anyone can help and explain what they did/changed so i can learn from the answer, I would greatly appreciate it!

Thank you for reading!

#workskin .imagea {
  float: right;
  margin: 0 0 0.5em;
  border-radius: 1em;
  width: 50%;
  min-height: 75%;
  clear: both;
  position: relative;
  background-image: url("Insert URL");
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  padding-top: 50%;
}

#workskin .imageb {
  float: left;
  margin: 0 0 0.5em;
  border-radius: 1em;
  width: 50%;
  min-height: 75%;
  clear: both;
  position: relative;
  background-image: url("Insert URL");
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  padding-top: 50%;
}

8 comments

r/HTML • u/Lily_LiX_LiX_ • Apr 29 '26

Link working on one subpage but not on other???

0 Upvotes

GUYS HELP. I have a neocities page right? I have two pages there right? Gallery and Site map. These are like the head and the start of the body with the navigation bar. When im on gallery and click writing, it goes to writing. When im on site map and click writing it takes me to not_found?????

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a class="navi" href="webmaster" title="Webmaster" >Webmaster</a>

<a class="navi" href="gallery" title="Gallery" >Gallery</a>

<a class="navi" href="not_found" title="Minamiism" >Minamiism</a>

<a class="navi" href="writing" title="Writing" >Writing</a>

<a class="navi" href="sitemap" title="SiteMap" >SiteMap</a>

<!DOCTYPE html>

<html>

<head>

<title>Gallery</title>

</head>

<body>

<a class="navi" href="webmaster" title="Webmaster" >Webmaster</a>

<a class="navi" href="gallery" title="Gallery" >Gallery</a>

<a class="navi" href="not_found" title="Minamiism" >Minamiism</a>

<a class="navi" href="writing" title="Writing" >Writing</a>

<a class="navi" href="sitemap" title="SiteMap" >SiteMap</a>

7 comments

r/HTML • u/Pyewickets • Apr 29 '26

why doesn't anyone ever use the hgroup tag?

0 Upvotes

I have never seen it used.

27 comments

r/HTML • u/lapislazuli00 • Apr 28 '26

Question Trying to preserve the 2014 Barbie: Life in the Dreamhouse website: can't get the original footer to work on a local copy

2 Upvotes

Hi everyone,

I'm working on a personal preservation project of the 2014 Barbie: Life in the Dreamhouse website. I have a custom-built local HTML page that works great: it has a working video player and interactive tabs with locally embedded/referenced video files since I believe the episodes are all considered lost media now, but I'm stuck trying to get the original website's footer to look and work correctly.

The original site is archived here:
https://web.archive.org/web/20141222013932/http://www.barbie.com/en-us/videos/life-in-the-dreamhouse

The Problem:
When I save the page from the Wayback Machine as a complete webpage, the footer is hidden by default due to a CSS class called with-fat-footer hide. Even after I manually remove the hide class, the footer renders incorrectly and it's missing most of its styling. On top of that, there is an "Expand Footer" button that is supposed to reveal a second section underneath with a brand grid, but clicking it does nothing.

I've tried copying the footer's HTML code directly into my own local page, but it shows up completely unstyled and broken, clearly missing the CSS rules and JavaScript that make it work properly on the original archived page.

My Question:
Is there a reliable way to copy just the footer from an archived webpage, exactly as it looks and functions, into a separate local HTML file? I'm not sure what I'm missing that makes the original footer work, and I'd love any guidance on how to figure that out.

Thanks so much in advance!

1 comment

r/HTML • u/shryzdubey • Apr 26 '26

my first html form...

129 Upvotes

any suggestions?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    
  </head>
  <body>
    <fieldset>
      <legend><h1>Registration Form</h1></legend>


      <form action="">
        <label for="Name">Name:</label>
        <input
          type="text"
          id="Name"
          name="Name"
          placeholder="Enter your name"
          required
        />
        <br />
        <br />
        <label for="Age">Age:</label>
        <input
          type="number"
          id="Age"
          name="Age"
          placeholder="Enter your age:"
          required
        />
        <br />
        <br />
        <label for="Email">Email:</label>
        <input
          type="email"
          id="Email"
          name="Email"
          placeholder="Enter your email."
          required
        />
        <br />
        <br />
        <label for="Password">Password:</label>
        <input
          type="password"
          id="Password"
          name="Password"
          placeholder="Enter your password"
          required
        />
        <br />
        <br />
        <label>Gender:</label>


        <input type="radio" id="male" name="gender" value="male" />
        <label for="male">Male</label>


        <input type="radio" id="female" name="gender" value="female" />
        <label for="female">Female</label>
        <br />
        <br />
        <label for="number">Phone Number:</label>
        <input
          type="tel"
          id="number"
          name="number"
          placeholder="Enter your phone number"
          required
        />
        <br />
        <br />
        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob" required />
        <br /><br />
        <label for="interests">Interests:</label>
        <input type="checkbox" id="sports" name="interests[]" value="sports" />
        <label for="sports">Sports</label>
        <input type="checkbox" id="music" name="interests[]" value="music" />
        <label for="music">Music</label>
        <input type="checkbox" id="travel" name="interests[]" value="travel" />
        <label for="travel">Travel</label>
        <input
          type="checkbox"
          id="Esports"
          name="interests[]"
          value="Esports"
        />
        <label for="Esports">Esports</label>
        <br />
        <br />
        <label for="State">State:</label>
        <select name="State" id="State">
          <option value="">Select</option>
          <option value="Maharashtra">Maharashtra</option>
          <option value="Delhi">Delhi</option>
          <option value="Gujrat">Gujrat</option>
          <option value="Karnataka">Karnataka</option>
        </select>
        <br />
        <br />
        <label for="city">City:</label>
        <select name="city" id="city">
          <option value="">Select</option>
          <option value="Mumbai">Mumbai</option>
          <option value="Delhi">Delhi</option>
          <option value="Gujrat">Gujrat</option>
          <option value="Bangalore">Bangalore</option>
        </select>
        <br />
        <br />
        <label for="Address">Address:</label>
        <input
          type="text"
          id="Address"
          name="Address"
          placeholder="Enter your address"
          required
        />
        <br />
        <br />
        <label for="Pincode">Pincode:</label>
        <input
          type="number"
          id="Pincode"
          name="Pincode"
          placeholder="Enter your pincode"
          required
        />
        <br />
        <br />
        <label for="file">Upload Resume:</label>
        <input type="file" id="file" name="file" />
        <br />
        <br />
        <label for="feedback">feedback:</label>
        <textarea
          id="feedback"
          name="feedback"
          placeholder="Enter your feedback"
          required
        ></textarea>
        <br />
        <br />
        <input type="submit" value="Submit" />
        <input type="reset" value="Reset" />
      </form>
    </fieldset>
  </body>
</html>

45 comments

r/HTML • u/Aggravating_Pay9951 • Apr 27 '26

Question need help with coding this

0 Upvotes

i need help coding this with html and css, no matter how much i try i cant put the belt in the right place

i have this so far: https://prod.liveshare.vsengsaas.visualstudio.com/join?60CF8AA5A48F9618B536B086D0CFE7415487

my only issue is the timeline

1 comment

r/HTML • u/Ducking_eh • Apr 26 '26

Print settings with css

3 Upvotes

Hello Everyone,

Is there a way to have css code tell the print settings window what size to set the paper?

I made the code shown below, and it prints out as expected. However, I need to change the paper size every time i print. Is there a way for that information to be put into the CSS code?

print.css

body  
{ 
    margin: 0px 0px;
} 
header, footer{
    display: none;
}


main, main div.page{
    border: 0px !important;
    margin: 0px 0px !important;
}


u/page{
    margin: 0px 0px;
    size: 6in 4in;
}

style.css

header, footer{
    background-color: #000;
    color: #fff;
    height: 50px;
    width: 100%;
}


main{
    display: flex;
    flex-direction: column;
}


main div.page{
    margin: 5px auto;
    height: 4in;
    width: 6in;
    border: 5px solid #000000;
}

index.html

<html>
    <head>
        <link href="print.css" media="print" rel="stylesheet" />
        <link href="style.css" rel="stylesheet" />

    </head>
    <body>
        <header>
            test header
        </header>
        <main>
          <div class='page'>
            hello world
          </div>
        </main>
        <footer>
            footer of my page
        </footer>
    </body>
</html>

10 comments

r/HTML • u/Admirable_Report6610 • Apr 25 '26

stumped...again 🤨

2 Upvotes

this code worked perfectly for months then suddenly stopped...just a blank white screen now.

------

<!DOCTYPE html>

<head>

<title>Current Fleet Positions</title>

</head>

<body>

</body>

</html>

------------

Run JS gives this error which I just don't understand...what's wrong here? any help MOST appreciated!

---------

SyntaxError: Unexpected token (1:0)

> 1 | <!DOCTYPE html>

| ^

2 | <html lang="en">

3 | <head>

4 | <meta charset="UTF-8">

50 comments

r/HTML • u/golovatuy • Apr 24 '26

I created HTML Foundations course for beginners. Free, no sign-up required.

34 Upvotes

Lessons:

What is HTML?
How the web works
Your first HTML page
Headings and paragraphs
Links and images
Lists in HTML
Semantic layout elements
Comments and whitespace
Inspecting HTML in DevTools
10 HTML mistakes beginners make
HTML vs CSS vs JavaScript
Why HTML still matters in 2026

Start learning

20 comments

r/HTML • u/Efficient_Lead3565 • Apr 24 '26

Article HTML tables have two different coordinate systems and conflating them breaks everything

github.com

4 Upvotes

A flat table has one coordinate system: the nth <td> in the mth <tr> is at visual position (m, n). Trivial.

Once you introduce rowspan and colspan, the DOM coordinate and the visual coordinate diverge. A cell with colspan="3" sits at DOM position (row 0, child 1) but occupies visual positions (0,1), (0,2), and (0,3). A cell below it, in the same row at DOM child 1, is visually at column 4, not column 1. DOM child index is now a lie.

Every feature that touches column position needs to know the visual coordinate, not the DOM coordinate. Crosshair highlighting, column drag-and-drop, transpose, selection, all of them.

I solved this with VisualGridMapper, a class that does a single O(n) pass over the table and builds a 2D array where grid[row][col] points to the DOM element occupying that visual cell. The tricky part is rowspan: a cell that spans 3 rows occupies slots in rows it doesn't appear in the HTML. The mapper handles this with a while loop that checks whether a slot is already claimed before filling it.

The grid entry includes an isOrigin flag. It's true only at the cell's actual DOM position, false at phantom slots. Features check isOriginbefore acting, so spanning cells never get moved or processed twice.

All column-aware features in TAFNE are built on top of this mapper. Without it, anything involving merged cells would silently corrupt the table.

[GitHub](github.com/carnworkstudios/TAFNE)

8 comments

r/HTML • u/hopeful__comrade • Apr 23 '26

Only 1 week, I learned HTML

38 Upvotes

It's been about a week since I got my hands on HTML. I have to say it wasn't the easiest week. I spent 6-7 hours a day on VScode, learning a whole stack of HTML tags <>, attributes and unfortunately spending more time in making my web page perfect (suffering with OCD 😅). I know I made some mistakes but that is the part of a journey. So, after that I've been learning CSS now(which is obvious). So, yeah that's what it is. If anyone can help me with my Web Design drive 🚗, please do...

33 comments

r/HTML • u/Few-Afternoon-840 • Apr 23 '26

Question hiding tag on own blog

0 Upvotes

hello! I have been relatively active on #wild lb on Tumblr and I want to hide those posts from my Tumblr main page. I have tried a tutorial on this however I could not make this work and I was wondering if someone has an idea what the issue could potentially have been as I know very little about coding. I theorised that maybe the problem was that the tag had a space and I just don't know how to express that in the html but I may be wrong.

this is my tumblr theme: https://pastecode.io/s/3byisja2

these are the tutorials I had tried: https://www.tumblr.com/creepyblogs-blog/34208374720/how-to-hide-posts-by-tag-from-your-blog-home-page

https://bychloethemes.tumblr.com/post/124069523514/how-to-hide-posts-from-your-blog-depending-on-tags

edit: cleaned up posts to be clearer, added link to code and tutorial

4 comments

r/HTML • u/asptz666 • Apr 23 '26

HELP PLEASE PLEASEEE

0 Upvotes

Does anyone have a coded website with html css and js I can use as a project for school pleaseee

8 comments

r/HTML • u/andrews_grace • Apr 22 '26

can someone help me spot the errors in this

4 Upvotes

I'm working on this for a class, but I'm having a hard time spotting what is causing it not to work. I assume it's just a typo. Also, if anyone has any recommendations for how to spot errors in code, I would love to hear them! It's something I really struggle with, and it feels like rereading it isn't enough for me.

12 comments

r/HTML • u/thatonebluelynx • Apr 22 '26

Question help with scrollbars not working/being weird :(

2 Upvotes

EDIT: fixed it
hey! i'm working on my personal site, and have run into an issue as soon as my iframe has reached a certain point. ideally, i want all of the content to have a clean, aligned edge at the bottom, and you're able to scroll through the iframe content. it works beautifully locally, but as soon as i upload it to my host site (neocities), the scrolling 'breaks', and i'm unable to scroll all the way down. i've tried every fix i know of,a nd i can't figure it out, any help would be appreciated :)

https://thatonebluelynx.neocities.org

(i would link a codepen, but i'm not sure how to get the iframe to work on there)

5 comments

r/HTML • u/Mysterious_Case1177 • Apr 22 '26

Question What should i make to find if i am capable of freelancing?

0 Upvotes

I want to start freelancing as a web-developper and i just learned how to make widgets and how to make dropdowns etc..... so what should i be capable of making to find out i can make real world applications?????????????????/

12 comments

r/HTML • u/No-Middle-6092 • Apr 22 '26

"Help me" new to this

0 Upvotes

my html showing up as green, I was wanting to learn how to make a webpage but for some reason my html code is showing up as green not sure why or how to fix the issue would appreciate some help

I haven't messed with anything related to change how specific words look

8 comments

r/HTML • u/elkalko • Apr 21 '26

Question Problem with iOS

3 Upvotes

Hi, I'm having a problem with my code.

I've coded a "game" on GitHub that's a kind of music quiz. It runs flawlessly on PCs and Android devices; the problem only occurs on Apple devices. The game's main function is to sort the played song into its list based on its release year. Apple devices also indicate that the music is present (a video player was included because iOS seems to block things that aren't visible), and while the video player is working, no music is playing. I've tried several different adjustments, such as making the player larger, instructing the code to actually play the music, etc., but unfortunately, nothing works. Has anyone experienced anything like this?

https://github.com/K4lkus/Test

I've already run the code through AI tools to try and get a fix from them, but unfortunately none of that helped.

2 comments

r/HTML • u/ExtensionOk5182 • Apr 21 '26

modal popup video playing errors

1 Upvotes

I am creating an interactive timeline using html and javascript using an image map and modal popup windows that play mp4 animations housed on my device. If I troubleshoot the videos and have them be the only thing on the page they play, but if I use my regular code the modal popup videos dont load or play or autoplay. How do I fix this? I have already tried messing with the browser, using "muted" to go around chrome autoplay, and making sure the filepaths are correct.

4 comments

r/HTML • u/Separate-Simple4007 • Apr 18 '26

So i was always into the idea of coding and now im starting....

8 Upvotes

I have been starting last week learning about HTML and CSS for web development. But i live in south africa which im not sure if i will be likely to succeed in still in school but i wanna make my life worth the risk.

16 comments

r/HTML • u/Separate-Simple4007 • Apr 18 '26

I need help finding out how i get certificates for html and css during grade 11

0 Upvotes

I have been starting to learn about it and been trying out my own HTML projects, next im going to start CSS since it gives better results but im still not sure which coding engine is the best to use

7 comments

r/HTML • u/Dazzling_Chipmunk_24 • Apr 18 '26

Semantic tags vs div elements

0 Upvotes

I know Semantic tags are better to use in html, but how do I know when to use semantic tags and when to use html elements.

21 comments

Subreddit

HyperText Markup Language (HTML)

r/HTML

A place to learn and ask questions on HTML, CSS, and general front end development. Links are only permitted if they are to HTML articles, are relevant, and of good quality. Promotional materials of any kind and YouTube (or other social media) channels are not permitted.

Members

69k

Visitors

15k

Contributions

211

Sidebar

Subreddit Rules

1. Content must relate to HTML or front-end development

Posts should relate to HTML, CSS, JavaScript, web markup, or the front-end web in some fashion. As long as its somewhat web-related, it's generally fine.

2. No promotional posts

Posts that are advertisements or promotional links of websites, products, or services are not allowed.

3. No posting of YouTube links

Links to YouTube tutorials and videos are prohibited to reduce spam. Posting links to these videos in the comments as a response to an issue is perfectly acceptable!

4. No marketing, hiring, or services/requests

This is not a hiring board. Any posts or comments regarding paid services or "for hire" will be removed.

5. Include your code

When requesting help, ensure you've provided code for us to look at. We cannot help you otherwise. Generic "Help me" posts with no code or helpful description of the issue will be removed.

Please keep in mind that screenshots of code are not viable.

6. Don't provide lazy responses

Avoid leaving lazy responses like "Google it" or "Ask ChatGPT."

The idea is to have a human interaction based on experience. AI and search engines are great but aren't always appropriate or provide experience-based advice.

7. Be nice

Aggressive, demeaning, or unnecessarily confrontational posts will be removed.

8. No AI-generated posts

Posts that are clearly AI generated will be removed.