{"id":54,"date":"2005-01-16T06:03:19","date_gmt":"2005-01-16T06:03:19","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/01\/semantics-of-span"},"modified":"2006-04-30T23:49:47","modified_gmt":"2006-04-30T23:49:47","slug":"semantics-of","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/01\/semantics-of","title":{"rendered":"Semantics of <span>"},"content":{"rendered":"

The span<\/code> element in HTML<\/abbr> is\r\n\twidely regarded as a semantically empty, inline element which can only be used\r\n\tas a hook for styling purposes \u2014 it has no meaning whatsoever. Thus, it is widely\r\n\tbelieved by semantic purists that its use should be avoided. Others are more\r\n\tlenient and believe that since it has no semantics, nor any default presentation\r\n\t(except display: inline;<\/code>), it does not hurt to use it; though advise\r\n\tthat it should still be used sparingly. ie. Avoid including an extraneous span<\/code>\r\n\twithin every element as done for the CSS\r\n\tZen Garden<\/a>.<\/p>\r\n

It is true that a span<\/code> element on its own with no semantic attributes,\r\n\tor perhaps just a presentational\r\n\tclass name and\/or style<\/code> attribute, has no semantics. There\r\n\tare many examples of using the element for purely presentational purposes (eg. Image\r\n\treplacement techniques<\/a>); however, there are cases where span<\/code> is\r\n\tthe most appropriate element to use.<\/p>\r\n

Definition of Span<\/h5>\r\n

The HTML<\/abbr> 4.01 specification<\/cite> states\r\n\tin section\r\n\t7.5.4 Grouping elements: the DIV and SPAN elements<\/cite><\/a>:<\/p>\r\n

\r\n\t

The DIV<\/code> and SPAN<\/code> elements, in conjunction with\r\n\t\tthe id<\/code> and class<\/code> attributes, offer a generic mechanism\r\n\t\tfor adding structure to documents. These elements define content to be inline\r\n\t\t(SPAN<\/code>) or block-level (DIV<\/code>) but impose no other presentational\r\n\t\tidioms on the content. Thus, authors may use these elements in conjunction\r\n\t\twith style sheets, the lang<\/code> attribute, etc., to tailor HTML<\/abbr> to\r\n\t\ttheir own needs and tastes.<\/p>\r\n<\/blockquote>\r\n

Basically, span<\/code> (like div<\/code>) is a structural element\r\n\tintended for applying author-defined semantics where there is no other suitable\r\n\tsemantic element available or as a generic container for semantics expressed\r\n\tthrough semantic attributes, such as an alternate language; though the element\r\n\tis often used for presentational purposes with little regard for either structure\r\n\tor semantics.<\/p>\r\n

Semantic Elements<\/h5>\r\n

As discussed by Evolt<\/a> in Guidelines\r\n\t\tfor the use of <span><\/code><\/a>, it is often more appropriate\r\n\t\tto use other semantic elements instead. Before marking up the content, it is\r\n\t\timportant to consider what the content is and its purpose. You may believe\r\n\t\tthat the content, in some cases, is only being marked up to receive additional\r\n\t\tpresentation (eg. bold font and\/or different colour) \u2013 hence the very common\r\n\t\tuse of elements like <font><\/code> \u2013 but there has to be a reason\r\n\t\tfor why the presentation is required. It is the reason for the presentation\r\n\t\tthat should be expressed by the markup, not the presentation itself.<\/p>\r\n

Take, for example, marking up a warning to the reader. The site designer has\r\n\tdecided that warnings should be displayed as red text in a visual medium.\r\n\tHowever, being somewhat educated, the CSS<\/abbr> author\r\n\tunderstands the importance of semantic\r\n\tclass names<\/a> and has allocated a warning<\/code> class\r\n\tfor such purposes, and the font colour is applied using CSS<\/abbr> \u2014\r\n\tno font<\/code> element\r\n\trequired. The markup author simply needs to decide upon the most appropriate\r\n\telement for the class to be applied.<\/p>\r\n

Some people may believe that the span<\/code> element is the most appropriate\r\n\tsince the semantics are expressed by the value of class attribute. However,\r\n\tthis is not entirely the case. Remember that the class attribute is for author-defined\r\n\tsemantics, which are mostly (but not entirely) meaningless to the reader in\r\n\ta non-CSS<\/abbr> environment. In general,\r\n\ta warning should be emphasised and is, in this case, being emphasised in a visual\r\n\tmedium through the use of red text. Thus it makes sense to use either of the\r\n\temphasis elements: em<\/code> or strong<\/code>. Because it is a warning,\r\n\tand red text suggests a rather strong emphasis, I believe strong<\/code> is\r\n\tthe most appropriate; though, depending on the context, others may have completely\r\n\tdifferent, yet valid opinions and, therefore, reach a different conclusion.\r\n\tHowever, by using <strong class=\"warning\"><\/code>, the semantics\r\n\tare expressed by the element and extended by the class, so it still makes some\r\n\tsense in a non-CSS<\/abbr> environment.<\/p>\r\n

Semantic Attributes<\/h5>\r\n

There are many cases where some, or all, of the semantics required may be\r\n\texpressed through the use of attributes such as title<\/code>, lang<\/code>,\r\n\tor any other semantic attributes. The applicable attributes, in this case,\r\n\tinclude those defined by the %coreattrs<\/code><\/a>,\r\n\t%i18n<\/abbr><\/code><\/a> and\r\n\t%events<\/code><\/a> modules.\r\n\tThese comprise attributes such as id<\/code>, class<\/code>, title<\/code>, lang<\/code>, dir<\/code> and\r\n\tthe onevent<\/var><\/code> collection. For example, the semantics of\r\n\tapplying a lang<\/code> attribute to an element states that the element\u2019s\r\n\tcontent is a different language from the parent element (assuming the ISO-639\r\n\tlanguage codes<\/a> used do not match).<\/p>\r\n

Because of the modules in which these attributes are defined, they also\r\n\tapply to most (not all) other elements in HTML. That means that exactly the\r\n\tsame semantics that may be applied to span<\/code> with attributes may\r\n\talso be applied to those other elements. However, there are indeed many cases\r\n\twhere no other element is appropriate and span is the best choice.<\/p>\r\n

The aforementioned alternate language markup is the simplest example. In\r\n\tthe cases where an alternate language is being used, yet requires no other\r\n\tsemantics that may be expressed by other inline elements, span<\/code> is\r\n\tgenerally the most appropriate element to use.<\/p>\r\n

Another example is markup for a date and\/or time. You may wish to use a date-time<\/code> class\r\n\tfor the date and time of your blog posts, however they may not necessarily require\r\n\tany alternate presentation to make sense to the reader. Assuming the date\r\n\tis not being used as a link and the semantics of other inline markup is inappropriate, span<\/code> may\r\n\tbe the best choice.<\/p>\r\n

In this case, although the class may not necessarily be used for presentational\r\n\tpurposes, it is still possible for other non-CSS<\/abbr> related processing to make\r\n\tuse of the class<\/code> attribute, such as scripting. For example, you\r\n\tmay wish to have some JavaScript convert the date and time presented on your\r\n\tblog, marked up within a <span class=\"date-time\"><\/code> element,\r\n\tfrom UTC<\/abbr> to their local computer\r\n\ttime for convenience. Hixie\u2019s Natural Log<\/a> does\r\n\tthis; though his markup is different, the processing concept is the same.<\/p>\r\n

Other Non-Semantic Elements<\/h5>\r\n

It is important to note that span<\/code> carries no more nor less semantics\r\n\tthan presentational elements such as b<\/code> and i<\/code>. These\r\n\telements, however, although they have no semantic meaning whatsoever, do\r\n\thave default presentation in a visual medium which may (depending on the\r\n\tcontext) convey semantic information other than emphasis to the reader and\r\n\tmay be suitable where strong<\/code> and em<\/code> are not. Because\r\n\tof this additional presentation, especially in a non-CSS environment, which\r\n\tmay be used to convey some semantics, some authors, such as Eric\r\n\tMeyer<\/a>, believe that it may be advantageous to make use of these elements,\r\n\twhere span<\/code> would ordinarily do the trick. Eric Meyer has previously explained\r\n\t\this use of the b<\/code> element<\/a> as a presentational hook for styling\r\n\t\tpurposes, in place of the span<\/code> element. His reasons ranged from\r\n\t\tfile size, which I\r\n\t\tpreviously questioned<\/a>, to the advantage of the default bold font to express\r\n\t\tauthor-defined semantics, other than emphasis, in a non-CSS environment<\/p>\r\n

While, in Eric\u2019s case, the use of the extraneous element, be it span<\/code> or b<\/code>,\r\n\twas entirely presentational since the semantics of the content is being expressed\r\n\tby the parent element, not the element itself; there may be many cases where\r\n\tit is considered useful to revert to these other, often disregarded, presentational\r\n\telements to assist with conveying semantics to some readers, usually in a\r\n\tvisual medium, where no other semantic element is appropriate. However, for\r\n\ta similar reason, authors must be careful because the elements may convey\r\n\tsemantics that they do not have (eg. <b><\/code> may, depending on the context,\r\n\tinadvertently convey a form of strong emphasis in a visual medium). Therefore,\r\n\talthough some presentational elements are not deprecated, I do not recommend\r\n\tthese presentational elements be used often, and that you carefully weigh\r\n\tup your other options before doing so.<\/p>\r\n

The a<\/code> element\r\n\t\t which is designed to be used as either a hyperlink using the href<\/code> attribute\r\n\t\t or the destination of a fragment\r\n\t\t identifier<\/dfn><\/a> using the name<\/code> or id<\/code> attributes\r\n\t\tis generally considered semantic but, in the absence of either of these\r\n\t\t or any other attriubutes, is essentially as meaningless as span<\/code>.\r\n\t\t For this reason, the current XHTML\r\n\t\t 2 working draft<\/a> states in the hypertext module<\/a> that other\r\n\t\tthan for the explicit markup of links, the element\u2019s semantics are identical\r\n\t\tto span<\/code>; and is also one of the reasons\r\n\t\twhy attributes like href<\/code> may\r\n\t\tnow be applied to nearly every element. So, technically speaking, it\r\n\t\tis valid to use the a<\/code> element in place\r\n\t\tof any span<\/code> element, however authors should\r\n\t\tstill be cautious with doing so because most authors generally percieve the\r\n\t\telement as being only for links.<\/p>\r\n

In conclusion, although span<\/code> is a semantically\r\n\tempty element, whose use should generally be avoided in favour of more semantic\r\n\telements, there may be cases where other more semantic elements are entirely\r\n\tinappropriate. For example, where the markup is as a presentational hook\r\n\tfor styling purposes only, or where all the required semantics may be expressed\r\n\tthrough attributes. Lastly, it may be advantageous to make use of the default\r\n\tvisual-presentation provided some non-semantic, presentational elements in\r\n\tplace of span<\/code> in order to assist with expressing semantics that may not be\r\n\texpressed by other semantic elements. My advice is to use the non-semantic\r\n\telements sparingly, but don’t be afraid to do so when required.<\/p>","protected":false},"excerpt":{"rendered":"The span element in HTML is widely regarded as a semantically empty, inline element which can only be used as a hook for styling purposes \u2014 it has no meaning whatsoever. Thus, it is widely believed by semantic purists that its use should be avoided. Others are more lenient and believe that since it has … Continue reading Semantics of <span><\/span> →<\/span><\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,7],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/54"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}