Understanding the Web
How to create a website
Parts of an HTML page
Structure of an HTML Document
- The Outer Structure of an HTML Document
- Parents, Children, Descendants and Siblings
- Setting Up the Basic Document Structure
Creating and viewing a WEB PAGE
Text formatting in HTML
- Basic text formatting elements
- Creating Breaks
- Abbreviations, Definitions, Quotations and Citations
- Working with language elements
- Other text elements
- More formatting elements
Organising information using lists
Structure content with tables
Data collection with forms
- How a form looks like?
- Creating forms
- Input tags
- Text fields
- Password fields
- Checkboxes and radio buttons
- Hidden fields
- File upload fields
- Drop-down list fields
- Multiline text boxes
- Submit and Reset buttons
Navigation with links
Displaying images
There are two elements that you can use to deal with line breaks in content: the br and wbr elements.
Forcing a Line Break
The br element introduces a line break. The style convention is to move subsequent content onto a newline.
Note: The br element may be used only when line breaks are part of the content. You must not use the br element to create paragraphs or other groupings of content.
<html>
<head>
<title>Example</title>
</head>
<body>
I WANDERED lonely as a cloud<br />
That floats on high o'er vales and hills,<br />
When all at once I saw a crowd,<br />
A host, of golden daffodils;
</body>
</html>
I WANDERED lonely as a cloud
That floats on high o’er vales and hills,
When all at once I saw a crowd,
A host, of golden daffodils;
Indicating an Opportunity for a Safe Line Break
The wbr element is new to HTML5 and indicates where the browser could reasonably insert a line break to wrap content that is larger than the current browser window. It is the browser that makes the decision as to whether or not a line break is actually used. The wbr element is simply a guide to suitable places to break content.
This is a very long word: Super<wbr />califragilistic<wbr />expialidocious. We can help the browser display long words with the <code>wbr</code> element. </body></html>To understand the value of the wbr element, you have to see how the browser operates with and without the use of the element. Try resizing the preview pane above to see how the browser behaves with the wbr element. Repeat the same thing after removing the wbr element. Without the wbr element, the browser encounters the long word and treats it as a single unit. This means that you end up with a large amount of wasted space at the end of the first line of text.