Tagged “html”
-
TIL how Error correction works in HTML error html table browser
You never get an 'Invalid Syntax' error on an HTML page. Browsers fix any invalid content and go on.
-
TIL what DOCTYPE means moderndevelopment html
tl;dr: DOCTYPE declaration in the first line of the HTML file, to instruct the browser to run the code in Standard mode.
-
TIL Content sectioning html webdev browser
Content sectioning or landmarks, like sidebar, content, footer. You know, like better names.
-
TIL the Description List element html semantic tables
Lists of name–value pairs (or, in some cases, name–value groups) are a common pattern across the web, in part due to their versatility. HTML lets us mark up these lists with a combination of three elements
-
TIL accessing different data attributes javascript data html
You can access it in javascript using element.getAttribute('data-sandwich'). A better way is to go with the Element.dataset property.
-
TIL prepend html js dom
When you're creating new elements in Javascript, you want to attach the new element to something that exists in the DOM already. You do that with append, and prepend.
-
TIL aria-expanded for showing when things are hidden/shown accessibility html accordion
The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.
-
TIL ARIA role presentation accessibility semantic html
Think of this as a reset. You use role=presentation to remove semantic meaning from an element.
-
TIL Decorative Images accessibility html images
make a blank alt='' for presentation images - aka image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
-
TIL that adding a psuedo-h7 accessibiilty html mdn
Natively, there are 6 heading levels. What if accessibility-wise, you wanted a new heading level?
-
TIL how to use ':where()' css html
You can probably also use a helper class like `no-bullets`. But this method does follow a default top-down approach pattern with CSS that i'm starting to also fall in love with.
-
TIL different ways to inject content via Javascript html javascript
There's lots of ways to do things in Javascript. It gets difficult to know which way is the 'preferred' way.
-
TIL using html comments in javascript html comments badidea
This is in the 'bad idea' area! But just a need little factoid!
-
TIL Disable users from highlighting text html css accessibility
You can use the 'user-select' property to prevent an element from being highlighted by the user.
-
TIL the wbr element mdn html css
'<wbr>' is a HTML element that represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
-
TIL how images get displayed to the browser html spec image performance
Image data is usually encoded in order to reduce file size. You can change when to decode the image.
-
TIL onError html error mdn
When a resource (such as an img or script) fails to load, an error event using interface Event is fired at the element that initiated the load, and the onerror() handler on the element is invoked.
-
TIL the global attribute translate html mdn
A good use-case is if your brand has words that can be translated.
-
TIL default spellcheck in html html mdn
The spellcheck is a global attribute that you can use to check spelling and grammar on HTML elements such as input fields and other editable elements.
-
TIL the multiple value in html html input mdn
The multiple attribute allows the user to enter multiple values on an '<input>'. It is a boolean attribute valid for file or email input types and the '<select>' element.
-
TIL a Accessible way to solve Read More accessibility links webdev html
Screenreaders help sight-impaired visitors have a better experience. The most annoying thing on a news website is to hear this: Read more — link, read more — link, read more — link. There's two ways to solve it.
-
TIL how to create adaptive SVGs svg images html
SVG markup is XML using an .svg file type extension which allows it to hold more dynamic types of code. SVG is able to scale up and down without quality loss, and can potentially be very small in size, they can also have embedded CSS, even embedded media queries.
-
TIL the meta refresh redirect method html link
A Meta refresh redirect is a client-side redirect. Unlike 301 and 302 redirects that happen on the web server, a meta refresh redirect instructs the web browser to go to a different web page after a specified time span
-
TIL you can make SMS links sms html mdn mobile
So you can make a 'mailto:' and a 'tel:' link. But did you know you can also do 'sms' messages too?
-
TIL using datalist for a pure HTML input suggestion html input mdn
Web developers do not use the power of 'datalists' enough. It combines the power of a 'selector', with the ability to type out your choice using the keyboard.
-
TIL you can wire different inputs to different forms input form html
You can add the form element inside a input, to point specifically to the form you want to target.
-
TIL how my team used web components html spec blog
I'm sure this site is from like 2002 or something (I don't exactly know). This was a super quick task. And from the looks of it's age, we just wanted to get it done quickly.
-
TIL I'm done with FontAwesome html css library blog
When I first discovered FontAwesome in 2013, I like everyone thought the same thing -- this is a MAJOR game changer. It is now 2022. As I look back, FontAwesome has become unsustainable.
-
TIL CSS pseudo-element first-letter, to make a Drop Cap css html
You can add a drop cap to a paragraph by using the ::first-letter pseudo-element.
-
TIL Adding Tooltips without a library html ui
You can add tooltips without a library by adding a title attribute in any html element
-
TIL the Download attribute in links html
href="link/to/your/file" download="filename.pdf" to make your links auto-download
-
TIL how to turn anything into a editable text html
So you'd use a 'input' or 'textarea' field to create a space for the end user to add new content. Did you know you can also do with that almost any element?
-
TIL the DOM and CSSOM css html web-development
DOM is the html. CSSOM is the design. Together, they become... WEBPAGE-PERSON.
-
TIL Web Component two-up web-components html
I think there's still a world where it can exist. We just have to find a right way to do it.
-
TIL that there was a menu element in prior HTML versions history html web-development
There was a menu element that we replaced with ul and li elements
-
TIL about Constraint Validation API (forms) forms html css mdn
Inputs are pretty powerful. Right out of the box, they can autocomplete, validate data, create minimum/maximum lengths, allow for patterns, and even provide state!
-
TIL there's actually a official guide for how HTML is implemented html
Enjoy arguing about HTML standards and realize the MDN isn't cutting it? Well I have a solution.
-
TIL iframe sandbox attribute html javascript
The iframe HTML element represents a nested browsing context, embedding another HTML page into the current one. There's also a sandbox mode.
-
TIL HTML's native hidden attribute html css
To hide a DOM element: there's a native HTML attribute called `hidden`.
-
TIL column-count css codepen html webdev
Using the column-count property you can break an element's content into a specified number of columns.
-
TIL How CSS get added into the DOM css html
Render Tree is CSSOM + DOM Tree with all the correct stylings
-
TIL HTML elements like Blockquote, datalist, details, meter, & progress html codepen mdn
HTML Elements I forget exist. Blockquote, datalist, details, meter, progress
-
TIL Copy/Paste SVG Icons html svg optimization generator
And by inlining the SVG, you make one less call, and it loads faster. heroicons.dev is awesome
-
TIL Accessible CSS Accordions html css accessibility
For years, I've been looking to find a CSS accordion that is also accessible.
-
TIL this Responsive Image Generator html optimization
With website optimization, it's better to deliver only the image that the browser size needs. Do that here.
-
TIL roman numerals in list elements html
In documentation, you often find roman numeral listings, and I never bothered to figure out how that was done!
-
TIL Alt text for images that are important accessibility html
Alt text is required if the image is a critical part of the content.
-
TIL Alt Text for everything else accessibility html
alt text for images with captions, that are decorative, part of image sets
-
TIL Adding Alt text to Supporting Images html accessibility
For images not critical to the content but support it, a alt attribute must be present.
-
TIL Triggering Reflow seo html
Have you ever been reading an article online when something suddenly changes on the pag
-
TIL the 4 steps in rendering a webpage html
A typical browser renders a document in 4 steps: style, layout, paint, and compositing.
-
TIL Scroll Margin for anchor links css html
When you use anchor links, it jumps to the content with the assigned ID. But it sucks.
-
TIL that you shouldn't use Placeholders as inputs accessibility ux html
Placeholder texts aren't labels.
-
TIL about styling active/focus together html css fe-masters-css-in-depth
Style active and focus at the same time. Some people get to your link or selection by keyboard.
-
TIL how to use CSS to count things html css fe-masters-css-in-depth codepen
Using CSS Counter, counter-reset, and counter-increment.
-
TIL You can look for elements with specific attributes html css fe-masters-css-in-depth
Target elements via CSS with certain attributes
-
TIL the html lang affects the screen reader voice html accessibility
<html> element's lang attribute tells it which language it is written in.
See all tags.