{"id":67031,"date":"2011-12-17T08:00:32","date_gmt":"2011-12-17T13:00:32","guid":{"rendered":"http:\/\/wpmu.org\/?p=67031"},"modified":"2022-03-02T05:34:25","modified_gmt":"2022-03-02T05:34:25","slug":"daily-tip-how-to-add-a-horizontal-line-to-a-wordpress-post-or-page","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/daily-tip-how-to-add-a-horizontal-line-to-a-wordpress-post-or-page\/","title":{"rendered":"How to Add a Horizontal Line to a WordPress Post or Page"},"content":{"rendered":"<p>Sometimes making different sections of a post distinctly separate from each other can go a long way in making your post more readable. In some cases, embedding a horizontal line, like this one \u2026<\/p>\n<hr \/>\n<p>is just the answer.<\/p>\n<p>For example, in a recent post here on WPMU, I had over a hundred different graphics that needed to be separated (<a href=\"https:\/\/wpmudev.com\/blog\/105-weird-and-wonderful-404-error-pages\/\" target=\"_blank\" rel=\"noopener\">105 Weird and Wonderful 404 Error Page<\/a>). Horizontal lines were perfect for this.<\/p>\n<p>But how do you do that?<\/p>\n<p>Well, it\u2019s pretty easy. Just switch to the HTML view in your visual editor, and insert the following code where you\u2019d like the horizontal line to appear.<\/p>\n<pre>&lt;hr \/&gt;<\/pre>\n<p>If you\u2019d like more than one line, just do that multiple times.<\/p>\n<pre>&lt;hr \/&gt;\r\n&lt;hr \/&gt;<\/pre>\n<p><a rel=\"lightbox[67031]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/daily-tip-how-to-add-a-horizontal-line-to-a-wordpress-post-or-page\/horizontal-code\/\" rel=\"attachment wp-att-67034\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-67034\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2011\/12\/horizontal-code.jpg\" alt=\"Post image\" aria-hidden=\"true\" width=\"633\" height=\"573\" \/><\/a><\/p>\n<h2>Styling<\/h2>\n<p>There are also a number of styles you can apply to your lines such as color, size, alignment, etc. In the newest version of HTML (HTML5), you will need to use CSS to style your lines.\u00a0 You can read more about horizontal rules (this is what \u201chr\u201d technically stands for) at <a href=\"http:\/\/www.w3schools.com\/html5\/tag_hr.asp\" rel=\"noopener\" target=\"_blank\">w3schools.com<\/a>.<\/p>\n<p>And that\u2019s it &#8212; a simple solution that can make your post both more attractive and more readable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use a line to clearly separate different sections in your posts.<\/p>\n","protected":false},"author":84404,"featured_media":206238,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[390],"tutorials_categories":[],"class_list":["post-67031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-code"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/67031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/84404"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=67031"}],"version-history":[{"count":6,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/67031\/revisions"}],"predecessor-version":[{"id":206239,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/67031\/revisions\/206239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/206238"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=67031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=67031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=67031"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=67031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}