{"id":10812,"date":"2025-10-07T12:51:02","date_gmt":"2025-10-07T12:51:02","guid":{"rendered":"https:\/\/savethevideo.net\/blog\/?p=10812"},"modified":"2025-10-07T12:54:18","modified_gmt":"2025-10-07T12:54:18","slug":"how-to-add-and-style-separation-lines-in-html","status":"publish","type":"post","link":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/","title":{"rendered":"How to Add and Style Separation Lines in HTML"},"content":{"rendered":"<p>When building web pages, one often overlooked but highly effective design element is the <em>separation line<\/em>, commonly referred to as a horizontal rule or divider. Whether you&#8217;re aiming to break apart content sections, improve readability, or enhance visual hierarchy, using separation lines in HTML can lead to a cleaner and more professional-looking website.<\/p>\n<h2>What is a Separation Line?<\/h2>\n<p>A separation line is a visual divider between sections of a webpage. In HTML, the most basic form of this is the <strong>&lt;hr&gt;<\/strong> (horizontal rule) tag. This self-closing tag creates a thematic break between paragraph-level elements. However, with the power of CSS, you can transform a plain line into something vibrant and integral to your site&#8217;s design.<\/p>\n<h2>Basic Usage of the &lt;hr&gt; Tag<\/h2>\n<p>The HTML <strong>&lt;hr&gt;<\/strong> element is incredibly simple to use. Just include it where you want to insert the horizontal line.<\/p>\n<pre><code>&lt;p&gt;This is the first section.&lt;\/p&gt;\n&lt;hr&gt;\n&lt;p&gt;This is the second section.&lt;\/p&gt;\n<\/code><\/pre>\n<p>By default, browsers render this tag as a thin, slightly shaded horizontal line that stretches across the page. While functional, it\u2019s quite plain without styling.<\/p>\n<h2>Why Style Your Separation Lines?<\/h2>\n<p>Styling gives you control over how the divider appears\u2014allowing you to match your site&#8217;s look and feel. Without customization, horizontal rules can look out of place or too generic. With a few lines of CSS, you can adjust:<\/p>\n<ul>\n<li><strong>Thickness<\/strong><\/li>\n<li><strong>Color<\/strong><\/li>\n<li><strong>Width<\/strong><\/li>\n<li><strong>Spacing<\/strong><\/li>\n<li><strong>Opacity<\/strong><\/li>\n<li><strong>Margins<\/strong><\/li>\n<\/ul>\n<p>These adjustments help create a more cohesive UI and can subtly guide the user&#8217;s eye throughout the page.<\/p>\n<h2>Styling Horizontal Rules with CSS<\/h2>\n<p>Here are a few ways to enhance the <strong>&lt;hr&gt;<\/strong> tag using CSS. Include these styles in your stylesheet or inline as needed.<\/p>\n<h3>1. Changing Color and Thickness<\/h3>\n<pre><code>hr {\n  border: none;\n  height: 2px;\n  background-color: #444;\n}<\/code><\/pre>\n<p>In this example, we remove the default border and set a specific height and background color. That gives a bolder, more modern look.<\/p>\n<h3>2. Using Width and Alignment<\/h3>\n<pre><code>hr {\n  width: 60%;\n  margin: 20px auto;\n  height: 4px;\n  background-color: #008CBA;\n}<\/code><\/pre>\n<p>By setting the width to 60% and using <code>margin: auto<\/code>, the line is centered, creating an elegant divider perfect for content separation in blogs or articles.<\/p>\n<h3>3. Creating Dashed or Dotted Lines<\/h3>\n<pre><code>hr {\n  border: 0;\n  border-top: 2px dashed #bbb;\n}<\/code><\/pre>\n<p>This gives a dashed effect. Swap out <code>dashed<\/code> for <code>dotted<\/code> if you prefer something more subtle or decorative.<\/p>\n<h2>Creative Examples of Styled Lines<\/h2>\n<p>To inspire your creativity, here are a few styled examples:<\/p>\n<h3>Faded Line<\/h3>\n<pre><code>hr {\n  border: none;\n  height: 2px;\n  background: linear-gradient(to right, transparent, #999, transparent);\n}<\/code><\/pre>\n<p>This creates a beautiful fade effect that works well when transitioning between major content sections.<\/p>\n<h3>Double Line<\/h3>\n<pre><code>hr.double-line {\n  border: 0;\n  border-top: 3px double #8c8b8b;\n}<\/code><\/pre>\n<p>The double stripe adds a touch of sophistication, ideal for resumes or formal documents.<\/p>\n<img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"1620\" src=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/white-plane-in-the-sky-html-css-divider-line-elegant.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/white-plane-in-the-sky-html-css-divider-line-elegant.jpg 1080w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/white-plane-in-the-sky-html-css-divider-line-elegant-200x300.jpg 200w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/white-plane-in-the-sky-html-css-divider-line-elegant-683x1024.jpg 683w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/white-plane-in-the-sky-html-css-divider-line-elegant-768x1152.jpg 768w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/white-plane-in-the-sky-html-css-divider-line-elegant-1024x1536.jpg 1024w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/>\n<h2>Advanced Usage Alternatives<\/h2>\n<p>Sometimes you may want more customization than <code>&lt;hr&gt;<\/code> allows. Here are some advanced CSS and HTML techniques to create fully flexible lines.<\/p>\n<h3>Using a Pseudo-Element<\/h3>\n<pre><code>.custom-line::before {\n  content: '';\n  display: block;\n  width: 80%;\n  height: 2px;\n  margin: 20px auto;\n  background-color: #5a5a5a;\n}<\/code><\/pre>\n<p>This method avoids adding an HTML element, allowing you to insert dividers dynamically through CSS classes and pseudo-elements.<\/p>\n<h3>Divider with Text<\/h3>\n<p>To create a divider that also contains centered text, you can combine CSS with a few structural HTML elements:<\/p>\n<pre><code>&lt;div class=\"divider\"&gt;\n  &lt;span&gt;OR&lt;\/span&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<pre><code>.divider {\n  text-align: center;\n  border-bottom: 1px solid #ccc;\n  line-height: 0.1em;\n  margin: 20px 0 20px;\n}\n\n.divider span {\n  background: #fff;\n  padding: 0 10px;\n}<\/code><\/pre>\n<p>This technique is popular in login and signup screens, where you want to separate social login buttons from traditional methods.<\/p>\n<img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"720\" src=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-close-up-of-a-light-switch-on-a-wall-divider-with-text-modern-form-button.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-close-up-of-a-light-switch-on-a-wall-divider-with-text-modern-form-button.jpg 1080w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-close-up-of-a-light-switch-on-a-wall-divider-with-text-modern-form-button-300x200.jpg 300w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-close-up-of-a-light-switch-on-a-wall-divider-with-text-modern-form-button-1024x683.jpg 1024w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-close-up-of-a-light-switch-on-a-wall-divider-with-text-modern-form-button-768x512.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/>\n<h2>Responsive Considerations<\/h2>\n<p>When styling your separators, make sure they work well across multiple screen sizes. Responsive design is essential in today&#8217;s web development practices. For instance, avoid fixed widths in pixels if the page will be viewed on both desktop and mobile:<\/p>\n<pre><code>hr {\n  width: 80%;\n  max-width: 600px;\n  margin: 1rem auto;\n}<\/code><\/pre>\n<p>This ensures that the divider never becomes too narrow or overextends on large screens.<\/p>\n<h2>When Not to Use &lt;hr&gt;<\/h2>\n<p>Though the <code>&lt;hr&gt;<\/code> tag is semantically correct for indicating a thematic break, it&#8217;s not always appropriate. If you simply want a visual line without semantic meaning, a styled <code>&lt;div&gt;<\/code> might make more sense:<\/p>\n<pre><code>&lt;div style=\"height:1px; background:#ccc; margin:20px 0;\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>This gives you complete visual control without implying meaning to screen readers.<\/p>\n<h2>Accessibility Best Practices<\/h2>\n<p>Keep in mind that not all users \u201csee\u201d pages in the traditional sense. Using semantic HTML helps screen readers interpret your content better. The <code>&lt;hr&gt;<\/code> tag is recognized by screen readers like NVDA and VoiceOver, and is usually announced as \u201cseparator.\u201d<\/p>\n<p>However, stylistic lines created with CSS or non-semantic elements should be accompanied by <code>aria<\/code> attributes when necessary:<\/p>\n<pre><code>&lt;div role=\"separator\" aria-orientation=\"horizontal\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>This helps ensure your content remains accessible to everyone.<\/p>\n<h2>Use Cases for Separation Lines<\/h2>\n<p>Here are some scenarios where horizontal separators significantly improve usability and design:<\/p>\n<ul>\n<li><em>To break long articles into sections<\/em><\/li>\n<li><em>Between portfolio projects<\/em><\/li>\n<li><em>Under headers for emphasis<\/em><\/li>\n<li><em>In forms to separate fields or categories<\/em><\/li>\n<li><em>In footers to distinguish navigation links from contact details<\/em><\/li>\n<\/ul>\n<img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"720\" src=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-stylized-image-of-a-desert-like-area-form-design-separation-field-sections.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-stylized-image-of-a-desert-like-area-form-design-separation-field-sections.jpg 1080w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-stylized-image-of-a-desert-like-area-form-design-separation-field-sections-300x200.jpg 300w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-stylized-image-of-a-desert-like-area-form-design-separation-field-sections-1024x683.jpg 1024w, https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-stylized-image-of-a-desert-like-area-form-design-separation-field-sections-768x512.jpg 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/>\n<h2>Conclusion<\/h2>\n<p>Adding and styling separation lines in HTML may seem minor at first glance, but it&#8217;s a vital detail in the toolbox of effective web design. The humble <code>&lt;hr&gt;<\/code> tag, when combined with modern CSS styling techniques, becomes a powerful visual cue that improves flow, readability, and structure across your website.<\/p>\n<p>Experiment with different styles, directions, and implementations. Whether you choose a subtle fade line, a bold color block, or a textured divider with text, the key is to stay consistent with your site\u2019s overall design theme. A well-placed, well-styled divider can truly transform your content layout from good to great.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When building web pages, one often overlooked but highly effective design element is the separation line, commonly referred to as a horizontal rule or divider. Whether you&#8217;re aiming to break &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"How to Add and Style Separation Lines in HTML\" class=\"read-more button\" href=\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#more-10812\" aria-label=\"Read more about How to Add and Style Separation Lines in HTML\">Read more<\/a><\/p>\n","protected":false},"author":88,"featured_media":10813,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[495],"tags":[],"class_list":["post-10812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add and Style Separation Lines in HTML - Save the Video Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add and Style Separation Lines in HTML - Save the Video Blog\" \/>\n<meta property=\"og:description\" content=\"When building web pages, one often overlooked but highly effective design element is the separation line, commonly referred to as a horizontal rule or divider. Whether you&#8217;re aiming to break ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Save the Video Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-07T12:51:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T12:54:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"648\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jonathan Dough\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan Dough\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\"},\"author\":{\"name\":\"Jonathan Dough\",\"@id\":\"https:\/\/savethevideo.net\/blog\/#\/schema\/person\/2fd5bb6675327a328b726eb409570700\"},\"headline\":\"How to Add and Style Separation Lines in HTML\",\"datePublished\":\"2025-10-07T12:51:02+00:00\",\"dateModified\":\"2025-10-07T12:54:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\"},\"wordCount\":832,\"publisher\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\",\"url\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\",\"name\":\"How to Add and Style Separation Lines in HTML - Save the Video Blog\",\"isPartOf\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg\",\"datePublished\":\"2025-10-07T12:51:02+00:00\",\"dateModified\":\"2025-10-07T12:54:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage\",\"url\":\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg\",\"contentUrl\":\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg\",\"width\":1080,\"height\":648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/savethevideo.net\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add and Style Separation Lines in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/savethevideo.net\/blog\/#website\",\"url\":\"https:\/\/savethevideo.net\/blog\/\",\"name\":\"Save the Video Blog\",\"description\":\"Everything you need to know about videos\",\"publisher\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/savethevideo.net\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/savethevideo.net\/blog\/#organization\",\"name\":\"Save the Video Blog\",\"url\":\"https:\/\/savethevideo.net\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/savethevideo.net\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2021\/02\/cropped-stv-logo.png\",\"contentUrl\":\"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2021\/02\/cropped-stv-logo.png\",\"width\":500,\"height\":119,\"caption\":\"Save the Video Blog\"},\"image\":{\"@id\":\"https:\/\/savethevideo.net\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/savethevideo.net\/blog\/#\/schema\/person\/2fd5bb6675327a328b726eb409570700\",\"name\":\"Jonathan Dough\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/savethevideo.net\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9afc32c64534e0fac8123f418680cd8c214b1c82b9a0e765b34eddf7636ede6d?s=96&d=monsterid&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9afc32c64534e0fac8123f418680cd8c214b1c82b9a0e765b34eddf7636ede6d?s=96&d=monsterid&r=g\",\"caption\":\"Jonathan Dough\"},\"url\":\"https:\/\/savethevideo.net\/blog\/author\/jonathand\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add and Style Separation Lines in HTML - Save the Video Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Add and Style Separation Lines in HTML - Save the Video Blog","og_description":"When building web pages, one often overlooked but highly effective design element is the separation line, commonly referred to as a horizontal rule or divider. Whether you&#8217;re aiming to break ... Read more","og_url":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/","og_site_name":"Save the Video Blog","article_published_time":"2025-10-07T12:51:02+00:00","article_modified_time":"2025-10-07T12:54:18+00:00","og_image":[{"width":1080,"height":648,"url":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg","type":"image\/jpeg"}],"author":"Jonathan Dough","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan Dough","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#article","isPartOf":{"@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/"},"author":{"name":"Jonathan Dough","@id":"https:\/\/savethevideo.net\/blog\/#\/schema\/person\/2fd5bb6675327a328b726eb409570700"},"headline":"How to Add and Style Separation Lines in HTML","datePublished":"2025-10-07T12:51:02+00:00","dateModified":"2025-10-07T12:54:18+00:00","mainEntityOfPage":{"@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/"},"wordCount":832,"publisher":{"@id":"https:\/\/savethevideo.net\/blog\/#organization"},"image":{"@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/","url":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/","name":"How to Add and Style Separation Lines in HTML - Save the Video Blog","isPartOf":{"@id":"https:\/\/savethevideo.net\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage"},"image":{"@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg","datePublished":"2025-10-07T12:51:02+00:00","dateModified":"2025-10-07T12:54:18+00:00","breadcrumb":{"@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#primaryimage","url":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg","contentUrl":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2025\/10\/a-picture-of-a-cross-on-a-blue-background-html-css-divider-line-elegant.jpg","width":1080,"height":648},{"@type":"BreadcrumbList","@id":"https:\/\/savethevideo.net\/blog\/how-to-add-and-style-separation-lines-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/savethevideo.net\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add and Style Separation Lines in HTML"}]},{"@type":"WebSite","@id":"https:\/\/savethevideo.net\/blog\/#website","url":"https:\/\/savethevideo.net\/blog\/","name":"Save the Video Blog","description":"Everything you need to know about videos","publisher":{"@id":"https:\/\/savethevideo.net\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/savethevideo.net\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/savethevideo.net\/blog\/#organization","name":"Save the Video Blog","url":"https:\/\/savethevideo.net\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/savethevideo.net\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2021\/02\/cropped-stv-logo.png","contentUrl":"https:\/\/savethevideo.net\/blog\/wp-content\/uploads\/2021\/02\/cropped-stv-logo.png","width":500,"height":119,"caption":"Save the Video Blog"},"image":{"@id":"https:\/\/savethevideo.net\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/savethevideo.net\/blog\/#\/schema\/person\/2fd5bb6675327a328b726eb409570700","name":"Jonathan Dough","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/savethevideo.net\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9afc32c64534e0fac8123f418680cd8c214b1c82b9a0e765b34eddf7636ede6d?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9afc32c64534e0fac8123f418680cd8c214b1c82b9a0e765b34eddf7636ede6d?s=96&d=monsterid&r=g","caption":"Jonathan Dough"},"url":"https:\/\/savethevideo.net\/blog\/author\/jonathand\/"}]}},"_links":{"self":[{"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/posts\/10812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/users\/88"}],"replies":[{"embeddable":true,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/comments?post=10812"}],"version-history":[{"count":1,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/posts\/10812\/revisions"}],"predecessor-version":[{"id":10832,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/posts\/10812\/revisions\/10832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/media\/10813"}],"wp:attachment":[{"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/media?parent=10812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/categories?post=10812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savethevideo.net\/blog\/wp-json\/wp\/v2\/tags?post=10812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}