Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
please,
which is better? benefits and disadvantages
Html Layouts
<header>
< nav>
< aside>
or
css layouts (divs with float)
thanks
It looks like you haven't understood the whole concept of building websites yet and I really recommend that you go through a good HTML tutorial first.
To answer your question:
You cannot compare HTML markup to "using divs with float".
The main purpose of HTML tags is to structure your site. If you don't use anything but elements it might work, but your text is unreadable and there are lots of disadvantages - for example that screen readers cannot understand the site or bad SEO.
You should always use the appropriate HTML tag and style it using CSS. One example: You might want to have a heading which is smaller than a subheading. Nevertheless you should still use for the main heading and style it using CSS h1 {font-size: 0.8em;}
Tags are often used as containers and are very useful as well. They complement your site structure.
HTML is used to structure the layout of the webpage, like the bones in our body and CSS is everything else covering those bones (skin, muscle, clothing, etc).
Example:
You want to create a login page.
HTML - creates the text field elements and the labels
CSS - sets the font style, text field shape and size, background color/image, submit button's color, corner roundness, etc.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I was been told by a colleague of mine that instead of using the br tag we could we could use a span tag and give it a display:block and for the hr tag we could do it with the after pseudo element using css. I have been told that this was a good practice to follow than using these html tags. Is it true for these two cases that this way is preferred over the others or could we use it these two tags itself ?
native html elements are ALWAYS better to use than other weird way to do the same things. The most often, if people don't use <br> and <hr> tags, it's because it doesn't fit the graphic needs.
By the way, creating an <span> tag, just to make a space between two blocks is a horrible way to do it. Use css, even with style !
I would not use <br> for layouting, but only for breaking text mid-paragraph. Still would prefer multiple paragraphs if possible. Instead I would use margins to separate blocks.
On top of #kevinniel's answer, seems like a bad idea to use a <span> (natural inline element) just to change it to a block element (which is the default for <div>'s).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Well, as the title says: is it consider as bad practice to use empty divs to style the page? of course if it's performance wise(instead of using images for example).
And second question is: is there any difference between div(as block element) and span(as block element) in any term of performance or anything else?
Thanks.
To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.
And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:
But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
When I need very often a specific style like float: left is it better to make a own class or put this style in every class where it is needed?
Here is a example page for what I mean.
JS-Fiddle Example
Is it good how the class left is used? Or would it be better when I put every float: left style into the other classes?
The things to consider are readability and repeating yourself.
Readability:
Having a left class with the only rule as float: left will help to make your HTML more readable. Because whenever someone see that class on an element, they know it will be floated left. So in that way it improves readability.
DRY:
With CSS the old adage of "don't repeat yourself" is almost impossible to adhere to, but I think it should still be considered. In this case you should compare.
How many times will I add float: left in my CSS? versus How many times will I add class='left' in my HTML?
I would note that most CSS frameworks use utility classes like .left{float:left;}
It's simply a matter of opinion but I'd argue that no, you shouldn't.
HTML and CSS exist separately because they address separate concerns. HTML represents the information and CSS represents how that data should be displayed.
Creating classes containing only one rule starts to blur that distinction and starts to introduce style-specific information into your HTML.
Say you want to change all your stuff that was floated left to be floated right. You could either change your CSS rule to something like
.left {
float: right;
}
which is obviously horrendous or else you'd have to go into your HTML and change the class in every situation you wanted to change the value of the float - not ideal either. In a perfect world, you want to be able to make styling changes ONLY by editing the CSS. That's what it's there for. Obviously sometimes this just isn't possible but a lot of the time it is if you marked up your HTML in a semantically meaningful way.
There isn't anything wrong with doing that.
I create css helper classes for myself all the time.
When you're not using a framework like bootstrap it really helps to be able to add class="border" your html to quickly see what's going on in the box model
There are many opinions on top of this,
depends on your context...
In Sass there are placeholder selectors, you should have a look on how they work
Other way is creating helper classes, an example could be the pull-left implemented in bootstrap...
A simple class that does just one thing in order to be reusable everywhere in your code...
The first solution increases the output css file, the second, instead, increases the html file...
Maybe the secondone could be better that the first.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have read a lot that you should separate your css styling from your content, and that using inline styling isn't the best practice, but is this the same with the size of <img> tags?
Is it the best practice to set the width and height using attributes, or is it best to put it in a css class?
<img src="myimg.png" height="100" width="200" />
or
.myimg{
height:100px;
width:200px;
}
<img src="myimg.png" class="myimg" />
or is there no 'best' practice?
if so, in which situations should you use 1 or 2?
I believe one of the best practices is to avoid inline styling as much as possible, and try to do most attributes by CSS to the biggest extent.
However, when you try and validate HTML, it will often fail if an <img tag doesn't have height and width stated, so I would include these in the markup wherever possible. It's also a benefit to SEO, for them to be correctly identified for Image Searches.
Another important SEO factor, is to try to avoid linking to fullsize images, and then scaling them down using CSS. If you have an image which is say 3000x2000 and the output will only be 320x250, then you really should create a 320x250 version of the image, upload it, and link to that instead. This will dramatically help your website's load time, and performance.
They're both technically correct, but I would consider the second method to be "best practice" for the same reason as avoiding inline styles - by using classes and CSS, all similar elements match and I can make updates all in one place.
Edit: upvote for Dave - important point about resizing before upload. I agree!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm working on a directory page that's pretty simple--a company logo floated to the left, a company title and description on the right. There are about 150 of these, dynamically generated with PHP/MySQL. I recently made the entire site responsive minus the directory page. Right now I'm using tables for the directory which works perfectly. Many of the listings' descriptions vary in length (and therefore height) and using a table allows for the logos to stay perfectly centered with regard to the content.
In an effort to make this page responsive, I've tried to remove the table and rely solely on divs for the directory listings. This has been HELL. Getting an image vertically centered with a variable height on the containing div doesn't seem possible.
I feel like using tables isn't a bad practice in this case, as my data is "tabular" in nature. Am I wrong to assume this, and if not, how can I make the listings table responsive? It's hard for me to fathom being able to do so without changing the HTML (to a div style layout rather than table). Any help would be much appreciated.
You can make divs act like tables, I tend to stay away from tables entirely unless I am asked to code an email blast.
These will be your friends:
display:table;
display:table-cell;
vertical-align:middle;
As long as the images remain inline elements (you have not stated them as display:block) they can be vertically aligned by verical-align:middle and that is out of your way.
I would assume a wrapper class and some child elements with display:inline-block or even table-cell as APAD1 suggest would do the trick, if you can provide some more info we can see it in more detail.
Having said that, your data semantically, imho, would be considered list items and not tabular data and the best way would be to markup-them as li elements.