#HTML Elements

[psychogeniccircuits]

HTML Elements & Tags

Element: anything from the start tag to the end tag.

Tag: a piece of markup language that is used to indicate the beginning and end of an html element in an html document.

Example: <p> your text here </p>

&lt;header>&lt;;/header> - Represents a container for introductory content or a set of navigation links. Usually contains one or more heading elements (<h1> - <h6>), logo or icon, or authorship information.

&lt;;h#></h#> - header element. The higher the number, the greater the importance. Only use one <h1> element per page. There can only be six. Main topic on a web page. When visitors to your website see the h1's, it draws attention as it stands out the most on the page as it generally appears as a larger font size and in bold.

&lt;p></p> - paragraph. used to create a paragraph of text on websites. Always starts on a new line. A lot of browsers add some white space (a margin) before and after a paragraph.

&lt;;!-- ____: _______ --> - comment. Used to notate code with text that will not appear on the website/browser display. It allows you to make code inactive. You can use them to explain your code, which can help you when you edit the source code at a later date.

&lt;main>&lt;/main> - an element that identifies a content area. The main element. Specifies the main content of a document. This type of element/tag makes your html easier to read and helps with Sear Engine Optimization and accessibility. Should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. When you put things inside the main element, this is called nesting. Nesting elements should be placed two spaces further to the right from the element they are nested in. This spacing is called indentation and is used to make html easier to read.

Example: <main> <h1>Tumblr Meme App</h1> <h2>Tumblr Photos</h2> <!-- TODO: Add link to Tumblr photos --> <;p>See more Tumblr memes in our gallery</p> </main>

&lt;img> - used to images to your website. This element has an opening tag without a closing tag. A tag for an element without a closing tag is called a self-closing tag.

{{ under construction }}

[jcmarchi]

What We Know (So Far) About CSS Reading Order

New Post has been published on https://thedigitalinsider.com/what-we-know-so-far-about-css-reading-order/

What We Know (So Far) About CSS Reading Order

The reading-flow and reading-order proposed CSS properties are designed to specify the source order of HTML elements in the DOM tree, or in simpler terms, how accessibility tools deduce the order of elements. You’d use them to make the focus order of focusable elements match the visual order, as outlined in the Web Content Accessibility Guidelines (WCAG 2.2).

To get a better idea, let’s just dive in!

(Oh, and make sure that you’re using Chrome 137 or higher.)

reading-flow

reading-flow determines the source order of HTML elements in a flex, grid, or block layout. Again, this is basically to help accessibility tools provide the correct focus order to users.

The default value is normal (so, reading-flow: normal). Other valid values include:

flex-visual

flex-flow

grid-rows

grid-columns

grid-order

source-order

Let’s start with the flex-visual value. Imagine a flex row with five links. Assuming that the reading direction is left-to-right (by the way, you can change the reading direction with the direction CSS property), that’d look something like this:

Now, if we apply flex-direction: row-reverse, the links are displayed 5-4-3-2-1. The problem though is that the focus order still starts from 1 (tab through them!), which is visually wrong for somebody that reads left-to-right.

But if we also apply reading-flow: flex-visual, the focus order also becomes 5-4-3-2-1, matching the visual order (which is an accessibility requirement!):

<div> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> </div>

div display: flex; flex-direction: row-reverse; reading-flow: flex-visual;

To apply the default flex behavior, reading-flow: flex-flow is what you’re looking for. This is very akin to reading-flow: normal, except that the container remains a reading flow container, which is needed for reading-order (we’ll dive into this in a bit).

For now, let’s take a look at the grid-y values. In the grid below, the grid items are all jumbled up, and so the focus order is all over the place.

We can fix this in two ways. One way is that reading-flow: grid-rows will, as you’d expect, establish a row-by-row focus order:

<div> <a>1</a> <a>2</a> <a>3</a> <a>4</a> <a>5</a> <a>6</a> <a>7</a> <a>8</a> <a>9</a> <a>10</a> <a>11</a> <a>12</a> </div>

div display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; reading-flow: grid-rows; a:nth-child(2) grid-row: 2 / 4; grid-column: 3; a:nth-child(5) grid-row: 1 / 3; grid-column: 1 / 3;

Or, reading-flow: grid-columns will establish a column-by-column focus order:

reading-flow: grid-order will give us the default grid behavior (i.e., the jumbled up version). This is also very akin to reading-flow: normal (except that, again, the container remains a reading flow container, which is needed for reading-order).

There’s also reading-flow: source-order, which is for flex, grid, and block containers. It basically turns containers into reading flow containers, enabling us to use reading-order. To be frank, unless I’m missing something, this appears to make the flex-flow and grid-order values redundant?

reading-order

reading-order sort of does the same thing as reading-flow. The difference is that reading-order is for specific flex or grid items, or even elements in a simple block container. It works the same way as the order property, although I suppose we could also compare it to tabindex.

Note: To use reading-order, the container must have the reading-flow property set to anything other than normal.

I’ll demonstrate both reading-order and order at the same time. In the example below, we have another flex container where each flex item has the order property set to a different random number, making the order of the flex items random. Now, we’ve already established that we can use reading-flow to determine focus order regardless of visual order, but in the example below we’re using reading-order instead (in the exact same way as order):

div display: flex; reading-flow: source-order; /* Anything but normal */ /* Features at the end because of the higher values */ a:nth-child(1) /* Visual order */ order: 567; /* Focus order */ reading-order: 567; a:nth-child(2) order: 456; reading-order: 456; a:nth-child(3) order: 345; reading-order: 345; a:nth-child(4) order: 234; reading-order: 234; /* Features at the beginning because of the lower values */ a:nth-child(5) order: -123; reading-order: -123;

Yes, those are some rather odd numbers. I’ve done this to illustrate how the numbers don’t represent the position (e.g., order: 3 or reading-order: 3 doesn’t make it third in the order). Instead, elements with lower numbers are more towards the beginning of the order and elements with higher numbers are more towards the end. The default value is 0. Elements with the same value will be ordered by source order.

In practical terms? Consider the following example:

div display: flex; reading-flow: source-order; a:nth-child(1) order: 1; reading-order: 1; a:nth-child(5) order: -1; reading-order: -1;

Of the five flex items, the first one is the one with order: -1 because it has the lowest order value. The last one is the one with order: 1 because it has the highest order value. The ones with no declaration default to having order: 0 and are thus ordered in source order, but otherwise fit in-between the order: -1 and order: 1 flex items. And it’s the same concept for reading-order, which in the example above mirrors order.

However, when reversing the direction of flex items, keep in mind that order and reading-order work a little differently. For example, reading-order: -1 would, as expected, and pull a flex item to the beginning of the focus order. Meanwhile, order: -1 would pull it to the end of the visual order because the visual order is reversed (so we’d need to use order: 1 instead, even if that doesn’t seem right!):

div display: flex; flex-direction: row-reverse; reading-flow: source-order; a:nth-child(5) /* Because of row-reverse, this actually makes it first */ order: 1; /* However, this behavior doesn’t apply to reading-order */ reading-order: -1;

reading-order overrides reading-flow. If we, for example, apply reading-flow: flex-visual, reading-flow: grid-rows, or reading-flow: grid-columns (basically, any declaration that does in fact change the reading flow), reading-order overrides it. We could say that reading-order is applied after reading-flow.

What if I don’t want to use flexbox or grid layout?

Well, that obviously rules out all of the flex-y and grid-y reading-flow values; however, you can still set reading-flow: source-order on a block element and then manipulate the focus order with reading-order (as we did above).

How does this relate to the tabindex HTML attribute?

They’re not equivalent. Negative tabindex values make targets unfocusable and values other than 0 and -1 aren’t recommended, whereas a reading-order declaration can use any number as it’s only contextual to the reading flow container that contains it.

For the sake of being complete though, I did test reading-order and tabindex together and reading-order appeared to override tabindex.

Going forward, I’d only use tabindex (specifically, tabindex="-1") to prevent certain targets from being focusable (the disabled attribute will be more appropriate for some targets though), and then reading-order for everything else.

Closing thoughts

Being able to define reading order is useful, or at least it means that the order property can finally be used as intended. Up until now (or rather when all web browsers support reading-flow and reading-order, because they only work in Chrome 137+ at the moment), order hasn’t been useful because we haven’t been able to make the focus order match the visual order.

[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. 

[clonecoding-en]

Invoke JavaScript Functions with <a href>

Enhance Web Functionality with <a href> JavaScript Invocation

This informative article sheds light on the powerful technique of triggering JavaScript functions using the commonly known <a href> element. While traditionally used for hyperlinks, this HTML element can also be harnessed to execute JavaScript functions seamlessly. The article provides clear examples and code snippets that enable developers to grasp this practice and integrate it effectively into their projects.

As the web development landscape evolves, incorporating JavaScript function invocation through <a href> offers developers intriguing possibilities. The article not only demonstrates how to implement this technique but also offers insights into its potential concerns, such as user experience considerations and the impact on disabled JavaScript. By striking a balance between the convenience of <a href> and maintaining a smooth user experience, developers can leverage this technique to optimize their projects' functionality and user interaction.

[darqx]

Pick up the receiver I'll make you a believer

❗️For commonly asked qs please see my BTD FAQ

After doodling the first image that hug body slam meme immediately came to mind and i couldn't help myself 😂

Thanks very much I'm glad you are enjoying my art and characs! :D

To put the answer simply, Rire used to work for the prior King as a Collector (of souls) and he was that King's only Collector and so got the brunt of his ire for any related, perceived fault. Aside from that personal connection Rire also really disliked him because he viewed the prior king as a useless glutton who failed at ruling a sector (conditions were tanking/had tanked for ages), and which the Royal powers were wasted on.

Almost all of his sunglasses are actually normal human sunglasses, he can just see better than a human can 😎

Anything can be a kink, anon :d

Boring victims are often exceptionally weak-willed victims so that's something in particular he dislikes.

Yes he can play the piano and violin, and horseback ride and ballroom dance etc. Put it this way he has a lot of particular small skills that he picked up during his Earth visits so he could hide in plain sight with the upper echelons XD

Not like how a snake or cat hisses which is what I'm assuming you're implying XDDD He can't bite off a limb (his mouth ain't that big) but his teeth are very sharp so he can feasibly take a chunk out of someone or like, completely bite off something smaller (finger, ear...)

I havent added to it in a while (since I dont often find songs I like enough to actually download lol) but this is my current playlist for him in no particular order:

Anon, the fact you capitalised "Aliens" made me think of Xenomorphs and I had to immediately stop thinking 🤣

On a side note, I can't actually tell you either way because he hasn't encountered an alien (that isn't a demon or a human) lol. He'd probably initially treat an alien much like he would treat a common demon, if they are obviously not human, and then if he realises they are also not quite a demon this could peak his interest.

Pointing you in this direction because regardless of the canon answer this proves he could look good in one LMAO

Sorry to burst your bubble but no :d Though I suppose he could simulate the effect by reverting parts of them to their "liquid" state 🤔 DO WITH THAT INFO WHAT YOU WILL.

It is theoretically similar to a human's.

If you can remember his age then that is how old he is :d I'm not really like other creators who give their characs a definitive "birthday" down to the year, mainly because I don't often have set "time periods" in my stories lol.

His birth date falls somewhere between late October - late November though.

In the context of BTD; they just don't like each other XD Well I can't actually speak for Cain, but Rire not liking Cain is partly a riff on general angel/demon rivalry dynamics, and partly because Rire would see Cain as more of a threat since canonically Cain is way more OP than him.

Most of the time when i draw them Cain is also actively getting in Rire's space whilst Rire is actively trying to avoid him, so there's also that XD

It...depends. On which aspect of "ownership" you're implying. For those that he has deals with, he'd calculate what exactly the value of the deal lost would be and in this situation he'd likely write them off as Cain would be more annoying to handle then they'd be worth (he can always make more deals).

If someone was specifically marked by Rire, that's a different level of possessiveness and he'd actually try cos like

Hey guys some offence but why are some of you sending me asks formatted as if i were ChatGPT

Is there one for like, personal ambition or cunning or something cos I don't think he'd be any of those listed lol.

Rire doesn't have a mobile phone and he doesn't need one because he has a demon power that basically CCTVs all his citizens to himself. And really, if he wants to find you he'll find you.

He's somewhere in the middle of that scale through the sheer fact that he's been around long enough to see technology change and would've kept up with how to use things to blend in better, but also doesn't need to use the electronics to the point that he'd need to be an expert at it.

Is this cos Gato is Canadian cos I don't remember a country location being specified when we did it? |D Personally I figured most of the settings were in the US since the US has the most documented serial killers

Also sos no i dont anon, you'll need to either ask Gato or EP or dig through any of their lore posts they might have left.

Think kind of like Rire (he did learn a lot from her after all), but with a more Elizabethan era socialite vibe. Possibly a black widow but we dont have any proof about that.

Has/had a p good relationship. I use both terms because I still never decided whether she was currently dead or not lol.

Lol a misconception but Rire doesn't actually perceive humans as trash XD Trash suggests that he hates them and they wouldn't be worth regarding at all, whereas Rire usually finds them more like...novelties. Or like whatever that feeling that is associated with viewing ant farms or animals performing tricks is. Rire's mother would view them as more like working animals or livestock.

[pc-98s]

stop the count!!!!!!!!!

[clumsypuppy]

oh yea.. its all coming together

[orcelito]

Working on my javascript for my web page. Turns out I have the perfect kind of setup to accomplish some of the project requirements, specifically with even handlers and user interactions

My website, conceptually, will load a different employee details page depending on what employee name is clicked on. But I need to load it dynamically (instead of hard-coding it) so that the user can add or delete employees & it'll be able to still load the relevant shit.

So! Only one employee details page, but depending on how it's loaded, it'll load a different employee's information. Still working on getting down Exactly how to do it (I'm thinking using URL parameters that'll read a different object depending on what ID is used)

It's entirely doable. In fact, it's probably extremely common to do in web pages. No one wants to hard-code information for every new object. Of course not. And thus the usefulness of dynamic javascript stuff.

I can do this. I can very much do this.

[quillusquillus]

absolutely devastated to learn today that 123guestbook, staple of the early internet, is shutting down on July 1st (locking guestbooks on June 1st, unclear if they'll be deleted a month after that but presumably so)

If you have a 123guestbook embedded in your site, now is the time to start archiving it, if you want to keep those old guest posts! (please note that the Wayback Machine will almost certainly not preserve 123guestbooks on old archived sites, since they are externally hosted)

if anyone has a recommendation for another guestbook btw (or shoutbox I guess) I'm all ears, my criteria are basically custom colours, not shady af, and allows me to moderate it personally instead of some kind of automation. I'm also looking for a secondary one that allows nsfw in their TOS, which seems to be a big ask these days :/

[wonderwitchch]

Ok, I need help with something. I want to have chat fight for if I'm good or evil when I play ShtH on my bday, but I can't for the life of me find a widget that I can use to do this. I barely know html, but I can at least copy and paste. Please help I only have a week!

[autism-corner]

fuckkk theyre geeking out

[clonecoding-en]

Invoke JavaScript Functions with <a href>

Enhance Web Functionality with <a href> JavaScript Invocation

This informative article sheds light on the powerful technique of triggering JavaScript functions using the commonly known <a href> element. While traditionally used for hyperlinks, this HTML element can also be harnessed to execute JavaScript functions seamlessly. The article provides clear examples and code snippets that enable developers to grasp this practice and integrate it effectively into their projects.

As the web development landscape evolves, incorporating JavaScript function invocation through <a href> offers developers intriguing possibilities. The article not only demonstrates how to implement this technique but also offers insights into its potential concerns, such as user experience considerations and the impact on disabled JavaScript. By striking a balance between the convenience of <a href> and maintaining a smooth user experience, developers can leverage this technique to optimize their projects' functionality and user interaction.

[simplyghosting]

“No one needs a computer anymore.”

Wrong.

>right-click

>inspect element

>delete annoying script housing this opinion