I know the fix to this is probably rather easy, but how would I go about getting a line of HTML to appear like this:
22 West Washngton St.
Northbrook, IL 39492
Instead of:
22 West Washington St.
Northbrook, IL 39492
Essentially, how do I go about eliminating that space between my lines of text? I am currently using <p> tags on both seperate tags. If I put them within the same <p> tag, they simply line up next to each other.
Don't use <p> for each line. They are lines of an address, not separate paragraphs. Use a line break instead (<br>). As a side effect, that will eliminate the margin that you dislike.
There are a million and one ways to do this..
I would recommend the first solution - as it seems the 'proper' way to do it IMHO.
It sounds like you just need to use a line break () after the .st
<p>22 West Washngton St. </br>
Northbrook, IL 39492</p>
Just to add to other ways to do this - one way is.
one would be to use a span tag and a break after st.
<span>22 West Washngton St. </br>
Northbrook, IL 39492</span>
You could do
<p>22 West Washngton St.<br />
Northbrook, IL 39492</p>
The <p> tag is meant to surround paragraphs of text. If you don't want this functionality -- and you don't in this case -- simply use <br /> tag between the two lines.
Add the following into the head tag or your common css.
<head>
<style>
p { margin: 0px; padding: 0px }
</style>
</head>
Use the Firebug in Mozilla Firefox to review CSS at runtime. if there are any more css conflicting particularly at your instance.
Related
I'm looking up HTML text format on MDN and I came across with the example below:
<address>
<p>
Chris Mills<br />
Manchester<br />
The Grim North<br />
UK
</p>
<ul>
<li>Tel: 01234 567 890</li>
<li>Email: me#grim-north.co.uk</li>
</ul>
</address>
So, Instead of using the <br/> tag to separate the <p> content, can I use the <pre> tag? Further than that, can I use it in any context I want some linebreaks?
The <pre> tag cannot be used.
This is because <pre> defines if it is shown exactly like what is written in your source code, in monospace, and that it is pre-formatted text. Just like the comment above, you can use CSS white space.
There is a CSS way you can retain literal newlines and whitespace.
white-space: pre-wrap;
For more information, you can refer here.
Is it possible to add a text or HTML tags after each line with an existing text in Notepad++?
For example, this text:
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[COMPANY]</a></p>
Alexander Hamilton (Alexander Hamilton)
We are waiting in the wings for you (waiting in the wings for you)
You could never back down
You never learned to take your time!
Oh, Alexander Hamilton (Alexander Hamilton)
When America sings for you
Will they know what you overcame?
Will they know you rewrote the game?
The world will never be the same, oh
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[BURR, MEN, & COMPANY]</a></p>
The ship is in the harbor now
See if you can spot him
Just you wait
Another immigrant
Comin’ up from the bottom
Just you wait
His enemies destroyed his rep
America forgot him
The goal is to make the text above be like this: (adding the break tags)
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[COMPANY]</a></p>
Alexander Hamilton (Alexander Hamilton)</br>
We are waiting in the wings for you (waiting in the wings for you)</br>
You could never back down</br>
You never learned to take your time!</br>
Oh, Alexander Hamilton (Alexander Hamilton)</br>
When America sings for you</br>
Will they know what you overcame?</br>
Will they know you rewrote the game?</br>
The world will never be the same, oh</br>
<p class="text-center mb-0 cfont"><a class="cfont" href="#tag">[BURR, MEN, & COMPANY]</a></p>
The ship is in the harbor now</br>
See if you can spot him</br>
Just you wait</br>
Another immigrant</br>
Comin’ up from the bottom</br>
Just you wait</br>
His enemies destroyed his rep</br>
America forgot him</br>
I was using <pre></pre> earlier, but noticed a horizontal scroll has appeared after text wrapping and cannot make it disappear, therefore, I'm discarding it and will opt to use <br> tags.
The problem I have is there's no "common denominator" for each line that I can use to add the <br> tags. Therefore, I'm hoping there could be a regex trick to do this, like detecting an empty space after each line?
It doesn't have to be done in one go, I'm just hoping there is a quicker way to this.
A side question: Is there a a way to add an id or class to each line of these plain texts without adding <a> or <p> tags?
Lots of thanks in advance!
Use
$(?<=.)(?<!>)
Replace with <br/>.
See proof. $(?<=.)(?<!>) will match any end-of-line position that has a character other than line break characters before it and no > character afer.
Let's suppose I have the following paragraphs:
<p>one two </p> <p> three </p><p> four five </p>
Now let's suppose I want to style the words two, three, and four green, in place, without having any other effect on the document's structure or other layout. I basically want a <span> that transcends block level elements like <p>s. How can I accomplish this most simply? I could
<p>o <span>t</span></p><p><span>t</span></p><p><span>f</span> f</p>
But that makes things really messy due to the fact that I employ a markdown parser and have my own custom preprocessing code. What could I do so that there's only one "style begin" mark, and only one "style end" mark per contiguous length of green text?
You can have your text wrapped in a single <p> </p> and have a <span> inside that wrapping around the text you want to style, so:
<p>one <span>two three four</span> five</p>
http://jsfiddle.net/asbd9rdj/
edit
To target specific words in your multiple <p></p> tags, use a <span></span> as an inline element so you can attach styles to it.
<p>one <span>two</span></p>
<p>three <span>four</span></p>
example here: http://jsfiddle.net/79be8L6L/
"Interleaving" HTML tags is invalid. You should use 3 separate <span> tags, like in your second example.
Making your HTML generator handle this is unfortunately a necessary complexity in order to produce proper HTML.
I'm trying to find the best way to code a search result page in HTML5.
Here's how I've done it.
<section>
<header>
<h2>Results for <kbd>this terms</kbd></h2>
</header>
<!-- list of results -->
<ol>
<!-- First result -->
<li>
<article>
<header>
<h3>
<cite>
This is a result
</cite>
</h3>
</header>
<blockquote cite="http://addressofthepage.ch/">
<p>So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.</p>
<footer>
<p>Published <time datetime="2010-07-15T13:15:05-02:00">MMMM DDth, YYYY</time> at the <abbr title="Uniform Resource Locator">URL</abbr> http://addressofthepage.ch/</p>
</footer>
</blockquote>
</article>
</li>
<!-- Second result ... and so on -->
<li>...</li>
</ol>
</section>
The main questions are
<header> mentions the search terms. What is the best tag to use? <kbd>?
Is the <cite> tag related to the <blockquote> if it is positioned in the <header>?
Is not better to put the <cite> in blockquote > footer like <p>[...] at the URL <cite>http://addressofthepage.ch/</cite></p>
All this is also available on a Gist
is meant as a way to show keys. That's why many sites style that tag as a keyboard key. You're not showing keys, you're showing a search term. A <span> should be fine. Maybe add a class like <span class="search-term">.
Semantically speaking, no, it wouldn't be related as it's not a child.
The "correct" HTML for using cite and blockquote would be:
A quote here...
— Foo Bar
gist here of the HTML: https://gist.github.com/OscarGodson/5a3e87ce895b3af952de (stackoverflow appears to have issues rendering HTML when in code tags?!)
Notice the cite and footer tags. As per spec:
The blockquote element represents content that is quoted from another
source, optionally with a citation which must be within a footer or
cite element, and optionally with in-line changes such as annotations
and abbreviations. Content inside a blockquote other than citations
and in-line changes must be quoted from another source, whose address,
if it has one, may be cited in the cite attribute.
Source: http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element
The main thing to remember, and coming from someone who's been doing this for a long, long time, semantics matter, but don't overthink it. Sure, the blockquote has some strict rules about how to properly use it, but browsers will handle whatever you give it fine. Do what makes sense for your app and that should be semantic enough 90% of the time as long as everything isn't a span and div. If you over analyze this stuff you'll spend more time deciding which tag to use instead of just getting stuff done ;)
I have always used either a <br /> or a <div/> tag when something more advanced was necessary.
Is use of the <p/> tag still encouraged?
Modern HTML semantics are:
Use <p></p> to contain a paragraph of text in a document.
Use <br /> to indicate a line break inside a paragraph (i.e. a new line without the paragraph block margins or padding).
Use <div></div> to contain a piece of application UI that happens to have block layout.
Don't use <div /> or <p /> on their own. Those tags are meant to contain content. They appear to work as paragraph breaks only because when the browser sees them, and it "helpfully" closes the current block tag before opening the empty one.
A <p> tag wraps around something, unlike an <input/> tag, which is a singular item. Therefore, there isn't a reason to use a <p/> tag..
I've been told that im using <br /> when i should use <p /> instead. – maxp 49 secs ago
If you need to use <p> tags, I suggest wrapping the entire paragraph inside a <p> tag, which will give you a line break at the end of a paragraph. But I don't suggest just substituting something like <p/> for <br/>
<p> tags are for paragraphs and signifying the end of a paragraph. <br/> tags are for line breaks. If you need a new line then use a <br/> tag. If you need a new paragraph, then use a <p> tag.
Paragraph is a paragraph, and break is a break.
A <p> is like a regular Return in Microsoft Office Word.
A <br> is like a soft return, Shift + Return in Office Word.
The first one sets all paragraph settings/styles, and the second one barely breaks a line of text.
Yes, <p> elements are encouraged and won't get deprecated any time soon.
A <p> signifies a paragraph. It should be used only to wrap a paragraph of text.
It is more appropriate to use the <p> tag for this as opposed to <div>, because this is semantically correct and expected for things such as screen readers, etc.
Using <p /> has never been encouraged:
From XHTML HTML Compatibility Guidelines
C.3. Element Minimization and Empty Element Content
Given an empty instance of an element whose content model is not
EMPTY (for example, an empty title or
paragraph) do not use the minimized
form (e.g. use <p> </p> and not <p />).
From the HTML 4.01 Specification:
We discourage authors from using empty P elements. User agents should ignore empty P elements.
While they are syntactically correct, empty p elements serve no real purpose and should be avoided.
The HTML DTD does not prohibit you from using an empty <p> (a <p> element may contain PCDATA including the empty string), but it doesn't make much sense to have an empty paragraph.
Use it for what? All tags have their own little purpose in life, but no tag should be used for everything. Find out what you are trying to make, and then decide on what tag fits that idea best:
If it is a paragraph of text, or at least a few lines, then wrap it in <p></p>
If you need a line break between two lines of text, then use <br />
If you need to wrap many other elements in one element, then use the <div></div> tags.
The <p> tag defines a paragraph. There's no reason for an empty paragraph.
For any practical purpose, you don’t need to add the </p> into your markup. But if there is a string XHTML adheration requirement, then you would probably need to close all your markup tags, including <p>. Some XHTML analyzer would report this as an error.