#html attribute

[anomalouscorvid]

how did you go about doing the navigation links on your neocities? it's really neat!

MY NEOCITIES... i really need to add more to that. every so often i remember it exists. anyway

the sidebar and main text, first of all, are two containers in the simplest possible flexbox container (the css for it just has 'display: flex' and nothing else). very useful, i love flexbox. if you haven't used it before, i'd recommend looking into it! loads of examples and guides out there. (there's also css grid, but i've never used it)

the navigation itself in the html is very simple, basically a list of links.. not actually a list, just separate 'paragraphs'. (which i have to update on every page every time i add/rename/remove another page..) additional thought: i think mayyybe if i used a flexbox container for the links themselves it'd be easier to make it so the navigation turns horizontal (and along the top) instead of vertical when the screen is small enough? or something with inline blocks maybe. i haven't gotten around to trying any of that though

back on topic, the symbol before each link and the translucent 'label' on hover is from the css, like this

so basically the 'label' sticking out is, like, an offset background? and also the current page link gets a custom class that gives it the same formatting as the hover text

i think that's everything, i'm not great at actually explaining how i did stuff so i hope this is helpful haha

[psychogeniccircuits]

HTML Attributes

Attribute: special words used inside the opening tag of an element to control the element's behavior.

src - added after an <img> to indicate the image's url

{{ under construction }}

[jcmarchi]

HTML Email Accessibility Report 2025

New Post has been published on https://thedigitalinsider.com/html-email-accessibility-report-2025/

HTML Email Accessibility Report 2025

Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its 2025 study on the accessibility in HTML emails, and the TL;DR is not totally dissimilar from what we heard from WebAIM’s annual web report:

This is the third full year for this report and we are disappointed to see the same issues as we have in previous years. The top 10 issues haven’t changed order since last year, apart from the addition of color contrast, which can be put down to a change in the testing and reporting.

The results come from an analysis of 443,585 emails collected from the past year. According to EMC, only 21 emails passed all accessibility checks — and they were all written by the same author representing two different brands. And, further, that author represents one of the companies that not only sponsors the study, but develops the automated testing tool powering the analysis.

Automated testing is the key here. That’s needed for a project looking at hundreds of thousands of emails, but it won’t surface everything, as noted:

Email that pass our checks may still have accessibility issues that we cannot pick up through automated testing. For example, we check if an alt attribute is present on an image, but we do not check if the text is suitable for that image in the context of that message.

The most common issues relate to internationalization, like leaving out the lang (96% of emails) and dir (98% of emails) attributes. But you’ll be familiar with most of what rounds up the top 10, because it lines up with WebAIM’s findings:

Links must have discernible text

Element has insufficient color contrast

Images must have alternate text

Link text should be descriptive

Links must be distinguishable without relying on color

I appreciate that the report sheds a light on what accessibility features are supported by specific email clients, such as Gmail. The report outlines a set of 20 HTML, CSS, and ARIA features they look for and found that only one email client (SFR Mail?) of the 44 evaluated supports all of the features. Apple Mail and Samsung Email are apparently close behind, but the other 41? Not so much.

AilSo, yeah. Email has a ways to go, like a small microcosm of the web itself.

Direct Link →

[not-a-choice]

Hot take digital accessibility is actually not that hard to do well if you're writing good HTML in the first place

[gagande]

PureCode company | Attributes and Their Importance

Attributes, on the other hand, provide additional information about HTML elements. They allow for customization and control over the elements’ behavior and appearance. 

[mypatrolobservation]

HTML - Attributes

HTML attributes can be used to change the color, size, and other features of HTML elements.  HTML attributes are additional information or properties that can be added to HTML elements to define their characteristics or provide extra details about them. Attributes are used to modify the behavior or appearance of HTML elements, and they are typically specified within the opening tag of an element.

Here's a basic syntax of an HTML element with attributes:

<element attribute1="value1" attribute2="value2">Content</element>

[respectthepetty]

How to credit GIFs

I know there are other posts around this hellsite of how to do this, but because @khaotunq made this amazing post, I wanted to remind some of you of how to include a GIF that credits the original post/creator even if the GIF does not appear in the GIF options.

Option #1:

Step #1 - If you know which GIF you want to use, find the post its from, and click the three little dots to bring up the menu. Click "Copy Link"

Now, in your own post, click the "GIF" button

Step #2 - When the next box appears, paste the link you just copied in it.

Step #3 - The GIF should appear, so click it, and it will insert the GIF with credit to the original post and creator.

HOWEVER, it will only insert the first GIF in the post, so if you want a different GIF in the post, you have to make a small change.

Option #2:

Step #1 - Do everything in Option #1. EVERYTHING! Now, once you have inserted the GIF into your post, it will be the first GIF in the original post as stated in Option #1.

Step #2 - Click the wheel at the top of your post

Step #3 - Once you do that a menu box will appear, and where it says "Text Editor," switch from "Rich text" to "HTML"

Step #4 - It might look scary now, but have no fear! Hit "Ctrl +F" to find what you need! Type "attribution" and it will locate the GIF for you.

Step #5 - After "attribution" is the GIF's link that you copied earlier in quotes. Look for it!

Step #6 - Now, in another window, go back to the original post with all the GIFs and find the GIF you want. Once you see it, right-click on the GIF, and when the menu pops up, select "Copy Image Link"

Step #7 - You will paste that new link into your post in the same spot the other link was within the quotes. In other words, replace the highlighted yellow part with the new link.

Step #8 - Click the little wheel at the top again and select "Rich text" to switch back to your normal viewing mode.

The new GIF will appear!

It seems overwhelming, but once you get the hang of it, it's easy peasy. And if you think this process is too time-consuming, remember that this is nothing compared to how much work GIF makers put into creating these GIFs for us.

Tumblr is actually very user-friendly with some practice, so do our community a favor and be friendly to the people who put in the effort.

[apod]

2025 February 19

HH 30: A Star System with Planets Now Forming Image Credit: James Webb Space Telescope, ESA, NASA & CSA, R. Tazaki et al.

Explanation: How do stars and planets form? New clues have been found in the protoplanetary system Herbig-Haro 30 by the James Webb Space Telescope in concert with Hubble and the Earth-bound ALMA. The observations show, among other things, that large dust grains are more concentrated into a central disk where they can form planets. The featured image from Webb shows many attributes of the active HH-30 system. Jets of particles are being expelled vertically, shown in red, while a dark dust-rich disk is seen across the center, blocking the light from the star or stars still forming there. Blue-reflecting dust is seen in a parabolic arc above and below the central disk, although why a tail appears on the lower left is currently unknown. Studying how planets form in HH 30 can help astronomers better understand how planets in our own Solar System once formed, including our Earth.

∞ Source: apod.nasa.gov/apod/ap250219.html

[ghostgoing]

hi tech #2

Tim and Tucker are working on some code together Danny, passing by: have you considered adding a value attribute to your object tag? Tim: this is C++ Fenton! And even if I were working in html, you can’t use value with object! Danny leaning towards screen: I mean you’ve got object right there points at screen Tim: Tucker[weary]: he’s trolling you Tim: Shut the fuck up Fenton! Danny: (smirks) you can’t make me Tim swivels his chair, grabs Danny by the shirt, pulls him down and kisses him hard. He releases Danny and swivels back to the project as though nothing has happened Tucker meeting Danny’s eyes behind Tim’s back: *wiggles his eyebrows* Danny:(mouths) what the fuck Tucker: *wiggles his eyebrows again* Danny’s phone rings. Danny: Hey Jazz! Danny: yeah I’ll be there in five

several minutes later….

Tucker, grabbing Tim’s shoulder: (scream whisper) DUDE YOU KISSED HIM Tim: (panicked) I KNOW!

EDIT: I have written a different version of this post here

[jcmarchi]

This Isn’t Supposed to Happen: Troubleshooting the Impossible

New Post has been published on https://thedigitalinsider.com/this-isnt-supposed-to-happen-troubleshooting-the-impossible/

This Isn’t Supposed to Happen: Troubleshooting the Impossible

I recently rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all…

The browser parses and runs JavaScript, right? Maybe Chrome will handle something a little different from Firefox, but if the same code is on two different servers it should work the same in Chrome (or Firefox) no matter which server you look at, right? Right?

First, the dynamically generated stars wouldn’t appear and when you tried to play the game mode, it was just blank. No really terrible website enemies appeared, nor could they shoot any bad experience missiles at you, at least, not in the game mode, but I guess my buggy website literally sent a bad experience missile at you. Over on the page showing my work, little cars were supposed to zoom down the street, but they didn’t show up, either.

Let me tell you, there was no crying or tears of any kind. I was very strong and thrilled, just thrilled, to accept the challenge of figuring out what was going on. I frantically googled things like “What could cause JavaScript to act differently on two servers?”, “Why would a server change how JavaScript works?”, and “Why does everyone think I’m crying when I’m clearly not?” But to no avail.

There were some errors in the console, but not ones that made sense. I had an SVG element that we’ll call car (because that’s what I named it). I created it in vanilla JavaScript, added it to the page, and zoomed it down the gray strip approximating a street. (It’s a space theme where you can explore planets. It’s really cool. I swear.) I was setting transforms on car using car.style.transform and it was erroring out. car.style was undefined.

I went back to my code on my laptop. Executes flawlessly. No errors.

To get past the initial error, I switched it from car.style to using setAttribute e.g. car.setAttribute('style', 'transform: translate(100px, 200px)');. This just got me to the next error. car was erroring out on some data-* attributes I was using to hold information about the car, e.g. car.dataset.xspeed would also come back undefined when I tried to access them. This latter technology has been supported in SVG elements since 2015, yet it was not working on the server, and worked fine locally. What the Hoobastank could be happening? (Yes, I’m referencing the 1990s band and, no, they have nothing to do with the issue. I just like saying… errr… writing… their name.)

With search engines not being much help (mostly because the problem isn’t supposed to exist), I contacted my host thinking maybe some kind of server configuration was the issue. The very polite tech tried to help, checking for server errors and other simple misconfigurations, but there were no issues he could find. After reluctantly serving as my coding therapist and listening to my (tearless) bemoaning of ever starting a career in web development, he basically said they support JavaScript, but can’t really go into custom code, so best of luck. Well, thanks for nothing, person whom I will call Truckson! (That’s not his real name, but I thought “Carson” was too on the nose.)

Next, and still without tears, I tried to explain my troubles to ChatGPT with the initial prompt: “Why would JavaScript on two different web servers act differently?” It was actually kind of helpful with a bunch of answers that turned out to be very wrong.

Maybe there was an inline SVG vs SVG in an img issue? That wasn’t it.

Could the browser be interpreting the page as plain text instead of HTML through some misconfiguration? Nope, it was pulling down HTML, and the headers were correct.

Maybe the browser is in quirks mode? It wasn’t.

Could the SVG element be created incorrectly? You can’t create an SVG element in HTML using document.createElement('svg') because SVG actually has a different namespace. Instead, you have to use document.createElementNS("http://www.w3.org/2000/svg", 'svg'); because SVG and HTML use similar, but very different, standards. Nope, I’d used the createElementNS function and the correct namespace.

Sidenote: At several points during the chat session, ChatGPT started replies with, “Ah, now we’re getting spicy 🔥” as well as, “Ah, this is a juicy one. 🍇” (emojis included). It also used the word “bulletproof” a few times in what felt like a tech-bro kind of way. Plus there was a “BOOM. 💥 That’s the smoking gun right there”, as well as an “Ahhh okay, sounds like there’s still a small gremlin in the works.” I can’t decide whether I find this awesome, annoying, horrible, or scary. Maybe all four?

Next, desperate, I gave our current/future robot overlord some of my code to give it context and show it that none of these were the issue. It still harped on the misconfiguration and kept having me output things to check if the car element was an SVG element. Again, locally it was an SVG element, but on the server it came back that it wasn’t.

Maybe using innerHTML to add some SVG elements to the car element garbled the car element into not being an SVG element? ChatGPT volunteered to rewrite a portion of code to fix this. I put the new code into my system. It worked locally! Then I uploaded it to the server and… no dice. Same error was still happening.

I wept openly. I mean… I swallowed my emotions in a totally healthy and very manly way. And that’s the end of the article, no redemption, no solution, no answer. Just a broken website and the loud sobs of a man who doesn’t cry… ever…

…You still here?

Okay, you’re right. You know I wouldn’t leave you hanging like that. After the non-existent sob session, I complained to ChatGPT, it again gave me some console logs including having the car element print out its namespace and that’s when the answer came to me. You see the namespace for an SVG is this:

http://www.w3.org/2000/svg

What it actually printed was this:

https://www.w3.org/2000/svg

One letter. That’s the difference.

Normally you want everything to be secure, but that’s not really how namespaces work. And while the differences between these two strings is minimal, I might as well have written document.createElementNS("Gimme-them-SVGzers", "svg");. Hey, W3C, can I be on the namespace committee?

But why was it different? You’d be really mad if you read this far and it was just a typo in my code. Right?

You’ve invested some time into this article, and I already did the fake-out of having no answer. So, having a code typo would probably lead to riots in the streets and hoards of bad reviews.

Don’t worry. The namespace was correct in my code, so where was that errant “s” coming from?

I remembered turning on a feature in my host’s optimization plugin: automatically fix insecure pages. It goes through and changes insecure links to secure ones. In 99% of cases, it’s the right choice. But apparently it also changes namespace URLs in JavaScript code.

I turned that feature off and suddenly I was traversing the galaxy, exploring planets with cars zooming down gray pseudo-elements, and firing lasers at really terrible websites instead of having a really terrible website. There were no tears (joyful or otherwise) nor were there celebratory and wildly embarrassing dance moves that followed.

Have a similar crazy troubleshooting issue? Have you solved an impossible problem? Let me know in the comments.

[yan-lorkai]

.⁠｡⁠*⁠♡ﾟ A/n: totally not trying to learn html (which technically isn't a programming language, for what I had read), and well, if Idia was teaching me I would learn everything so quickly tbh. Or not. He would start explaining and I would have the sudden urge to kiss him, oh well it happens ig

"Uh... I think I have an error in my code." You break the silence, tone soft as the computer screen lights up your eyes just the right way for Idia to lost himself in the reflex. He love your eyes, your concentrated face, the way you stick out your tongue without realizing.

And he loves the way you timidly look to him, as if he has all the answers to your questions - which, about this subject, he have, by the way.

"Ah~ your closing array is missing a closing slash. Here, Yuu-shi." He pointed your error with a soft tone, blue nail hitting the screen, and a surprised pout grew on your lips.

He wanted to smother you in his arms, to pick you up and hold you till his arms fell off and his corpse rot - that was how bad he yearned for you, your skin, you smell. He breathes really hard to refrain from doing it, though. You wouldn't want that. He was just a mere R card, a lonely gamer, a-

"Thank you, Idia. You're the best." You giggle to yourself, feeling yourself warm under his eyes and lousy smile. Unbeknownst to you, the only things that were going through his head were about you.

Your smile, the way your eyes lightened up, your laughters and giggles, the messages you passed each other in class (when he was there in person), your secret handshake. Idia loved you. He loved your very dearly.

He loved you so much that he could cry.

"Uh... it's no big deal," yet his hair was getting hotter, rosey tone starting to burn brightly. "Don't forget the closing stash, and everything should work properly. This programming language is not that used anymore, but most can learn useful things learning it anyway. I think."

Idia had half of his mind to know that he was rambling again, talking so fast that he could make Eminem cry. But he couldn't stop when you looked at him with such big eyes filled with curiosity and wonder, taking notes of everything he was saying.

He noted then that you had hello kitty stickers on your page. A few drawings that Ortho made of him, Idia and you; that almost killed him right then and there.

"Ah... HTML uses elements, tags, and attributes to organize text, images, links, and other multimedia elements. It can be combined with CSS for styling and JavaScript for interactivity."

[gagande]

PureCode software reviews | Use CamelCase for Properties

In JSX, you must use camelCase for property names that represent HTML attributes. This is because JSX closely aligns with JavaScript conventions, differing from the traditional lowercase HTML attributes. Notably, the class attribute becomes className in JSX, reflecting its adherence to JavaScript’s naming conventions.

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼