so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/
Trying to set a page break in the page I'm working on but in the print preview I'm still seeing things on the page that aren't supposed to be there. Can't figure out why this isn't working.
In my css style:
.applicant-break hr {page-break-after:always;}
In my ASP.NET code...partial view of code the start tags are there:
<b>Resume</b>
<br />
<asp:Literal runat="server" ID="litResume"></asp:Literal>
<br />
<br />
<hr class="applicant-break" />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
Any help would be appreciated.
Your css needs to be
hr.applicant-break {page-break-after:always;}
EDIT:
Doing some reading on the W3Schools website, it seems this css property is meant for table elements
"Set the page-breaking behavior to always break after a table element"
EDIT:
Doing some more reading, it seems browsers do support more than the table element, however some browsers have trouble with it on HR and BR tags (Reading here)
try putting a div after the hr like so
<hr />
<div class="applicant-break"></div>
and changing your CSS to
div.applicant-break {page-break-after:always;}
So apparently I'm silly, I was trying to trust the print preview of Chrome instead of just actually printing it myself, upon printing it I see that the page break does in fact work, thanks for your assistance m.t! :)
So fair warning to anyone else reading this, while it is useful it doesn't always give you an accurate look at your print job all the time.
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.
I continuously find places where I need to use the <br /> tag because CSS can't do what I need. Isn't the <br /> considered part of the "design" and not part of document structure? What is the acceptable usage for it? Should the same rules also apply to the <hr />?
Here is an example of where I feel forced to use the <br /> tag:
I want to display this:
<address>1234 south east Main St. Somewhere, Id 54555</address>
like this:
1234 south east main st.
Somewhere, Id 54555
There is nothing wrong with using <br /> or <hr />. Neither of them are deprecated tags, even in the new HTML 5 draft spec (relevant spec info). In fact, it's hard to state correct usage of the <br /> tag better than the W3C itself:
The following example is correct usage of the br element:
<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>
br elements must not be used for separating thematic groups in a paragraph.
The following examples are non-conforming, as they abuse the br element:
<p><a ...>34 comments.</a><br>
<a ...>Add a comment.<a></p>
<p>Name: <input name="name"><br>
Address: <input name="address"></p>
Here are alternatives to the above, which are correct:
<p><a ...>34 comments.</a></p>
<p><a ...>Add a comment.<a></p>
<p>Name: <input name="name"></p>
<p>Address: <input name="address"></p>
<hr /> can very well be part of the content as well, and not just a display element. Use good judgement when it comes to what is content and what is not, and you'll know when to use these elements. They're both valid, useful elements in the current W3C specs. But with great power comes great responsibility, so use them correctly.
Edit 1:
Another thought I had after I first hit "post" - there's been a lot of anti-<table> sentiment among web developers in recent years, and with good reason. People were abusing the <table> tag, using it for site layout and formatting. That's not what it's for, so you shouldn't use it that way. But does that mean you should never use the <table> tag? What if you actually have an honest-to-goodness table in your code, for example, if you were writing a science article and you wanted to include the periodic table of the elements? In that case, the use of <table> is totally justified, it becomes semantic markup instead of formatting. It's the same situation with <br />. When it's part of your content (ie, text that should break at those points in order to be correct English), use it! When you're just doing it for formatting reasons, it's best to try another way.
Just so long as you don't use <br/> to form paragraphs, you're probably alright in my book ;) I hate seeing:
<p>
...lengthy first paragraph...
<br/>
<br/>
...lengthy second paragraph...
<br/>
<br/>
...lengthy third paragraph...
</p>
As for an address, I would do it like this:
<address class="address">
<span class="street">1100 N. Wullabee Lane</span><br/>
<span class="city">Pensacola</span>, <span class="state">Florida</span>
<span class="zip">32503</span>
</address>
But that's likely because I love jQuery and would like access to any of those parts at any given moment :)
<hr /> and <br />, much like everything else, can be abused to do design when they shouldn't be. <hr /> is meant to be used to visually divide sections of text, but in a localized sense. <br /> is meant to do the same thing, but without the horizontal line.
It would be a design flaw to use <hr /> across a site as a design, but in this post, for instance, it would be correct to use both <br /> and <hr />, since this section of text would still have to be a section of text, even if the site layout changed.
<hr/> and <br/> are presentational elements that have no semantic value to the document, so from a purist perspective yes, they ought to be avoided.
Think about HTML not as a presentational tool but rather as a document that needs to be self-describing. <hr/> and <br/> add no semantic value - rather they represent a very specific presentation in the browser.
That all being said, be pragmatic in your approach. Try to avoid them at all cost but if you find yourself coding up the walls and across the ceiling to avoid them then its better to just go ahead and use them. Semantics are important but fringe cases like this are not where they matter the most.
I believe absolutely avoiding usage of a commonly accepted solution (even it is outdated) is the same thing as designing a table with <div> tags instead of <table> tags, just so you can use <div>.
When designing your website, you probably won't require the use of <br /> tags, but I can still imagine them being useful where user input is needed, for example.
I don't see anything wrong with using <br /> but have not come across many situation where I required using them. In most cases, there probably are more elegant (and prettier) solutions than using <br /> tags if this is what you need for vertically seperating content.
I put in a <hr style="display:none"> between sections. For example, between columns in a multi-column layout. In browsers with no support for CSS the separation will still be clear.
No. Why? They're useful constructs.
Adding this addendum (with accompanying HR), in case my brief answer is construed as lacking appropriate consideration. ;)
It can be, and often is, an incredible waste of time -- time someone else is usually paying for -- trying to come up with cross-browser CSS-limited solutions to UI problems that BR and HR tags, and their likes, can solve in two seconds flat. Why some UI folks waste so much time trying to come up with "pure" ways of getting around using tried-and-true HTML constructs like line breaks and horizontal rules is a complete mystery to me; both tags, among many others, are totally legitimate and are indeed there for you to use. "Pure," in that sense, is nonsense.
One designer I worked with simply could not bring himself to do it; he'd waste hours, sometimes days, trying to "code" around it, and still come up with something that didn't work in Opera. I found that totally baffling. Dude, add BR, done. Totally legal, works like a charm, and everyone's happy.
I'm all for abstracting presentation, don't get me wrong; we're all out do to the best work we can. But be sensible. If you've spent five hours trying to figure out some way to achieve, in script, something that BR gives you right now, and the gods won't rain fire down on you for doing it, then do it, and move on. Chances are if it's that problematic, there might be something wrong with your solution, anyway.
Interesting question. I have always used <br/> as a carriage return (and hence as part of content, really). Not sure if that is the right way of going about it, but its served me well.
<hr/> on the other hand...
I'd not say at all costs but if you want to be purist, these tags have nothing to do with structure and everything to layout but HTML is supposed to separate content from presentation. <hr /> can be done through CSS and <br/> through proper use of otehr tags like <p>.
If you do not want to be a purist, use them :)
I think you should seldom need the BR tag in your templates. But at times it can be called for in the content, user generated and system generated. Like if you want to keep a piece of text in the paragraph but need a newline before it.
What are the occasions where you feel you are forced to use BR tags?
<br> is the HTML way of expressing a line break, as there is no other way of doing it.
Physical line breaks in the source code are rightfully ignored (more correctly: treated as a single white space), so you need a markup way to express them.
Not every line break is the beginning of a new paragraph, and packing text into <div>s (for example) just to avoid <br>s seems overly paranoid to me. Why do they bother you?
BR is fine, since a hard line-break could be part of the content, for example in code blocks (even though you'd probably use the PRE-element for that) or lyrics.
HR on the other hand is purely presentational: a horizontal rule, a horizontal line. Use border-top/bottom for neighbouring elements instead.
I personally feel that, in the interest of true separation of content and style, both <br /> and <hr /> should be avoided.
As far as doing away with <br /> tags in my own markup, I use <div> in conjunction with the css margin property to handle anything that needs a line break, and a <span> for anything that would be inline, but of a different "content class" (obviously distinguishing them with the class attribute).
To replace an <hr /> tag with css, I simply create a <div> with the border-top-style css property set to solid and the other three sides set to none. The margin and the padding properties of said <div> then handle the actual placement/positioning of the horizontal line.
Like I said, I'm no expert, my web design experience is mostly a side effect of my work with JSP pages (I am a Java programmer), but I came upon this question during some research and wanted to put my two cents in...
You can use <br> but don't use <hr>.
<BR> — LINE BREAK— This is display information. Still in
common use, but use with restraint.
<HR> — HORIZONTAL RULE— Display info with no semantic value –
never use it. “Horizontal”, by definition, is a visual attribute.
Source: Proper Use Guide for HTML Tags
That's bad usage if you're going Strict.
<br/> and <hr/> are not part of the content. For instance the <hr/> is commonly used to separate blocks of text. But isn't possible to that with border-bottom? And <br/> is seen in many cases as a way to limit text to a certain form, which couldn't be accomplished with css?
Of course you aren't going Strict don't worry to much.
HR has some hacky uses right now in preventing mobile browsers' font inflation algorithms from kicking in.
Also if you have lots of small content separated by HRs, the Googlebot will currently see it as 'N separate entries', which might be useful to you.
BRs should really only be used as a line break within a paragraph, which is a pretty rare typographical usage (except perhaps within a table cell), and I'm not aware of any hacky reason to use them.
Here is an excerpt from a course that helps you learn html.
<form>
<p>Choose your pizza toppings:</p>
<label for="cheese">Extra cheese</label>
<input id="cheese" name="topping" type="checkbox" value="cheese">
<br>
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
<br>
<label for="anchovy">Anchovy</label>
<input id="anchovy" name="topping" type="checkbox" value="anchovy">