What html formatting for paragraphs, line breaks, lists, etc are valid in an RSS feed? Im pretty sure divs aren't allowed, but what about ul and li?
I know the theory is that the RSS readers will style the content and you shouldn't go overboard styling it yourself, but what about headings, paragraphs, lists, etc?
Thanks
Related
Sorry if this makes no sense as am only just getting to grips with WordPress and editing CSS.
I have a calendar plugin which for the most part is pretty standard.
However, I wish to make a minimum height for the elements so if there isn't much text, the format still looks better.
Following tutorials, I am able to inspect the source, make the change, and have the desired effect. My issue is, that if I find the element, it seems the custom CSS makes changes to multiple elements on the screen, I can work round most of this but it effectively breaks a clickable link (Makes it not cover the whole button).
The element part I edit is quite large but here is a chunk of it:
.tribe-common abbr, .tribe-common acronym, .tribe-common address, .tribe-common applet, .tribe-common article,
There's about 50, so I'm guessing my edit is covering too much or that I'm editing an attribute that more than one element inherits?
The only attribute I am setting is min-height, so unsure why this seems to make the clickable button area smaller? The button itself stays the same, but I can only click it right at the top.
The plugin I am using is a free one called events calendar. And for the most part I am able to edit the way I've described, I am just struggling to get this one to work and thought it might be the giant list that's causing it. Or should I say my lack of knowledge
Thanks
I am not sure if i get the issue you are describing correctly, but if your changes in css apply to some elements that you don't want them to apply, then you are not precise enough with your selector.
For example, the element you mentioned in your text contains many commas (","), which select all elements separated with comma. This makes your selection wider, not narrowing it down.
If you are not familiar with syntax of CSS selectors, i recommend checking out this resource:
https://www.w3schools.com/cssref/css_selectors.asp
There are some commands in HTML that are confusing me. For example, what do the <nav> element and the <article> element do? There's a lot like this. <nav> <article> <section> <aside> <div> What are the purpose of these? I know what they do, what I'm confused about is why you'd want to use them. These elements create semantic sections, what I'm asking is, why is this needed? What does it change?
One important reason is accessibility of websites: If a screenreader (for blind people) knows (from recognizing these tags) which element contains the navigation (nav, which otherwise would just be a div), which elements are seperate, more or less independent blocks (articles and sections), it can guide the user much easier throught he structure of the page and help him/her to find the essential parts of the page quicker.
Another reason is that search engines can find the essential parts of a website, since the structure is much clearer.
It is the new Html5 standard. They can be easily used in semantic way and they have more meaning for example than a classic div
This is probably a good place to start HTML Tags If you're not sure what a div is I'm going to assume you're reasonably new to HTML?
You don't have to use tags like but it just makes it easier for someone reading your code to know exactly where the navigation is. Otherwise it might just look like a list.
I'd suggest you read that list though.
Consider this HTML:
<div id="entry-content">
<div id="my-300px-ad">AD CODE HERE</div>
<p><img src="file.jpg" alt="file" /></p>
<p>SOME TEXT</p>
<p>SOME MORE TEXT</p>
</div>
Now, consider that the div#my-300px-ad is floating right. Would it be possible for me to have the image in the next paragraph show up before the ad so that the TEXT in its following paragraphs can wrap around the ad?
For example, like this:
Why so...?
The thing is, due to various reasons (including Google) I want to avoid placing an ad in BETWEEN the post's content.
CSS only
I am sure that something like this would be possible with some JavaScript code. But I am looking for a CSS-based solution only. (Cross-browser compatibility, ≥ IE8)
Please note that ONLY the CSS of div#my-300px-ad can be changed. Nothing else should be touched as this is not a static HTML page, besides they are articles.
PS: It was hard to frame a one-line question for this. Please feel free to edit the question's title if it can be made more clear.
This is not possible, as stated in these two questions:
Use CSS to reorder DIVs
CSS layout, use CSS to reorder DIVs
Without knowing the height of the element you want to skip, using javascript, or changing the html you cannot reorder elements with css in the way you describe.
However, as it appears you are making a WordPress theme, it shouldn't be too difficult to place the ad inside the post and after the image. If you do so, placing the ad inside an aside element should tip off Google that it is not part of the main post.
Mozilla Developer Network:
In HTML4, every section is part of the document outline. But documents
are often not that linear. A document can have special sections
containing information that is not part of, though it is related to,
the main flow, like an advertisement block or an explanation box.
HTML5 introduces the <aside> element allowing such sections to not be
part of the main outline.
What is the best practice for developing a layout? Is better to limit divs? I was looking through the html/css of some popular sites and they all seem to have divs within divs. For instance, a div for the entire page, a div for the topbar, a div within the top bar for the logo, search bar, etc.
Is this a good practice? I suppose it's easier to position all the divs correctly and than place the necessary elements within the divs. It's what I've been doing this far but want to make sure I'm learning the correct approach.
Any help on this is appreciated. Thanks!
Use <div>s when you need to divide (that's what divs are supposed to be used for) sections of your page from one another. Header/footer from content for instance, or individual posts on a blog.
However, you shouldn't use them when semantically another element would make sense.
If the archive on the previously mentioned blog only showed a two line summary of every post in the archive, an ordered list might make more sense as you are defining a list of items which are in order. <li> elements are block elements as well and can be styled in exactly the same way.
Sometimes, it will make sense to have nested <div> tags, and sometimes you shouldn't.
As a basic test, imagine your page is being parsed by a reader for a visually impaired user. It needs to know what is in each node of the document so it can announce it properly. It doesn't care what your visual CSS needs are, it just wants to parse it into speech as accurately as possible.
Basic points to remember:
Write your HTML primarily for structure not visuals
The person viewing your website may not be using your CSS
The person viewing your website may not be using a conventional web browser
You can always tweak your structure if the CSS doesn't quite work, providing it remains the same semantically.
A <div> by definition is a meaningless element, so it doesn't matter how many of them you have.
However, you need to have <div>s on your page as long as they make sense, and to not use them if there are elements better suited for the job (semantically).
<div>This is a paragraph of text</div>
should actually be
<p>This is a paragraph of text</p>
And such.
There is a name for this sort of "code smell" in HTML: Divitis.
You should expand you knowledge about the semantic meanings for the tags in HTML. You could start by reading this article, but it is more focused on html4.01 and xhtml. There are several new tags in HTML5 and few changes in semantic meaning for the existing HTML4 tags.
The big question is generally whether to use divs or tables. Tables create a lot of headaches, some of which you can't work around. But divs can have their problems as well.
Regardless of what you use, the level of nesting can indeed make the page difficult to understand. So you should favor the fewest levels of nesting needed. At the same time, trying to hard not to nest can also make the HTML difficult to understand.
I want to create a set of content tabs for a design I'm building in HTML5. I'm wondering if I should use a set of <article> or <section> tags to contain the content?
<section> seems ideal to me. Its definition applies quite neatly to something like content tabs:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Take note of what it says about <article> on that same page though:
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
So if the content of your tabs is self-contained and makes sense when read in isolation (and could be used that way), use <article>, if it doesn't use <section>.
It is my understanding that <section> elements are supposed to go inside <article> elements, so you shouldn't use sections for tabs unless you wrap all of the tabs inside of an article. So the short answer is you should use both or neither.