I understand the concept of one id in an html page. As a noob, i was just wondering if you can use the same id once for different html pages. Will that be consider sloppy?
For instance, <div id="1"></div> (used only once)in index.html and used <div id="1"></div> again in product.html. Is that consider bad?
I tried to do a search but found no answers.
Thank you!
!edit! Thank you for the answer guys. Appreciated!
An id should only be used once on a single document. It is used for elements that only should appear once on the page anyway (think of a "top navigation bar"). Classes are used for elements that can appear more than once (think of a "particularly styled table", a "repeatable block of information" or things that share particular charasteristics such as "on this browser width this block spans 6 columns" in for example bootstrap). It is perfectly normal to use the same id on different pages. Usually you'll make a skeleton/template for your layout, where each element will be styled the same on each page that uses this template. It is then helpful to have the same id for the same element across different pages. (or: It would be considered sloppy to change the layout of the page on every page, using different id's for each element, as it would be hard or impossible to maintain your pages.)
It's fine to do that, but you would want to name your ids something better than "1". Something more descriptive, like <div id="main-part"></div> would be better.
Related
I don't think it's the case but I'm still taking the shot: Is there such a thing as a non-hierarchical tag in HTML (for markup independent of content structure).
For instance, something like:
<div class="thingy" id="thing">
blabla<n-htag>bla
</div>
<div class="thingy" id="thing2">
John Dodelidoo</n-htag>
</div>
EDIT: I'm realizing now what you're asking is that you want a tag where you can group multiple tags together but being completely unrelated to the HTML structure (e.x. you could start it in the middle of one element and end it in the middle of another that is completely isolated). Because of the way XML is structured, you cannot; it is completely based on hierarchy (as far as I can tell).
For archival purposes, the original answer is below.
If I understand what you're asking, the closest thing we have to that (as far as I can remember) is <span>: while it doesn't change the visual appearance of the page, it allows you to group elements. (And obviously, while you aren't REQUIRED to indent it, you can).
I'm renovating a legacy Java based web site. I've already greatly reduced the number of tags used on the front end by using CSS to do the graphic lay out of the "screens". Is there a CSS tag that will replace HTML tables that makes a good grid for HTML forms? Does it significantly reduce the number of tags? Is it reliable in most of the main browsers?
Tables are actually prevalently used to align forms. You take out the borders with <table borders='0'>. They are pretty reliable for aligning because the table cells in different rows line up.
You'll still probably want to use <table> tags for actual grid/table elements. But, you could consider using something like Javascript grid/table plugins for tables... for styling, and functionality.
I would suggest using <ul> and <li> elements (and then setting CSS rules for those elements,) when formatting <form> elements, though. If it doesn't seem to be working out... you can still leave the <form> in a table; over the past decade, however, browser support for CSS has made it a lot easier to use HTML lists instead of tables for formatting things like forms.
I have large number of form elements (80+) to design on the html page. Is there nice way to organize and design those elements ?
While I agree with #Pranay Rana about the pattern of breaking the fields up in sections, make it more semantic and give your AT (assistive technololgy) users a break and organize your forms and section related items off in <fieldset> elements.
put you control in Sections of Div and than minimize/maximize the dive
example : http://dyndiv.markusbordihn.de/example/moveable-min-max/
when you click cross sign it minimize and maixmize div....same thing you can do it by using +/- sign something like expading control. but this do involve javascript.
or
Make use of Tabs to organize control. : http://jqueryui.com/demos/tabs/
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.
I think the ideal is to use CSS purely for the layout and presentation, and HTML for the content. But let's say, the company wants to change a "Related articles" box from the bottom of the page to the top of the page. In such case, won't using CSS alone be not an ideal solution, but is better to alter the HTML as well? So as things are right now, HTML still takes a role in the page layout and presentation? Thanks.
Things still appear in the same order as they are in the html - it's not as restrictive as that as we can use absolute and relative positions, but those are undesirable - it's better to use to dom flow to handle placement, and that means yes, you should move the node in the html.
As Jason said, CSS is for styling the content, the content itself and its order is defined by the data (html), as order is necessary for the context of information, so it lies firmly in the 'data' part of what we do rather than the 'display'
EDIT:
I should say this: If you want your data to be totally independent of the display, you should consider defining your pages as xml only and using xsl to define the layout. xsl combines with css to completely abstract the display away from the data.
It does on two levels:
Firstly, the order of elements is still important. CSS floats are used a lot for layout but they also require elements to be in a certain order to get things in the right place. For example, lets say you have two buttons:
<input type="button" value="Click Me">
<input type="button" value="No, Click Me!">
These are next to each other. Lets say someone asks you to move the second button to the far right. This is how you do it:
<input type="button" value="No, Click Me!" style="float: right">
<input type="button" value="Click Me">
If you don't do this, the second (floated) button will appear below the other.
The second way HTML is still important is that there are still things that you need HTML tables for that can't be done in pure CSS at all, in a browser-compatible way (meaning IE6 support generally) or easily. This isn't something the pure CSS zealots like to hear but, like it or not, in the real world it's still true.
This is especially true with HTML emails. If you thought browser support for CSS was bad, mail program support is so much worse. Generally speaking you avoid CSS altogether with HTML emails and just pretend like its still 1999.
HTML still defines the hierarchy for elements.
HTML divides your page in logical sections. CSS then applies a certain look/feel/style to those sections.
If you want to change your page layout to include a section inside another one, you have no choice but to modify your HTML because HTML has a role on page layout.
You can actually move blocks around using nothing but CSS. The compromise always boils down to how good your CSS skills are and how much compatibility with older browsers you're after or care about. There are limits to what CSS can do, so yes, HTML definitely still has a role to play.
it is possible to change the "source order" of divs or use css to change positions. But if its more practical to just change the html, then there's no other way round it. At the end of the day, if its more important content then the source should reflect it for semantic reasons.