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>
Related
Im very new to html and css, and I am having trouble accessing this list to edit in css:
<div id="content">
<div id="recent-users">
<ul id="recent-user-list">
<li class="user">Bob Bobalooba</li>
<li class="user">Mary Contrary</li>
<li class="user">James Bean</li>
<li class="user">Jim Jimbulator</li>
</ul>
</div>
</div>
I've tried many variations of things like #recent-users-list, #content #recent-users #recent-users-list li a etc and I havent been able to find any other posts that have helped witht his specific situation.
Thankyou in advance for any help.
First of all, accessing elements via ids are done with hash # and classes with period .. They are not interchangeably.
You are not using commas to select underlying elements. Commas actually allow you to select multiple different elements at once.
You can directly access the list via:
#recent-user-list
Or its children li elements via:
#recent-user-list .user
Or its grandchildren li a elements via:
#recent-user-list .user a
Documentation can be found here:
https://www.w3schools.com/cssref/css_selectors.asp
Instead of my background only acting as a background for the 4 different types of pottery in the ul element, the red background covers my name and navigation bar. Why is it doing this? I have tried to make everything relative positioning but doesnt seem to make a difference. Why is the ul element not following the flow of the document, it should sit below my name and navigation.
Please advise, see example here: example
If i am getting your problem correct then here is the solution
check this updated fiddle: http://jsfiddle.net/4GUkU/2/
Note: Please let me know if am lagging here so i can change as per requirement.
Browers have a difficult time with heights of floated DIVs. The easiest thing to do is to put:
<div style="clear:both;"></div>
after the tag.
The red color everywhere is due to
#featured {
...
background-color:Red;
...
}
And the UL displays below "The Pottery Club" and the nav links for me (in Chrome). Which browser are you using?
By the way, semantically you do not need to use and in a tag. tags are already interpreted vertically, unless you choose otherwise with CSS.
You could rewrite your navigation menu like so:
<nav id="nav-main">
<a title="Book Class" href="">Book Class</a>
<a title="Plan your visit" href="/visiting">Plan your visit</a>
<a title="Contact us" href="/visiting">Contact us</a>
</nav>
If you keep the and in your , a blind person's reader would read to him/her: "navigation, unordered list, list-item..." which does not make very much sense.
I'm aware that <span> tag is an inline element while <li> is a block element. However, we have a tooltip that uses a <span> tag and we'd like to make the text inside that tooltip into a list. However, putting <ul><li> inside span doesn't work in all browsers (and it's invalid).
This is the HTML code:
<a class='tooltip'>Text<span>Text that we want to become a list</span></a>
Is there a possible work around?
Although I would not worry to much about invalid code in this instance, given that you know about it, if the ul li is breaking in some of the code, you could do the following, which is also probably invalid:
<a class='tooltip'>Text<span>List item 1<br />
List item 2<br />
List item 3</span></a>
I think the technical answer you could be looking for is that the tooltip text should go inside the title attribute of the anchor tag itself.
Text
It's still not "beautiful" but semantically it's closer to what you're looking for. Plus you can use javascript to pluck that title value from the anchor tag to do something prettier with.
Just use a class:
<ul class='melikenachos'>
</ul>
Try this. Chances are if you want to put a block element inside an inline element, you really want them both to be block elements:
<a class='tooltip' style="display: block;">Text
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</a>
Or for all your tooltips:
a.tooltip{
display: block;
}
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */
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...