I try to tidy the following html code, and I get an strange result. li elements are not aligned.
Is it correct to have al ul tag and text inside an a
<a> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
Why It could happens?
ul tag is a block element tag - a tag is a inline-block element tag - it is not recommended to put block elements within inline-block elements.
If you had a basic navigation it would look like
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
As explained earlier - within the ul tag you can assign the a tags to navigate to other links/webpages.
The accepted ways of providing indentation to your code is by using 2-space or 4-space indentation (Every time you open a child tag in the next line give it 2/4 space ). Although in HTML indentation does not matter, your code will work perfectly fine with whatever way you wish to do indentation.
tidy code (2-space indentation):
<a href="Link_to_anything"> Text Inside a
<ul>
<li>li1 content</li>
<li>li2 content</li>
<li>li3 content</li>
</ul>
</a>
I have added href attribute , as the purpose of the <a> tag is to link the contents inside to another web page or part of a web page
DEFINITION:
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link's destination.
The anchor tag can hold most tags inside it like <img>, <p>, <h1> to <h6>,etc. You can perfectly add <ul> tag within the <a> tag
On my site users can create posts with a mixture of plain text and html. I'm having trouble rendering their posts nicely.
E.g., they might write:
This is the first line of the post.
<!-- whitespace 1 -->
<ul>
<li>List item 1.</li>
<!-- whitespace 2 -->
<li>List item 2.</li>
<li>List item 3.</li>
</ul>
<!-- whitespace 3 -->
This is the last line of the post.
and I want whitespace 1 and 3 to render, but not whitespace 2. How can I do this?
I've tried using a combination of linebreaks and spaceless but cannot get it to work.
Thanks
Jack
As I mentioned in a comment, you can use regex to get a collection of matches for the contents of each list, and then check those contents to make sure they don't contain any <br> tags. To gather the contents of your list elements you can use this pattern (?s)(?<=<[ou]l>).*?(?=<\/[ou]l>).
Once you have a collection of matches using re.findall("(?s)(?<=<[ou]l>).*?(?=<\/[ou]l>)", inputstring), you can do something like this:
for m in matches:
if not re.match("<br>", m):
#input is fine
else:
#lists cannot contain <br> tags
This rejects input that contains lists with <br> tags in them.
To explain the pattern,
(?s) makes it so . matches new line characters as well
(?<=<[ou]l>) means the pattern must start with either <ol> or <ul>
.*? means capture everything up until the next part of the pattern
(?=<\/[ou]l>) means the pattern is followed by either </ol> or </ul>
Inserting a br tag within a header tag (e.g. h2) inserts a space after the first word.
How do I remove that space as I am right-aligning the text?
e.g.
<h2>
hello
<br/>
world
</h2>
http://jsfiddle.net/4er7r/
It isn't the br tag itself, but the returns surrounding it. They are translated to whitespace. Use this:
<h2>
hello<br/>world
</h2>
http://jsfiddle.net/4er7r/3/
I am using the wonderful Slickmap template to start creating a tree for a friend but cannot work out how to have multiple lines of text within the same <li> tag. Basically the first 5 items should be within the same box and then the last two in separate boxes. I've tried all variants of <br> I can think of including adding a after the <br> but nothing seems to work. Is it possible and if so how?
<ul>
<li>Acceptance</br>
IPC-DRM-PTH</br>
IPC-A-610</br>
IPC-9191</br>
IPC-DRM-SMT</br>
Posters</br>
</li>
<li>Mission Statement</li>
<li>Principals</li>
</ul>
Example web page
The </br> should be <br>. Then you're fine.
The </li> means "close this li (list item) element". A br element does not need a closing tag. Since it cannot contain any content, it's closed implicitly. You may see <br/> sometimes though. This basically comes down to an br element that is immediately closed afterwards. Note the position of the forward slash.
See also HTML 5: Is it <br>, <br/>, or <br />?
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.