28 Matching Annotations
- Jan 2023
-
github.com github.com
-
https://github.com/CondeNast/atjson
They're using annotations in this context more like CSS, but instead of adding the markup into the content as is done in HTML and processing it, they've physically separated the text and the markup entirely and are using location within the text to indicate where the formatting should take place.
-
- Jul 2022
-
appops.org appops.orgAppOps1
-
?
'
-
- Sep 2021
-
semanticbible.com semanticbible.com
-
Bibleref is a simple approach to automatically identifying Bible references that are embedded in blog posts and other web pages. This enables search engines, content aggregators, and other automated tools to correctly label the references so they're more easily searchable. Bibleref is part of a general movement toward markup that expresses more semantic, rather than presentational, element.
-
-
www.freecodecamp.org www.freecodecamp.org
-
since table data is essentially an ordered collection of items, it seems natural to use ordered lists.
-
- Apr 2021
-
stackoverflow.com stackoverflow.com
-
Which HTML tag I should use to enclose such notes to add a semantic meaning of a note that may be useful to read at a given point of a tutorial, but is not part of the main tutorial flow?
-
- Mar 2021
-
stackoverflow.com stackoverflow.com
-
HTML elements have meaning. "Semantically correct" means that your elements mean what they are supposed to.
-
Semantically correct usage of elements means that you use them for what they are meant to be used for.
-
Another example: a list (<ul> or <ol>) should generally be used to group similar items (<li>). You could use a div for the group and a <span> for each item, and style each span to be on a separate line with a bullet point, and it might look the way you want. But "this is a list" conveys more information.
-
The classic example is that if something is a table, it should contain rows and columns of data. To use that for layout is semantically incorrect - you're saying "this is a table" when it's not.
-
Browsers can correctly apply your CSS (Cascading Style Sheets), describing how each type of content should look. You can offer alternative styles, or users can use their own; as long as you've labeled your elements semantically, rules like "I want headlines to be huge" will be usable.
-
Screen readers for the blind can help them fill out a form more easily if the logical sections are broken into fieldsets with one legend for each one. A blind user can hear the legend text and decide, "oh, I can skip this section," just as a sighted user might do by reading it.
-
Mobile phones can switch to a numeric keyboard when they see a form input of type="tel" (for telephone numbers).
-
Knowing what your elements are lets browsers use sensible defaults for how they should look and behave. This means you have less customization work to do and are more likely to get consistent results in different browsers.
-
All of this semantic labeling helps machines parse your content, which helps users.
-
Fits the ideal behind HTML HTML stands for "HyperText Markup Language"; its purpose is to mark up, or label, your content. The more accurately you mark it up, the better. New elements are being introduced in HTML5 to more accurately label common web page parts, such as headers and footers.
Tags
- conveys more information (semantic)
- web: accessibility
- good point
- semantic meaning
- consistency across all platforms
- semantic markup
- advantages/merits/pros
- fundamental principles/paradigm of the Web
- good example
- good explanation
- definition
- semantically correct
- explanation
- explicit meaning
- use meaningful names (programming)
- be specific
- reasonable defaults
- example
- calling something what it actually is (semantic labeling)
- simple explanation
Annotators
URL
-
-
css-tricks.com css-tricks.com
-
You don’t need to do any tricky cursor stuff, because it’s all semantically wired up already.
-
always use real <label for="correct_input"> elements. Just that alone is a UX consideration all too many forms fail on
-
- Jan 2021
-
css-tricks.com css-tricks.com
-
You can style a link to look button-like Perhaps some of the confusion between links and buttons is stuff like this: <img loading="lazy" src="https://i1.wp.com/css-tricks.com/wp-content/uploads/2020/01/Screen-Shot-2020-01-08-at-8.55.49-PM.png?resize=264%2C142&ssl=1" alt="" class="wp-image-301534" width="264" height="142" data-recalc-dims="1" />Very cool “button” style from Katherine Kato. That certainly looks like a button! Everyone would call that a button. Even a design system would likely call that a button and perhaps have a class like .button { }. But! A thing you can click that says “Learn More” is very much a link, not a button. That’s completely fine, it’s just yet another reminder to use the semantically and functionally correct element.
-
- Dec 2020
-
material-ui.com material-ui.com
-
Heading hierarchy. Don't skip heading levels. In order to solve this problem, you need to separate the semantics from the style.
-
- Oct 2020
-
html.com html.com
-
New Semantic Tags Added by HTML5
-
- Sep 2020
-
react-spectrum.adobe.com react-spectrum.adobe.com
-
The fully styleable primitives that the web offers (e.g. <div>) are quite powerful, but they lack semantic meaning. This means that accessibility is often missing because assistive technology cannot make sense of the div soup that we use to implement our components.
-
-
hiddedevries.nl hiddedevries.nl
-
The benefit of using the <ul> (unordered list) element are plenty: it will stay a list outside the context of our page, for example in Safari Reader mode, it will show as a list when printed with stylesheet turned off, it will show as a list for people who use screenreaders, it is a list (screenreaders can announce things like ‘list, 3 items’).
-
- May 2020
-
en.wikipedia.org en.wikipedia.org
-
semantic markup was of key importance
-
- Mar 2020
-
paramaggarwal.substack.com paramaggarwal.substack.com
-
Javascript, APIs and Markup — this stack is all about finding middleground from the chaos of SSR+SPA. It is about stepping back and asking yourself, what parts of my page change and what parts don’t change?
JavaScript, APIs and Markup (JAM Stack) - middleground between SSR + SPA.
Advantages:
- The parts that don’t change often are pre-rendered on the server and saved to static HTML files. Anything else is implemented in JS and run on the client using API calls.
- Avoids too much data transfer (like the hydration data for SSR), therefore finds a good tradeoff to ship web content
- Allows to leverage the power and cost of Content delivery networks (CDNs) to effectively serve your content
- With serverless apps your APIs will never need a server to SSH into and manage
-
- Sep 2017
-
docs.racket-lang.org docs.racket-lang.org
-
I like to think of Pollen markup a way of capturing not just the text, but also my ideas about the text. Some of these are low-level ideas (“this text should be italicized”). Some are high-level ideas (“this text is the topic of the page”). Some are just notes to myself. In short, everything I know about the text becomes part of the text.In so doing, Pollen markup becomes the source code of the book.
Es similar a lo que ocurre con los
%keyword
en Grafoscopio, más la estructura arbórea que provee para el texto y los%embed
que permiten que un nodo pueda ser llamado por otro.
-
- May 2017
-
www.sblm.com www.sblm.comSBLM1
-
SBLM People Ideas Work Contact
On Hover animation should fade in, not swipe from top
-
- Apr 2017
-
-
MarkUp lets you express your thoughts and ideas quick
New development will be quite a while.
-