I have an accordion which is structured like:
<section... role="tablist">
<div>
<h3 role="tab">Title</h3>
<div role="tabpanel">
...
</div>
</div>
</section>
Does tab have to be a direct child of the tablist to conform to wai aria best practices or is it okay to be wrapped in a div?
Authors MUST ensure elements with role tab are contained in, or owned by, an element with the role tablist.
https://www.w3.org/TR/wai-aria-1.1/#tab
Your example is therefore correct.
I would suggest you read through the spec to ensure you are following best ARIA practice.
For example adding the role on a div as opposed to a section element, as per the best practice example.
I have implemented inline styles as well as block element styles in ckeditor from configuration. But when I apply wrapper element on multiple elements, it gets applied on each item individually.
e.g
<p class="wrapper">some text here</p>
<ul class="wrapper">list here</ul>
Whereas, I want to have a wrapper element like this:
<div class="wrapper">
element#1
element#2
Elements#3
</div>
Do let me know if it doesn't make sense.
Thanks.
I have the following code in HTML:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
This code is used for making an overlayed text transition for images in CSS, but if I want to validate this HTML code, it says I have a duplicate ID (here "first" and "desc") but I honestly wouldn't know how I can simplify this. I need to resize "first" with font-size, and "desc" too.
For example: the paragraph with id "first" has to be 14px, and the paragraph with "desc" has to be 12px.
Only those <"p"> (without the quote) elements can not be a child element in the "span" element.
I wouldn't know how to solve this, do you guys have a solution?
Thanks for the answers, I've already changed the ID's to a class.
Still, I wouldn't know how to resize class "first" and "desc" in two different font sizes, because it's apparently "not done" to put a block element in an inline element
EDIT 3: Solved! Using div's is the best solution, I'm using this for school (kind of a project) for making a gallery. With float: left; I can place those images next to eachother.
Thanks for the tips!
You've made several mistakes:
id attribute is of type #ID which by the HTML/SGML standard is defined to be unique, if you want to show duplicates you should use class attribute (this is part of why there's getElementsByClassName returning a list but getElementById returning only a single item in the JavaScript DOM API)
span is inline element, while p is a block element, HTML does not allow block element inside inline element. You should replace your span with div. You can use display: inline or display: inline-block if you want it to appear like inline level elements. Example of inline elements include: a, span, etc; example of block elements include: div, p, ul, li, etc.
That is due to the element type.
<p> tag is block level element
<span> tag is a inline element
Therefore encapsulating a block level element inside an inline level element is incorrect.
Because you can use classes.
Change:
1.
id="first" -- into --> class="first"
id="desc" -- into --> class="desc"
2.
You cannot put another tags into a span tag except <i>, <b>, <strong>, and <br /> ...
With <br/ > you can have 2 lines in your span tag
Just change it to:
<p class="first">
and
<p class="desc">
EDIT:
You best remove the spans completely. You don't need them. If you feel you need them to wrap block-level elements, you can do that with divs
example;
<ul>
<li>
<div class="img1"><img src="img.jpg" /></div>
<div class="cs1">Text text</div>
<div class="cs2">text text</div>
<div class="button">Next</div>
</li>
</ul>
like above code block div in li. I heard it is wrong usage. Is it true?
Both elements are block elements so nesting them is fine. Checkout the permitted content allowed in <li> in the Mozilla Documentation.
According to the W3C validator it is perfectly fine to use divisions.
you can also check your html whether it is valid or not in w3cvalidator
Hope this validator helps.
The best place to check it if you are in doubt is HTML DTD. It's a bit cryptic if you look at it first time, but it's a good source.
Let's look at your example:
http://www.w3.org/TR/html4/struct/lists.html#edef-UL
DTD stands that in UL (or OL) you can have only LI's (one or more)
<!ELEMENT UL - - (LI)+ -- unordered list -->
Then if you take a look on LI element:
<!ELEMENT LI - O (%flow;)* -- list item -->
it can take any element from the 'flow' shortcut (zero or more as the '*' stands for). You can click on the %flow link to learn what are those elements.
There is many other things you could learn from it, i.e. what kind of attributes given element can have etc.
No, it is often used by developers as easier CSS friendly dropdowns among many other uses you can probably think of.
The HTML syntax (any version) allows a div element inside an li element, as one can easily check from the specifications, or using a validator.
In any other sense than purely syntactic, the “wrong usage” issue is here really with the use of a bulleted list (ul element) with a single item in it. There is nothing formally wrong with it; it just does not seem to make any sense.
No it's not wrong use but it depends on what you want.
If you want a drop down menu every div must be inside a <li>
like the example shown below.
Eg:
<ul>
<li><div class="img1"><img src="img.jpg" /></div>
<li><div class="cs1">Text text</div> </li>
<li><div class="cs2">text text</div> </li>
</ul>
In my head, I've always known to use classes over inline styles for any project. But are there any effective differences between the two?
First of all:
If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and other dynamically-generated site content. The HTML output must contain absolutely no styling or layout of any sort at all. No exceptions.
Assuming you're dealing with static content, then:
If there's any way you can reuse the style, make it a class and link to a stylesheet.
If there's no way would ever reuse the style (it's a one-off thing that doesn't make sense anywhere else) then use a <style> block that references the element's #id.
If the CSS attribute only makes sense in the context of the surrounding HTML (e.g. some usages of clear:) then I inline the style into the element.
A lot of people call this heresy, just like a lot of people denounce any use of goto in modern programming languages.
However, rather than subscribing to stylistic dogma, my view is you should choose the method based on your circumstances that decreases your overall workload the most. Stylesheets add a level of indirection that makes site-level changes easy and helps build consistency. But if you have several dozen classes on each page that are only used in one place, then you're actually increasing your workload, not decreasing it.
In other words, don't do something dumb and confusing just because people tell you it's the right way to do it.
There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.
If the choice was there, my first preference will be classes/other selectors. However, there are situations where inline styles are the only way to go. In other situations, just a CSS class by itself requires too much work, and other types of CSS selectors make more sense there.
Suppose you had to zebra stripe a given list or table. Instead of applying a particular class to each alternate element or row, you could simply use selectors to do the job. That will keep the code simple, but it won't be using CSS classes. To illustrate the three ways:
Using only class
.alternate {
background-color: #CCC;
}
<ul>
<li>first</li>
<li class="alternate">second</li>
<li>third</li>
<li class="alternate">fourth</li>
</ul>
Using class + structural selectors
.striped :nth-child(2n) {
background-color: #CCC;
}
<ul class="striped">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Using inline styles
<ul>
<li>first</li>
<li style="background-color: #CCC">second</li>
<li>third</li>
<li style="background-color: #CCC">fourth</li>
</ul>
The second way looks the most portable and encapsulated to me. To add or remove stripes from any given container element, simply add or remove the striped class.
However, there are cases where inline styles not only make sense, but are the only way to go. When the set of possible values is huge, it will be stupid to try to make classes in advance for each possible state. For example, a UI that allows the user to dynamically place certain items anywhere on the screen by dragging. The item will have to be positioned absolutely or relatively with actual coordinates such as:
<div style="position: absolute; top: 20px; left: 49px;">..</div>
Surely, we could use classes for each possible position the div can take, but that's not recommended. And one can easily see why:
.pos_20_49 {
top: 20px;
left: 49px;
}
.pos_20_50 {
top: 20px;
left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px
<div class="pos_20_49">..</div>
Use common sense.
Everyone knows that presentation and content should, in an ideal world, be separated. Everyone also knows that this doesn't work very well a lot of the time. We all know that you're supposed to use divs rather than tables for layout, but we also know that for any circumstance where you don't have full control over the content it just doesn't work properly.
Downloading a 500k style sheet to style one element because you've taken every possible style and stuck it in a style sheet will kill your page, downloading 500 smaller style sheets to style your page because you need them all will also kill your page.
Reuse is great in concept, but the reality is that it's only useful in certain contexts. This applies equally to pretty much anywhere the concept exists. If your project does what you want it to do, does so in every reasonable browser, does so in an efficient way, and does so reliably, then you're good to go, it's not dramatically harder to refactor css than is is code.
I can't think of any pros for inline styles.
CSS is all about Progressive Enhancement, and not repeating yourself (DRY).
With stylesheets, Changing the look becomes as easy as changing one line in the HTML code. Make a mistake or the client doesn't like the change? revert to the old stylesheet.
Other advantages:
Your site can automagically adjust to different media, such as for printout and for hand-held devices.
Conditionally-included CSS fixes, for that gawd-awful browser-that-shall-not-be-named, become a snap.
Your users can easily customize the site with plugins like Stylish.
You can more easily reuse or share code from site to site.
I can think of only two situations where inline styles are appropriate and/or reasonable.
If inline styles are programmatically applied. For example, showing and hiding elements with JavaScript, or applying content specific styles when rendering a page (see #2).
If inline styles complete a class definition for a single element in cases where id's are neither appropriate or reasonable. For example, setting the background-image of a element for a single image in a gallery:
HTML
<div id="gallery">
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
<div class="image" style="background-image:url(...)">...</div>
</div>
CSS
#gallery .image {
background: none center center;
}
With the addition of Custom properties to CSS, now there's another use case. One might want to use inline style to set custom properties.
For e.g. below i am using CSS grid to align HTML Lists and Div blocks and i wish to have flexibility in the HTML (Just the way BootStrap or any other framework provides) as this HTML is dynamically generated by application.
CSS :
:root{
--grid-col : 12;
--grid-col-gap:1em;
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}
.grid{
display: grid;
grid-template-columns: repeat(var(--grid-col), 1fr);
column-gap: var(--grid-col-gap);
row-gap: var(--grid-row-gap);
}
.grid-item{
grid-column-end: span var(--grid-col-span);
grid-row-end: span var(--grid-row-span);
background: var(--grid-cell-bg);
}
HTML :
<ul class="grid" style="--grid-col:4">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
In the above HTML to change the four columns to 3 i change the custom property using style attribute :
<ul class="grid" style="--grid-col:3">
<li class="grid-item">Item 1</li>
<li class="grid-item">Item 2</li>
<li class="grid-item">Item 3</li>
<li class="grid-item">Item 4</li>
<li class="grid-item">Item 5</li>
<li class="grid-item">Item 6</li>
<li class="grid-item">Item 7</li>
<li class="grid-item">Item 8</li>
</ul>
You can check the extended live example at https://codepen.io/anon/pen/KJWoqw
Assuming that you are using external stylesheets, an additional benefit on top of those previously mentioned is caching. The browser will download and cache your stylesheet once, and then use the local copy each additional time it is referenced. This allows your markup to be more compact. Less markup to transfer and parse means a more responsive feel and better experience for your users.
Classes are the re-usable styles that can be added to HTML elements. e.g-
<style>
.blue-text{color:Blue;}
</style>
you can use and re-use this blue-text class to any HTML element
Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.
whereas inline style are like e.g-
<p style="color:Blue;">---</p>
So the difference between both is you can re-use classes whereas you can't re-use inline styles.
Inline Styles are definitely the way to go. Just look at http://www.csszengarden.com/ - that would never have been possible with classes and external style sheets...
or wait...