CSS Logical vs Physical Markup

I am new to the world of coding and CSS. As I post questions and read about CSS, floats and positioning I have come across the terminology logical开发者_开发百科 and physical.

• For someone who knows absolutely very little about CSS, what do these mean?
• How are they different?
• When would I use either one of them?
• Is this term limited to CSS only or does it apply to languages such as PHP, ASP.NET, etc?
• If they apply to other languages as well, do they mean the same thing?

As with Demian, I've also never come across these terms in the CSS community or specs.

One interpretation (having read the question that these terms were used in) could be to differentiate the used of markup for stylistic purposes (physical) vs markup used in its more semantic form to give "logical" meaning to the page (rather than being purely for positioning or aesthetic purposes).

Alternatively you could think about asking the person who used those terms (@hyperboreus) for their intended meaning.

Having never heard either term, I can only take an educated guess that logical positioning would refer to relative and physical would refer to absolute (there some documentation on relative and absolute positioning here).

They don't really apply to server-side languages such as PHP or ASP.NET as they're specific to layout strategies (not back-end functionality).

Ok-- I see said the blind man.

By Logical, you should say Semantic, and instead of physical is use the term/idea presentation result.

You can see why, especially the later is hard to define-- in fact, I would honestly just keep it to semantic vs non-semantic markup.

To define semantic sometimes it is easier to start by define the opposite, what is absolutely NOT semantic-- using tables to layout your page-- or for that matter, using tables for anything BUT tablular data.

Semantics can also get to an extreme very on separation of the data from its presentation to being against even the use of <em> and <strong> tags, but most agree thats at the same level of the vegan who doesn't eat anything with a shadow.

<subjective-but-really-not> The semantic web is beautiful. Distribute your data, season with just a touch of css to get in going in the right direction, and lastly, always allow the user the last say to how they wish to view your data </subjective>

TLDR: Semantic is using the proper markup (the tags) to fit the data and not to fit how you want it styled, which should be controlled (and ONLY controlled according to semantics') by your (CSS) Style Sheets

First of all CSS is client-side only. You can embed CSS style inside the HTML page or you can link to an external .css file.

Logical / physical? never seen nor heard about it, guess it could be relative and absolute or fixed positions you think of?

when followin the BOX-model of how a browser renders a page, think of each element as a box. If its position:relative then its placed where the last box ended and the size of this box, will then make the next relative box come after it.

Much like paragraphs in a text.

[headline 1]

[paragraph 1]

[paragraph 2]

[paragraph 3]

etc.

if you use position:fixed you can use left:100px or top:100px and the element will stay there no matter if you scroll or scale your browser.

position:absolute will use a zero-point from its parent object. if the parent object is relative, the zero will be from the the relative parent ends.

ofcause this subject is much more complicated once you get into column designs etc, but there are a LOT of great examples out there.

colinross is right.

dont use physical markup where you can avoid it. its considered bad practice as there's now better ways to get the results you're looking for with CSS.

its all about separating content/structure from style/presentation.

using logical/semantic markup you mark all headings with the appropriate heading tag, eg. h1 is your most important heading, h2 for subheadings, h3 for any headings under that etc etc you dont skip headings because you dont like the size or appearance. you dont use tags inside a paragraph of text because it makes it bigger and bolder. however you can use divs or spans, or classes for paragraphs or headings etc. combined with CSS to style them in the way you like.

you can then style a properly marked up document multiple ways, you can easily try out different stylesheets. multiple webpages can access the one CSS document. change the font of a document (or sections of it) by changing one line of CSS and not have to hunt through HTML documents adding or changing a font tag every time its mentioned. or a colour of something.

if you want a group of images to float left make them all the same class and float them in an external stylesheet, then you can optionally apply other styles to them as well maybe give them the same border/outline too. or if you change your mind and decide to float them right instead, its only one line to change it.

clever shit