So I'm having a sorta minor issue that is really bothering me. I'm trying to make a single line but the live site is separating the h3 and the sup onto two separate lines.
<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> <sup>
Forgot? I got you </sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>
The concept is to have the "Forgot? I got you" and the button be on the same line but spaced a little further from the word "Consent".
As you haven't really provided an exact example of what you want your result to look like, you might consider using the following mark-up :
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
What this does :
<h3> and other heading tags are block level elements, which means that they will take not be rendered inline by default. You can change this by indicating that you want to display them inline by using display:inline; or display:inline-block;
The <font> tag hasn't been used in ages, you are better off simply applying a style attribute to the most relavent tag to style your contents.
You were previously using all of these tags within a <p> tag, which can constitute invalid markup. They have each been broken out, if you need some type of container tag, you can use a <div>.
Replaced the superscript tag <sup> with a small tag <small> to keep everything on the same line. You could replace this if you preferred.
Previously, you were using target="_black", which undoubtedly you meant to be target="_blank" for your <a> tag.
Generally, you would want to avoid using an abundance of inline style tags in favor of using an actual CSS file along with class attributes.
Example
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
Your code needs a lot of work but really you could achieve this with simple CSS. As simple as it gets would be using a vertical-align on a <span> element, unfortunately vertical-align: middle; does NOT work directly on your <p> or <h3> tags. There are plenty of other ways to achieve this with separate <div>'s and all but here is the most basic.
HTML:
<span class="vAlign">
<h3 class="crimson flt-left vAlign">CONSENT</h3>
<p class="vAlign"><a href="http://www.exampledomain.com/example"
target="_black">Forgot? I got you</p>
</span>
And CSS
.flt-left{
float: left;
}
.crimson {
color: crimson;
}
.vAlign {
display:inline-block;
vertical-align: middle;
}
i am trying to display a few labels with a fair bit of space in between them on the same line in an html document. This does work.
How to get this working in a nicer way?
<div>
firstlabel             secondlabel
</div>
You could wrap your 'labels' in <span> tags, give them classes, and add margin with CSS.
Example here: http://jsfiddle.net/peduarte/Rf5kB/
HTML
<div>
<span class="firstLabel">firstlabel</span>
<span class="secondLabel">secondlabel</span>
</div>
CSS
.firstLabel {
margin-right: 50px;
}
You should use a semicolon after  .
<div>
firstlabel secondlabel
</div>
Try this:
<div class="main">
<div class="left">firstlabel</div>
<div class="right">secondlabel</div>
</div>
.main{
width:220px;
}
.left{
width:110px;
float:left;
text-align:left;
}
.right{
width:110px;
float:right;
text-align:right;
}
Sorry but this is a really freaky way to do that. Why don't you place those Labels in <p>-Tags and format the spacing via margin,padding ?
The correct non breakable space entity is , you forgot the semicolon at the end (;). A better way, however, to achieve what you want to do would be to enclose firstlabel and secondlabel in <span> tags and use css to make them stand apart, like suggested by peduarte.
Whether it works depends on the browser; the correct notation is with a semicolon (as mentioned by nyarlathotep). But no-break spaces give you very rough control. A better approach is to use CSS, e.g.
<div><span style="padding-right: 5em">firstlabel</span>secondlabel</div>
You can tune the padding-right value, using whatever units are suitable for your context. But generally, the em unit is most suitable, as it means that the spacing is automatically scaled when font size is changed.
I'm surprised that no one suggested the simple inline style:
<div style="margin-right: 500px;">firstlabel</div>
<label >Subscription Expiry: 2019=04-30 00:00:00<br><br></label>
Subscription Type: paid
Is it sometimes bad to use <BR/> tags?
I ask because some of the first advice my development team gave me was this: Don't use <BR/> ; instead, use styles. But why? Are there negative outcomes when using <BR/> tags?
The main reason for not using <br> is that it's not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks.
In most cases this means just using different elements, for example <p>Stuff</p><p>Other stuff</p>, and then using CSS to space the blocks out properly.
There are cases where <br> is semantically valid, i.e. cases where the line break is part of the data you're sending. This is really only limited to 2 use cases - poetry and mailing addresses.
I think your development team is refering to <br /> in place of margin spacing. To make empty space between elements, use padding / margin styling via CSS.
Bad use of <br />:
<div>
Content
</div>
<br />
<br />
<br />
<br />
<div>
More content...
</div>
Good use of <br />:
<style>
div {
margin-top:10px;
}
</style>
<div>
Content<br />
Line break
</div>
<div>
More content...
</div>
Generally, <br/> is an indication of poor semantic HTML. The most common case is using <br/> to declare paragraph separations, which there are much better ways to do it semantically. See Bed and BReakfast.
There are occasions where it is the proper tag to use, but it is abused often enough that people adopt a "do not use" mentality as to force better semantic thinking.
What was meant by your team was probably not to use <br>s to split between paragraphs.
For example :
<p>I am a paragraph</p>
<p>I am a second paragraph</p>
is the better way to do that, because you can then easily adjust the spaces between paragraphs through CSS.
Other than that, I can not think of anything speaking against line breaks as such.
Same concept applies to why we don't use tables for layout - use tables for tables and CSS for layout.
Use <br/> for break lines in a block of text and CSS if you want to affect the layout.
Specifying the layout directly makes it difficult adapting the site for different page sizes or fonts for example.
If you do this: <BR/> <BR/>
You will get diffrent layout on different browsers.
Deeper:
If you use <BR/> just for line breaks - ok.
If you use <BR/> as a line spacer - not ok.
I will generally always set appropriate margins and padding on elements using CSS - it's a lot less messy than loads of <br />s all over the place apart from being more semantically correct.
Probably the only time I would use a <br /> in preference to the margins and padding set by CSS, even if it's not strictly technically correct, is if it was an isolated incident where slightly more space was needed. If I'd got quite a large stylesheet and it didn't seem worth setting up an additional style just for that one occurence, I may use a <br /> as a one-off.
Like most things, <br />s aren't a bad thing providing they're used correctly.
I try to write my markup in a way that it's easily readable with CSS disabled. If you're just using BRs to add spacing, it's better to use margins and padding.
<br /> should be used for line breaks only, and not to apply style to a page. For example, if you need extra space between paragraphs, give them a class and apply the extra padding to the paragraphs. Don't spread out your paragraphs with <br /><br ><br />
They are to be used to represent newlines. Nothing more. Not to fill up space like as at the average geocities site. There is however only one case wherein they may be useful for other purposes than putting a newline: to clear the floats.
<br style="clear: both;">
Don't use three or more consecutive <br>s, that's a signal you're using them for stylistic purposes and no, you shouldn't.
Some would say a single <br> is enough and instead of two you should use <p></p>, but there are situations (e.g. screenplays) in which you want to introduce a longer pause without implying a change of topic or a new period starting, like a paragraph usually does.
They're fine, if used appropriately. For instance, you shouldn't use them in lieu of <p> tags or to create spacing between elements. You're probably doing something wrong if you ever have two in a row.
Here's an example how <br> can negatively affect styling (run snippet for visuals)
(note the misaligned button and odd space on the right):
button {
width: 70px;
height: 70px;
}
#arrows {
border: solid thin red;
display: inline-block;
}
#arrows span:first-of-type {
text-align: center;
display: block;
}
#moveUp {
margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type {
display: block;
}
*/
<div id="arrows">
<span>
<button id="moveUp" value="üles">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</button>
<br> <!-- note the shifted button and odd space on right -->
<span>or move with keyboard arrows</span>
</div>
In HTML (up to HTML 4): use <br>
In HTML 5: <br> is preferred, but <br/> and <br /> is also acceptable
In XHTML: <br /> is preferred. Can also use <br/> or <br></br>
So use of <br> tag is perfectly valid HTML. But use of <br> is not recommended?
Main reason why not to use <br> is because it's not semantic tag & has no content inside. Its use can be avoided like,
<p>some<br>text<p>
can be marked up without <br> as
<p>some</p>
<p>text<p>
If you are using <br> other purpose like top-spacing etc. that can be achieved via CSS margin property.
Is it possible to insert a tab character in HTML instead of having to type four times?
It depends on which character set you want to use.
There's no tab entity defined in ISO-8859-1 HTML - but there are a couple of whitespace characters other than such as , ,and .
In ASCII, is a tab.
Here is a complete listing of HTML entities and a useful discussion of whitespace on Wikipedia.
It's much cleaner to use CSS. Try padding-left:5em or margin-left:5em as appropriate instead.
No, Tab is just whitespace as far as HTML is concerned. I'd recommend an em-space instead which is this big (→| |←) ...typically 4 spaces wide — and is input as .
You might even be able to get away with using the Unicode character (" ") for it, if you're lucky.
Here is a list of Space characters and “zero-width spaces” in Unicode.
is the answer.
However, they won't be as functional as you might expect if you are used to using horizontal tabulations in word-processors e.g. Word, Wordperfect, Open Office, Wordworth, etc. They are fixed width, and they cannot be customised.
CSS gives you far greater control and provides an alternative until the W3C provide an official solution.
Example:
padding-left:4em
..or..
margin-left:4em
..as appropriate
It depends on which character set you want to use.
You could set up some tab tags and use them similar to how you would use h tags.
<style>
tab1 { padding-left: 4em; }
tab2 { padding-left: 8em; }
tab3 { padding-left: 12em; }
tab4 { padding-left: 16em; }
tab5 { padding-left: 20em; }
tab6 { padding-left: 24em; }
tab7 { padding-left: 28em; }
tab8 { padding-left: 32em; }
tab9 { padding-left: 36em; }
tab10 { padding-left: 40em; }
tab11 { padding-left: 44em; }
tab12 { padding-left: 48em; }
tab13 { padding-left: 52em; }
tab14 { padding-left: 56em; }
tab15 { padding-left: 60em; }
tab16 { padding-left: 64em; }
</style>
...and use them like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabulation example</title>
<style type="text/css">
dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
tab1 { padding-left: 4em; }
tab2 { padding-left: 8em; }
tab3 { padding-left: 12em; }
tab4 { padding-left: 16em; }
tab5 { padding-left: 20em; }
tab6 { padding-left: 24em; }
tab7 { padding-left: 28em; }
tab8 { padding-left: 32em; }
tab9 { padding-left: 36em; }
tab10 { padding-left: 40em; }
tab11 { padding-left: 44em; }
tab12 { padding-left: 48em; }
tab13 { padding-left: 52em; }
tab14 { padding-left: 56em; }
tab15 { padding-left: 60em; }
tab16 { padding-left: 64em; }
</style>
</head>
<body>
<p>Non tabulated text</p>
<p><tab1>Tabulated text</tab1></p>
<p><tab2>Tabulated text</tab2></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab2>Tabulated text</tab2></p>
<p><tab3>Tabulated text</tab3></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab4>Tabulated text</tab4></p>
<p>Non tabulated text</p>
<p><tab3>Tabulated text</tab3></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab4>Tabulated text</tab4></p>
<p><tab1>Tabulated text</tab1></p>
<p><tab2>Tabulated text</tab2></p>
</body>
</html>
Run the snippet above to see a visual example.
Extra discussion
There are no horizontal tabulation entities defined in ISO-8859-1 HTML, however there are some other white-space characters available than the usual  , for example; , and the aforementioned .
It's also worth mentioning that in ASCII and Unicode, is a horizontal tabulation.
Below are the 3 different ways provided by HTML to insert empty space
Type to add a single space.
Type to add 2 spaces.
Type to add 4 spaces.
Try
It is equivalent to four s.
There really isn't any easy way to insert multiple spaces inside (or in the middle) of a paragraph. Those suggesting you use CSS are missing the point. You may not always be trying to indent a paragraph from a side but, in fact, trying to put extra spaces in a particular spot of it.
In essence, in this case, the spaces become the content and not the style. I don't know why so many people don't see that. I guess the rigidity with which they try to enforce the separation of style and content rule (HTML was designed to do both from the beginning - there is nothing wrong with occasionally defining style of an unique element using appropriate tags without having to spend a lot more time on creating CSS style sheets and there is absolutely nothing unreadable about it when it's used in moderation. There is also something to be said for being able to do something quickly.) translates to how they can only consider whitespace characters as being used only for style and indentation.
And when there is no graceful way to insert spaces without having to rely on and tags, I would argue that the resulting code becomes far more unreadible than if there was an appropriately named tag that would have allowed you to quickly insert a large number of spaces (or if, you know, spaces weren't needlessly consumed in the first place).
As it is though, as was said above, your best bet would be to use to insert in the correct place.
It's better to use the pre tag. The pre tag defines preformatted text.
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
know more about pre tag at this link
Have this in CSS:
span.tab{
padding: 0 80px; /* Or desired space*/
}
Then in your HTML have this be your "long tab" in mid sentence like I needed:
<span class="tab"></span>
Saves from the amount of or that you'd need.
, , or can be used.
W3 says...
The character entities and denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.
Read More at W3.org for HTML3
Read More at W3.org for HTML4
Even more at Wikipedia
AFAIK, the only way is to use
If you can use CSS then you can use padding or margin. See Box model, and for Internet Explorer, also read Internet Explorer box model bug.
If you're looking to just indent the first sentence in a paragraph, you could do that with a small CSS trick:
p:first-letter {
margin-left: 5em;
}
If whitespace becomes that important, it may be better to use preformatted text and the <pre> tag.
The <tab> tag never made it into browsers, despite being introduced in HTML3. I've always thought it a real pity because life would be much easier in many circumstances if we had it available to us. But you can easily remedy this to give you a fake <tab> tag. Add the following in the head of your HTML or else (without the style tags) into your CSS:
<style>
tab { padding-left: 4em; }
</style>
From then on, when you need a tab in your document put <tab> in there. It isn't a true tab because it doesn't align to tab-marks, but it works for most needs, without having to dither around with clumsy character entities or spans. It makes it really easy to check your source, and a cinch to format simple things where you don't want to go to the hassle of tables or other more complex "solutions".
One nice aspect of this solution is that you can do a quick search/replace of a text document to replace all TABs with the <tab> tag.
You might be able to define a bunch of true absolute position TABs, then use the appropriate tab (e.g. <tab2> or <tab5> or whatever) where needed, but I haven't found a way to do that without it indenting subsequent lines.
I have used a span with in line styling. I have had to do this as I as processing a string of plain text and need to replace the \t with 4 spaces (appx). I couldn't use as further on in the process they were being interpreted so that the final mark up had non-content spaces.
HTML:
<span style="padding: 0 40px"> </span>
I used it in a php function like this:
$message = preg_replace('/\t/', '<span style="padding: 0 40px"> </span>', $message);
If you needed only one tab, the following worked for me.
<style>
.tab {
position: absolute;
left: 10em;
}
</style>
with the HTML something like:
<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>
You can add more "tabs" by adding additional "tab" styles and changing the HTML such as:
<style>
.tab {
position: absolute;
left: 10em;
}
.tab1 {
position: absolute;
left: 20em;
}
</style>
with the HTML something like:
<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
There is a simple css for it:
white-space: pre;
It keeps the spaces that you add in the HTML rather than unifying them.
You can use a table and apply a width attribute to the first <td>.
<table>
<tr>
<td width="100">Content1</td>
<td>Content2</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
</tr>
</table>
Result
Content1 Content2
Content3 Content4
If you are using CSS, I would suggest the following:
p:first-letter {
text-indent:1em;
}
This will indent the first line like in traditional publications.
Instead of writing four time for space equal to tab, you can write once.
<span style="margin-left:64px"></span>
Consider it like this: one tab is equal to 64 pixels. So this is the space we can give by CSS.
Well, if one needs a long whitespace in the beginning of one line only out of the whole paragraph, then this may be a solution:
<span style='display:inline-block;height:1em;width:4em;'> </span>
If that is too much to write or one needs such tabs in many places, then you can do this
<span class='tab'> </span>
Then include this into CSS:
span.tab {display:inline-block;height:1em;width:4em;}
we can use style="white-space:pre" like this:
<p>Text<tab style="white-space:pre"> </tab>: value</p>
<p>Text2<tab style="white-space:pre"> </tab>: value2</p>
<p>Text32<tab style="white-space:pre"> </tab>: value32</p>
the blank space inside is filled with tabs, the amount of tabs is depend on the text.
it will looks like this:
Text : value
Text2 : value2
Text32 : value32
The ideal CSS code that should be used should be a combination of "display" and "min-width" properties...
display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.
I use a list with no bullets to give the "tabbed" appearance.
(It's what I sometimes do when using MS Word)
In the CSS file:
.tab {
margin-top: 0px;
margin-bottom: 0px;
list-style-type: none;
}
And in the HTML file use unordered lists:
This is normal text
<ul class="tab">
<li>This is indented text</li>
</ul>
The beauty of this solution is that you can make further indentations using nested lists.
A noob here talking, so if there are any errors, please comment.
If you want the TABs
work like tabulators, even in contenteditables
don't want to use the ugly "pre" fonts
then use instead of nbsp's:
<pre class='TAB'> </pre>
Place this in in your CSS:
.TAB {
margin:0; padding:0;
display:inline;
tab-size: 8;
}
Change the tab-size to your needs.
Using CSS and best practice, the dynamic creation of nested, indented menus would be as follows:
Create a style for each nesting, such as indent1, indent2 etc, with each specifying its own left margin. Site structure should rarely go beyond three levels of nesting.
Use a static variable (integer) within the self-recursive function to track the recursion.
For each loop, append the loop number to the word indent, using server side scripting such as PHP or ASP, so that these menus are formatted appropriately by CSS.
Alternatively, loop through the static variable to add spacing using multiple or <pre> tags, or other characters, as appropriate.
From testing the horizontal tab character, I found that it doesn't work as a replacement to multiple in the scenario I described. You may have different results.
Only "pre" tag:
<pre>Name: Waleed Hasees
Age: 33y
Address: Palestine / Jein</pre>
You can apply any CSS class on this tag.
I would simply recommend:
/* In your CSS code: */
pre
{
display:inline;
}
<!-- And then, in your HTML code: -->
<pre> This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>
<t>.</t>
Make sure the color code matches the background
the px is variable to desired length for the tab.
Then add your text after the < t >.< /t >
The period is used as a space holder and it is easier to type, but the '& #160;' can be used in place of the period also making it so the color coding is irrelative.
<head>
<style> t {letter-spacing:35px;} </style>
</head>
<t> </t>
This is useful mostly for displaying paragraphs of text though may come in useful in other portions of scripts.