feat: new article about hr

thedaviddias · Jun 1, 2023 · a6a47f1 · a6a47f1
1 parent e502116
commit a6a47f1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/content/notes/stop-using-thematic-break-to-design-horizontal-line.mdx b/content/notes/stop-using-thematic-break-to-design-horizontal-line.mdx
@@ -0,0 +1,40 @@
+---
+draft: false
+locale: en
+date: 2023-06-01T04:38:32.569Z
+title: Stop using the <hr> tag to design a horizontal line!
+description: It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the <hr> tag properly.
+author: David Dias
+tags:
+  - coding
+  - hr
+  - html
+  - semantic
+type: note
+---
+
+I have seen way too many times people using the `<hr>` HTML element, which is called "thematic break" instead of CSS.
+
+Using the HTML <hr> tag purely for designing horizontal lines is an incorrect practice.
+The real purpose of the <hr> tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.
+
+If you need a decorative line, CSS is a more appropriate choice.
+
+For instance:
+
+```html
+<div class="styled-line"></div>
+```
+
+Example CSS:
+
+```css
+.styled-line {
+  border-bottom: 1px solid #000;
+  margin: 1em 0;
+}
+```
+
+In terms of accessibility, using <hr> as a design element can confuse screen reader users, as it indicates a "thematic break".
+
+Semantics are important, not only for accessibility but also for SEO. So, please, stop using the <hr> tag to design a horizontal line!
diff --git a/public/rss/feed.xml b/public/rss/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Thu, 01 Jun 2023 21:15:41 GMT</lastBuildDate>
+        <lastBuildDate>Thu, 01 Jun 2023 21:20:41 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

diff --git a/public/rss/fr/feed.xml b/public/rss/fr/feed.xml
@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Thu, 01 Jun 2023 21:15:41 GMT</lastBuildDate>
+        <lastBuildDate>Thu, 01 Jun 2023 21:20:41 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>