I am makeing a blog with django and i have a problom. when ever i write sevral pargraphs into my form and then print the modle on to the html page the two paragraphs gt mushed into one. If anyone knows how i can keep the paragrphs spreat that would be much appricated
You need to wrap the paragraphs in HTML paragraph elements.
For example:
<p> Paragraph one </p>
<p> Paragraph two </p>
I'd recommend this YouTube series if you want to learn more about how to write HTML and CSS.
Related
I am creating a pug template and I am trying to figure out how to output multi line text BUT split on an anchor tag.
I am brand new to pug, so my knowledge is limited to a day.
header.pug
div.col-12
a(href="https://somelink.com" target="_blank").
Learn more
about safety precautions
Desired Output
<div class="col-12">
Learn moreabout safety precautions
</div>
But instead my text of about safety precautions keeps showing up inside of the </a> tag.
If you want text inline you can use the span element which won't break the paragraph:
div.col-12
span
a(href="https://somelink.com" target="_blank").
Learn more
span.
about safety precautions
You could also use the pipe syntax in pug:
div.col-12
a(href="https://somelink.com" target="_blank").
Learn more
| about safety precautions
Personally I prefer the span as more web developers who follow me will understand what's going on. No real negatives to either method though.
I know the following HTML is not valid because the div inside the h2 is a block element:
HTML
<h2>
<div>November 23 2015</div>
<div>This Is My First Blog Post</div>
</h2>
I want to know what the best way to get the date and title of this example blog post heading to display on separate lines with valid HTML. I've done the following which I understand is technically valid:
HTML
<h2>
<span>November 23 2015</span>
<span>This Is My First Blog Post</span>
</h2>
CSS
span { display: block; }
Maybe I'm wrong in thinking the date of this example blog post should be considered part of the heading of the post, and I should just do something like this:
HTML
<p>November 23 2015</p>
<h2>This Is My First Blog Post</h2>
But assuming there is some case where you'd have a legitimate need for a multi line heading, I'm wondering what the best way to do it is.
EDIT
I should add that I know I can also just add a <br> after the first <span>, but the issue with that approach is losing control over the vertical spacing between the lines because adjusting the top/bottom margins/padding doesn't work for inline elements.
This is a perfect use-case for the HTML5 header element. It would be semantically correct to use two separate HTML tags - one for the title, and one for the date - as they are two separate entities, and the header can contain them both.
<header>
<h2>This Is My First Blog Post</h2>
<span>November 23 2015</span>
</header>
If you want a multi-line heading, simply for design purposes, then it would be semantically correct to use CSS to achieve it.
h2 {
width: 230px;
text-align: justify;
}
<h2>This is a Very Long Title and the Desired Look is to Have it Take Up Less Width</h2>
Actually the <br> tag is the simplest way, but in most cases it's semantically incorrect.
Inserting a br tag at the point of the desired linebreak is a straightforward approach, and you can retain control over the vertical spacing of the lines by setting a line-height property on the h2 element.
<div class="post-title">
<span class="date">November 23 2015</span>
<h2 class="heading">This Is My First Blog Post</h2>
</div>
:) hope it helps! Good Luck!
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.
This is a very small HTML question that I am sure you guys will answer quickly. I post things on my website like this
<div id="content">
<p>
<hh>Header text here</hh>
Post information here, text and stuff.
</p>
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
</div>
but when I try to insert a <center> or alight left tag, the <p> closes automatically, and everything after the <center> tag is outside the paragraph box. I used inspect-element in firefox, and I can see it closes with a </p> that I never typed, right before any calls to centered text.
For example:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<center>This text is centered</center>
</p>
is rendering as this:
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
</p>
<center>This text is centered</center>
</p>
This is really frustrating, and if someone could help me out that would be amazing. using <div align-right> also doesn't work. If it helps, I can set the entire <p> to align any way and it works.
It ONLY breaks when I differ from the set orientation within that tag.
From w3school :
Use CSS to center text!
The tag is not supported in HTML5. Use CSS instead.
The element is deprecated in HTML 4.01.
http://www.w3schools.com/tags/tag_center.asp
It is because center acts like a p. And you cannot put a p in a p.
EDIT : To answer to your comment, you should probably do this :
<p>
<hh>Header 2 text here</hh>
Post 2 information here, text and stuff.
<span>This text is centered</span>
<p>
And in your css add this
#content p span { display:block; text-align:center; }
(It also works with an a tag if you want it)
That's probably because you can't use a hh-tag in a p-tag then. (Not sure, but that's mostly)
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.