Human Connection
1.0.0
1.0.0
  • Introduction
  • Edit this Documentation
  • Installation
  • Neo4J
  • Backend
    • GraphQL
    • neo4j-graphql-js
  • Webapp
    • Components
    • HTML
    • SCSS
    • Vue
  • Testing Guide
    • End-to-end tests
    • Frontend tests
    • Backend tests
  • Contributing
  • Kubernetes Deployment
    • Minikube
    • Digital Ocean
      • Kubernetes Dashboard
      • HTTPS
    • Human Connection
      • Error Reporting
      • Mailserver
      • Maintenance
    • Volumes
      • Neo4J Offline-Backups
      • Neo4J Online-Backups
      • Volume Snapshots
      • Reclaim Policy
      • Velero
    • Metrics
    • Legacy Migration
  • Feature Specification
  • Code of conduct
  • License
Powered by GitBook
On this page
  • We write semantic markup
  • We write as little HTML as possible – and as much as necessary
  • Recommended reads

Was this helpful?

  1. Webapp

HTML

PreviousComponentsNextSCSS

Last updated 5 years ago

Was this helpful?

We write semantic markup

We avoid using divs and spans and try to choose more meaningful HTML elements instead. If unsure which element to use can be of help.

Why?

  • semantic markup is crucial for accessibility

  • it makes the code more readable for other developers

  • it benefits our SEO

For more background .

This doesn’t mean you can’t ever use a div – just think twice before you do!

We write as little HTML as possible – and as much as necessary

HTML is used to structure content on the page and should therefore reflect its complexity. Not more and not less. Most content does not require deep nesting of HTML elements – if you find yourself wrapping container around container or adding an element just to correctly position another element on the page this calls for the use of CSS instead!

Why?

  • deep nesting makes it hard to understand, style and maintain components

  • it can lead to performance issues

Recommended reads

For a deeper dive into the WHY and HOW have a look at the following resources:

this list by MDN
see this article
HTML: a good basis for accessibility
Why, how, and when to use semantic HTML and ARIA