Saturday 13 January 2018

What is the difference between HTML tags and ?

itemprop="text">

I would like to ask for some simple
examples showing the uses of

and
. I've seen them both used to mark a section of a
page with an id or class, but I'm
interested in knowing if there are times when one is preferred over the
other.



Answer






This means that to use
them semantically, divs should be used to wrap sections of a document, while spans
should be used to wrap small portions of text, images,
etc.




For
example:



This a large
main division, with a small bit of spanned
text!



Note
that it is illegal to place a block level element within an inline element,
so:



Some
text that
I want
to mark

up




...is
illegal.






EDIT:
As of HTML5, some block elements can be placed inside of some inline elements. See the
MDN reference href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories"
rel="noreferrer">here for a pretty clear listing. The above is still
illegal, as only accepts phrasing content, and

is flow
content.






You
asked for some concrete examples, so is one taken from my bowling website, href="http://www.bowlsk.com"
rel="noreferrer">BowlSK:




            id="header">

Hi there, class="username">Chris Marasti-Georg |
href="/edit-profile.html">Profile |
href="http://www.bowlsk.com/_ah/logout?...">Sign out


Bowl class="sk">SK






Ok,
what's going on? At the top of my page, I have a logical section, the "header". Since
this is a section, I use a div (with an appropriate id). Within that, I have a couple of
sections: the user bar and the actual page title. The title uses the appropriate tag,
h1. The userbar, being a section, is wrapped in a
div. Within that, the username is wrapped in a
span, so that I can change the style. As you can see, I have
also wrapped a span around 2 letters in the title - this allows
me to change their color in my stylesheet.



Also
note that HTML5 includes a broad new set of elements that define common page structures,
such as article, section, nav, etc. Section 4.4 of the href="http://dev.w3.org/html5/spec/Overview.html" rel="noreferrer">HTML 5 working
draft lists them, and gives hints as to their usage. HTML5 is still a working
spec, so nothing is "final" yet, but it is highly doubtful that any of these elements
are going anywhere. There is a javascript hack that you will need to use if you want to
style these elements in some older version of IE - you basically need to create one of
each element using document.createElement before any of those
elements are specified in your source. There are a bunch of libraries that will take
care of this for you - a quick Google search turned up href="http://code.google.com/p/html5shiv/"
rel="noreferrer">html5shiv.


No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...