Are you struggling with your first HTML document , but have you noticed that pressing the Enter key on your keyboard has no effect on the carriage return of the text you are typing, which always continues to appear on the same line? Don’t worry, this is quite normal behavior: like all elements in HTML, even the “carriage return” requires the insertion of specific tags, unless you are using editors that can add them automatically.
However, if this is not your case and you are trying to create your web page using the simple Windows Notepad, this guide will surely come in handy, in which I am going to explain to you in detail how to wrap in HTML . Specifically, I will explain the difference and how to use the most famous tags that allow you to generate a “line break” and, for completeness of information, I will also explain how to divide words that are too long, with the help of CSS .
So, without waiting any longer, make yourself comfortable and carefully read everything I have to explain to you on the subject: I’m sure that, at the end of reading this guide, you will have perfectly understood which tags or styles you should use to get the desired result. Enjoy your reading and have fun!
Index
- How to wrap in HTML: tag
- <br>
- <hr>
- <div>
- <p>
- Title tags
- How to wrap in HTML with CSS
How to wrap in HTML: tag
First of all, let me list the most used HTML tags that allow you to wrap a text: pay close attention to the ideal methods and conditions of use, the aesthetic rendering of the page is at stake!
<br>
The most basic HTML tags that you can use to wrap it <br> , or break line ( line break , in Italian). It is an empty tag, that is, it does not include a closing element, it does not need any attributes and must be placed at the end of the last word after which you intend to go to the head.
This tag can be nested with other tags and has the effect of inserting subsequent words on a new line, without any spacing from the previous one. To give you an example, the line of code Oggi piove<br>ma domani dovrebbe esserci il solewill produce the following result.
Today it rains
but tomorrow it should be sunny.
If necessary, it is still possible to use more consecutive <br> elements, to increase the spacing, but this is a practice not recommended, which could result in incorrect formatting of the text on responsive elements (those that automatically adapt to the mode of visualization, e.g. from desktop or mobile), or for voice reading software .
For this reason, the <br> tag should only be used to separate phrases, sentences or concepts purely visually (eg to distinguish stanzas in a poem), but not to detach structurally different page elements from each other. If you intend to achieve this, I recommend that you use the <div> or <p> tags instead.
<hr>
The acronym hr stands for horizontal rule and the <hr> tag is used to separate two pieces of text by inserting a horizontal line between them. Just like the <br> tag, it is an empty element (which therefore does not include a closing tag) and must be positioned at the end of the sentence after which you want to go to the head. Below I show you the result you can get by typing the line of code Oggi piove<hr>ma domani dovrebbe esserci il sole.
Today it’s raining
but tomorrow it should be sunny.
This element, initially, provided the existence of attributes (eg. align, color, noshade, size, widthAnd so on) that allowed to define the appearance of the separation line. To date, however, these attributes have been deprecated, in favor of definition via CSS: for example, the code <hr style=”border: 6px solid pink;”>will produce a 6-pixel thick, continuous, pink line as a result.
<div>
The <div> tag , unlike those seen previously, is a container element , designed with the express purpose of separating parts of a document that have syntactically or logically different contents. In practice, the <div>, which must be accompanied by the closing tag </div>, is a “box” that contains other elements, often used – in conjunction with the class attribute – to define the aesthetic style of these using CSS.
Everything following the closing </div> tag is “written” on a new line but without any spacing or separating characters from the previous one. Here, for example, is how the browser interprets the line of code <div>Oggi piove</div><div>ma domani dovrebbe esserci il sole</div>.
Today it’s raining
but tomorrow it should be sunny
The <div> tag supports a large number of attributes, which can alter the functioning of the elements inside them or their graphic style (in this case, it is generally preferred to use the attribute classand specify the formatting of the elements inside it through CSS).
Personally, I believe that this container tag should only be used to separate page elements and / or styles, and not simply as a “line break” indicator, unless you intend to define CSS classes to be used to format text in a certain way.
<p>
The <p> tag represents a paragraph- like element , and this is exactly what the latter term implies: a separator between paragraphs, which can be used to wrap text (inserting a white space between the following paragraph and the and / or by applying a specific indentation to the first line of the same), but also to structurally separate elements connected to each other (e.g. form boxes) within a document.
Normally, the textual content of an entire paragraph should be enclosed in the <p> and </p> tags; everything following the closing tag will be written on a new line, separated from the previous one with a space. Here is the final look of the line of code <p>Oggi piove</p><p>ma domani dovrebbe esserci il sole</p>.
Today it’s raining
but tomorrow it should be sunny
Just like the <div> tag, the <p> tag also supports almost all HTML global attributes, including those for defining its appearance, margins, line spacing, leading / trailing spacing, and so on. Some of these attributes are deprecated and should ideally be manipulated exclusively through CSS.
Title tags
By definition, HTML provides for the existence of six specific tags, to be used to define titles, subtitles and further subdivisions for the elements of a specific block of text: <h1> , <h2> , <h3> , <h4> , <h5> and <h6> . Each of them has a closing tag, and everything that comes after it is “written” by the browser on a new line of the document.
The default HTML attributes for title tags see a particular text formatting for each of them (the <h1> tag is marked by the largest text, the <h6> tag by the smallest one) and are spaced with respect to the indicated elements both before and after. Text formatting can be easily manipulated using global HTML attributes, or CSS.
On a practical level, however, pay close attention to the use of so-called “headers”, as they could affect the indexing of the page for SEO purposes : inserting text inside a <hX> </hX> , in fact, does understand to the search engine analyzer that this is an important element, which should easily jump to the user’s eyes, and abusing it could cause the diametrically opposite effect, negatively affecting the positioning of the page.
Personally, I suggest you use the <h1> tag to write the title and / or the main theme of the text, the <h2> tags for the subdivision into chapters and, if necessary, the <h3> tags for the subdivision into sub-chapters; try to avoid using multiple title categories together unless you actually need them.
Finally, carefully avoid using the <h1>… <h6> tags to alter the size or formatting of the text : for this purpose, use the </div> and </p> tags, appropriately manipulated with specific CSS classes.
How to wrap in HTML with CSS
If you have some notion about Web “programming”, you will know perfectly well that HTML is used to define what the elements of a page are and how they are arranged, while CSS is mainly used to alter the aesthetics (and sometimes the behavior) of the same. .
However, there is a specific case in which CSS3 can be used to wrap text: when a word is too long and there is no space between its characters . I’ll give you an example: by inserting a particularly long sequence of continuous letters inside a container with a fixed horizontal dimension, the word that derives from it, if it does not contain white spaces, comes out to the right of the box, negatively altering the aesthetics of the page.
To work around this problem, simply declare the word-wrap property in the CSS style of the container in question and set it to the break-word value . I’ll give you an example: the line of code <p style=”word-wrap: break-word;”>Supercalifragilistichespiralidoso</p>causes the word – very long – included in the <p> container to be broken on one or more lines, when the space in the box is insufficient to contain it.
SupercalifragilisticSpiralidosoThis SympatheticNursery Rhyme Doesn’t HaveSpaces Of Purpose
For more information on the use of various tags and styles within an HTML document, or on the use of CSS styles, I refer you to reading my guides on how to create an HTML page and how to create an HTML website .
