{"id":19037,"date":"2021-01-19T14:51:05","date_gmt":"2021-01-19T22:51:05","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19037"},"modified":"2022-05-13T10:39:49","modified_gmt":"2022-05-13T17:39:49","slug":"html-new-line","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-new-line\/","title":{"rendered":"HTML New Line Using br and pre"},"content":{"rendered":"\n<p><em>You can add a new line to an HTML page using the &lt;br&gt; or &lt;pre&gt; tags. The &lt;br&gt; tag adds a break in the page. The &lt;pre&gt; tag formats text exactly as the text appears in your code. If there are any new lines within the &lt;pre&gt; tag, those will be reflected on the final page.<\/em><\/p>\n\n\n\n<p>Have you ever wanted to add a new line onto your web page? You cannot just add a new line using the enter character. Instead, you need to use one of the HTML tags built for the purpose of creating new lines.<\/p>\n\n\n\n<p>In this tutorial, we&#8217;re going to discuss the HTML &lt;br&gt; and &lt;pre&gt; tags. Both tags let you add new lines into your HTML text. Without further ado, let&#8217;s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML New Line: &lt;br&gt; and &lt;pre&gt;<\/h2>\n\n\n\n<p>Sometimes when we are writing HTML, we need to add line breaks or white space to the UI. These spaces will make the web page more readable. There are two ways to add a new line in HTML:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&lt;br&gt; tag: Creates a line break.<\/li><li>&lt;pre&gt; tag: Formats text exactly as it is written in your editor.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">HTML &lt;br&gt; Tag<\/h2>\n\n\n\n<p>We can add a new line to our text using the &lt;br&gt; tag. This tag, known as the break return element, inserts a new line after the previous element.<\/p>\n\n\n\n<p>The syntax for this tag is:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;p&gt;\nTest&lt;br&gt;\n&lt;\/p&gt;<\/pre><\/div>\n\n\n\n<p>The &lt;br&gt; tag adds a new line after the word &#8220;Test&#8221;. This tag does not have a closing tag, Instead, you only need to add &lt;br&gt; to any place where you want a new line. Let&#8217;s look at a more detailed example:<\/p>\n\n\n\n<p>Here it is used after each line in an address:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n   &lt;meta charset=\"UTF-8\"&gt;\n   &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n   &lt;title&gt;Line Breaks&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n   &lt;div&gt;\n       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, veritatis. Soluta pariatur nesciunt voluptatum id incidunt minus ratione obcaecati laborum unde? Voluptatibus officia quia ducimus odio labore atque aperiam sint. Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque dolores provident animi deserunt maxime. Officiis explicabo odit vitae. Doloremque nemo nobis voluptates ducimus aperiam libero maiores accusamus earum ipsam voluptate! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea nostrum commodi et exercitationem, maiores eum facere dicta repellendus laborum voluptatibus amet ipsam animi repellat distinctio deleniti quis? Dicta, aperiam nobis.&lt;\/p&gt;\n \n       &lt;address&gt;\n           &lt;span&gt;123 Main St&lt;\/span&gt;&lt;br&gt;\n           &lt;span&gt;Hometown, USA&lt;\/span&gt;&lt;br&gt;\n           &lt;span&gt;23455-2345&lt;\/span&gt;\n       &lt;\/address&gt;\n       &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos tempora modi eius omnis provident sit itaque vel ad porro nulla vero sequi ullam aperiam placeat consectetur, assumenda in autem dolorum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, cumque tenetur quos sit assumenda consectetur voluptas veritatis soluta. Alias accusamus similique odio iste. Laudantium vitae exercitationem illum suscipit assumenda enim! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dignissimos architecto deleniti debitis alias recusandae, optio ab nihil in neque nam impedit at a corporis delectus quas! Aliquid, modi earum. Quidem.&lt;\/p&gt;\n   &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>In this code, we use the &lt;br&gt; tag after each <a href=\"https:\/\/careerkarma.com\/blog\/html-span\/\">HTML &lt;span&gt; tag<\/a> in the &lt;address&gt; tag. This adds a new line to each part of the address.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML &lt;pre&gt; Tag<\/h2>\n\n\n\n<p>The HTML &lt;pre&gt; tag embeds preformatted text into your code. This tag will insert text exactly as we input it in the markup. So, any line breaks in the text will appear in the final code.<\/p>\n\n\n\n<p>Unlike the &lt;br&gt; tag, the &lt;pre&gt; element has an opening and closing tag. Here is the syntax for the &lt;pre&gt; tag in HTML code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;pre&gt;\nThis is a sentence.\n&lt;\/pre&gt;<\/pre><\/div>\n\n\n\n<p>This code formats the text &#8220;This is a sentence&#8221; exactly as it appears between the &lt;pre&gt; tags.<\/p>\n\n\n\n<p>The quirk with the <em>&lt;pre&gt;<\/em> tag is that everything is entered <em>exactly <\/em>as you write it in the editor.<\/p>\n\n\n\n<p>Copy\/pasted text does not have any break returns. So, copy\/pasted text may not appear as you expect. The compiler is reading it as one long continuous line of text. By adding some physical returns (by hitting the return or enter key), the expected behavior will happen.&nbsp;<\/p>\n\n\n\n<p>Let&#8217;s take a look at a more detailed example of the &lt;pre&gt; tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n   &lt;meta charset=\"UTF-8\"&gt;\n   &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n   &lt;title&gt;Line Breaks&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body style=\"max-width: 800px; width: 100%;\"&gt;\n   &lt;pre style=\"width: 100%;\"&gt;\n       &lt;p style=\"width: 800px;\"&gt;\n       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut temporibus dolores\n       iure molestias porro, esse, ducimus provident ipsam voluptas rerum veniam vero\n       inventore tempora molestiae error sapiente veritatis, neque eligendi. Lorem ipsum\n       dolor sit amet consectetur adipisicing elit. Accusamus soluta ipsam eligendi\n       nesciunt hic explicabo vel doloremque quod eaque minima. Fugit enim fugiat neque\n       quos, eligendi commodi sint architecto repellendus? Lorem ipsum dolor sit amet\n       consectetur adipisicing elit. Laboriosam, saepe ipsam! Fugiat id quod esse\n       obcaecati vitae at commodi distinctio, praesentium labore eveniet corporis aut,\n       sint qui nostrum iure in!\n       &lt;\/p&gt;\n \n       &lt;address&gt;\n           2345 Main St.\n           Hometown, Anywhere, USA\n           12345-3456\n       &lt;\/address&gt;\n \n       &lt;p style=\"width: 800px; height: 500px; background: pink;\"&gt;\n      \n       Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque assumenda,\n       explicabo aspernatur odit saepe a dicta eveniet accusamus laudantium,\n       molestiae quae sunt cumque iusto? Tenetur eligendi architecto atque tempora.\n      \n       Placeat? Lorem ipsum dolor sit amet consectetur, adipisicing elit.\n       Ullam sit libero quibusdam, ex ut, possimus iure non architecto\n       doloremque consectetur quam eligendi repellat facere vero omnis officiis\n       aperiam modi ea. Lorem ipsum dolor sit amet consectetur adipisicing elit.\n       Iusto quas, autem impedit, ratione enim porro illum fugit natus voluptatem\n       sunt error non accusamus nulla blanditiis aspernatur nemo repudiandae sequi\n       reiciendis!\n      \n       &lt;\/p&gt;\n   &lt;\/pre&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>We add a &lt;pre&gt; tag immediately after the &lt;body&gt; tag in our code. All the text within the tag &#8212; our HTML paragraph tags and &lt;address&gt; tag &#8212; is formatted as it appears in the text editor.<\/p>\n\n\n\n<p>We do not need to use &lt;br&gt; tags in the address. This is because we have inserted new lines using the enter key in our text editor.<\/p>\n\n\n\n<p>Usually, this would not let us add new lines to our document. Because we have used the &lt;pre&gt; tag, our new lines created with the enter key appear in the final document.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>There are two ways to insert line breaks into HTML: <em>&lt;br&gt;<\/em> and <em>&lt;pre&gt;<\/em>.&nbsp;The &lt;br&gt; tag is useful if you want to add a single new line in a specific position. &lt;pre&gt; is better if you have a block of text that you want to appear as it is in your text editor.<\/p>\n\n\n\n<p>Do you want to learn more about coding in HTML? We have a <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">How to Learn HTML guide<\/a> that lists top courses and resources you can use to advance your knowledge.<\/p>\n","protected":false},"excerpt":{"rendered":"You can add a new line to an HTML page using the &lt;br&gt; or &lt;pre&gt; tags. The &lt;br&gt; tag adds a break in the page. The &lt;pre&gt; tag formats text exactly as the text appears in your code. If there are any new lines within the &lt;pre&gt; tag, those will be reflected on the final&hellip;","protected":false},"author":77,"featured_media":19038,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-19037","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML New Line Using br and pre: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"You can use new lines, the tag, to create a separation of concerns in the layout of your HTML elements. Learn how on CareerKarma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-new-line\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML New Line Using br and pre\" \/>\n<meta property=\"og:description\" content=\"You can use new lines, the tag, to create a separation of concerns in the layout of your HTML elements. Learn how on CareerKarma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-new-line\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-19T22:51:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-13T17:39:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/business-computer-contemporary-desk-218863.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\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:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"HTML New Line Using br and pre\",\"datePublished\":\"2021-01-19T22:51:05+00:00\",\"dateModified\":\"2022-05-13T17:39:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/\"},\"wordCount\":732,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/business-computer-contemporary-desk-218863.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/\",\"name\":\"HTML New Line Using br and pre: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/business-computer-contemporary-desk-218863.jpg\",\"datePublished\":\"2021-01-19T22:51:05+00:00\",\"dateModified\":\"2022-05-13T17:39:49+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"You can use new lines, the tag, to create a separation of concerns in the layout of your HTML elements. Learn how on CareerKarma.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/business-computer-contemporary-desk-218863.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/07\\\/business-computer-contemporary-desk-218863.jpg\",\"width\":1020,\"height\":680,\"caption\":\"business computer contemporary desk\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html-new-line\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML New Line Using br and pre\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML New Line Using br and pre: A Step-By-Step Guide | Career Karma","description":"You can use new lines, the tag, to create a separation of concerns in the layout of your HTML elements. Learn how on CareerKarma.","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:\/\/careerkarma.com\/blog\/html-new-line\/","og_locale":"en_US","og_type":"article","og_title":"HTML New Line Using br and pre","og_description":"You can use new lines, the tag, to create a separation of concerns in the layout of your HTML elements. Learn how on CareerKarma.","og_url":"https:\/\/careerkarma.com\/blog\/html-new-line\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2021-01-19T22:51:05+00:00","article_modified_time":"2022-05-13T17:39:49+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/business-computer-contemporary-desk-218863.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"HTML New Line Using br and pre","datePublished":"2021-01-19T22:51:05+00:00","dateModified":"2022-05-13T17:39:49+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/"},"wordCount":732,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/business-computer-contemporary-desk-218863.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-new-line\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/","url":"https:\/\/careerkarma.com\/blog\/html-new-line\/","name":"HTML New Line Using br and pre: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/business-computer-contemporary-desk-218863.jpg","datePublished":"2021-01-19T22:51:05+00:00","dateModified":"2022-05-13T17:39:49+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"You can use new lines, the tag, to create a separation of concerns in the layout of your HTML elements. Learn how on CareerKarma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-new-line\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/business-computer-contemporary-desk-218863.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/business-computer-contemporary-desk-218863.jpg","width":1020,"height":680,"caption":"business computer contemporary desk"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-new-line\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"HTML New Line Using br and pre"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19037"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19037\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19038"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}