Loading…

Joe Steinbring

HTML

The document layer underneath everything else. Its entries are less about tags than about what good markup buys you: meaning for machines, reach for assistive technology, visibility to search engines, and readiness for other languages.

More than 20 years working with semantic markup and web standards, with accessibility and search visibility built into the process. I have written it at every job I have had: UW-Milwaukee, Kohler, Starkmedia, Quality Matters, and Bader Rutter.

Explore HTML

Semantic markupI structure pages with meaningful HTML elements so content remains understandable to browsers, assistive technology, and developers.AccessibilityI apply accessible markup and interaction practices across web projects so interfaces are usable by a wider audience.Search engine optimizationI pair semantic HTML with useful metadata and understandable content structure to support search engine optimization.InternationalizationI build sites that serve more than one language, with per-locale routing, translated interface strings, and reciprocal hreflang.Web standardsI rely on established platform standards to make sites more compatible, maintainable, and resilient.

From the blog

Related writing

Articles from JWS News and DEV that relate to HTML.

  1. How to implement an autocomplete using Vue

    Have you ever stumbled upon those form fields that suggest options in a drop-down as you type, like when you’re entering a street address? It turns out, that making those are not as difficult as you would think! Today, I’m gonna walk you through three cool ways to pull it off us…

  2. Styling a webform with CSS Grid

    Looking back, the recent Bootstrap vs Bulma post left me wondering why you really need either. Two years ago, I did a post on what CSS Grid is and I figured that you can consider this to be an continuation of that.

  3. Did you know that the blockquote element has a cite attribute?

    This is going to be a fairly quick post. I was reading some developer documentation recently and noticed that the blockquote element in HTML has an attribute for citing the source for that blockquote. It doesn’t seem to surface that citation in the rendered HTML but I’m sure tha…

  4. CSS Image Carousel, Part 2

    Recently, I was talking about how a random tweet got me thinking about CSS image carousels and at the end of that post, I mentioned that the second version of the image carousel would allow you to link to individual slides. I figured that it was time to show how to do that. The…

  5. Two ways to make a pure CSS image carousel

    Recently, I was doom-scrolling twitter when I came across a tweet that claimed that you can build an image carousel using just two lines of CSS. I liked the tweet and then thought to myself “I can’t sleep, right now. Why not try it out?” CSS Tip 💡 Create image Carous…

  6. Create an accordion without any CSS or JavaScript

    Did you know that you can not only create an accordion without writing any CSS or JavaScript but it also works in all modern web browsers? Using the details and summary elements, it is pretty easy, too.   [ Cover photo by Charlie Solorzano on Unsplash ]

From CodePen and GitHub

Small, self-contained HTML examples that I published publicly.

Showing 12 of 22 examples.

  1. Autocomplete -- HTML

    See it runningSee the code

  2. Detect dimensions of the client device within JavaScript*

    See the code

  3. Blockquote Cite

    See it runningSee the code

  4. How to consume and display RSS in JavaScript

    See the code

  5. Data URLs - Part 1

    See it runningSee the code

  6. How to store values in localStorage (a persistent place to store data in JavaScript)

    See the code

  7. Data URLs - Part 2

    See it runningSee the code

  8. How to use JavaScript to sort a list of locations by how far they are from your current location

    See the code

  9. Display an unordered list horizontally

    See it runningSee the code

  10. How to use localStorage and sessionStorage to make form values persistant

    See the code

  11. Nullable Radio Control

    See it runningSee the code

  12. How to use navigator.geolocation.getCurrentPosition() and the Google Reverse Geocoding API to…

    See the code

View all of my pens on CodePenView all of my gists on GitHub

From GoToSocial

Related thoughts

Short posts about HTML, matched by topic hashtags.

  • #html
  • #html5
  • #webstandards
Finding related thoughts…