The traditional, structured way to markup and delimit separate sections in\r\n\tSGML and XML is to put each part within its own container element. e.g.<\/p>\r\n\r\n
Example 1<\/a>:<\/p>\r\n From a structural point of view, this clearly indicates a certain separation\r\n\tbetween the two parts, whatever the actual container element or semantics may\r\n\tbe.<\/p>\r\n However, there is an anomaly in all versions HTML and XHTML with some elements\r\n\tdesigned as separators, rather than container elements. Specifically, I\u2019m referring\r\n\tto HTML\u2019s Example 2<\/a>:<\/p>\r\n The XHTML 2 In order to remove all presentational suggestion from the element name, and\r\n\tin an attempt to address the true structure of the construct, the element was\r\n\trenamed to However, regardless of the tag name\u2019s spelling, the question still remains\r\n\tas to whether the name truly represents the elements semantics; or, indeed,\r\n\twhether it has any semantics at all, or if it\u2019s just a place holder for a presentational\r\n\tconstruct.<\/p>\r\n\r\n Jukka Korpela<\/a> has previously argued\r\n\t\tstrongly against these empty separator-like elements<\/a> in HTML, and suggested that the There is also the question of what exactly does it separate? In example\r\n\t\t2<\/a>\tabove, the separator element clearly separates part 1 from part 2. However,\r\n\tthe separation is not always as clear. For example, if the separator were to\r\n\tbe included within its own part, then the question of what it actually separates\r\n\tbecomes a little more complex.<\/p>\r\n\r\n Example 3<\/a>:<\/p>\r\n It would appear that the intention of this markup structure is to markup the\r\n\tseparation between parts 1 and 2. However, from a structural point of view,\r\n\tthe Now, you may be asking what possible reason there is that would require such\r\n\ta structure with any real XHTML elements; but take my word for it, as we\r\n\twill see later, this kind of structure is required in some circumstances, for\r\n\tthe separator element.<\/p>\r\n\r\n This issue with Examples 1<\/a> and 2<\/a> above are logically identical, in that they both mark up\r\n\tthe separation between parts 1 and 2. They are clearly structurally different;\r\n\tbut the question of semantics still remains. It has been argued that the\r\n\tstructured, semantic equivalent already exists in XHTML 2 as the Example 4<\/a>:<\/p>\r\n One of the arguments against the semantic equivalence of examples\r\n\t\t2<\/a> and 4<\/a>\tis that example 2 typically results in some default presentation as an indication\r\n\tof separation between sections, which may convey some semantics to the reader.\r\n\tThis indication is typically a horizontal rule, stars, or other graphical representation\r\n\tin a visual medium; a long pause in an aural medium, etc.<\/p>\r\n Although the presentation alone is not, in any way, a reason to retain any\r\n\telement in a semantic language \u2013 particularly if a non-presentational, well\r\n\tstructured, semantic equivalent already exists \u2013 the issue of presentation is\r\n\tnot simply about how it looks in this case; but the semantics that the presentation\r\n\tconveys to the reader, which makes it semantically different from other existing\r\n\tmarkup.<\/p>\r\n\r\n As we have seen throughout this discussion, each issue comes down to the issue\r\n\tof semantics, and what the element actually means. One of the problems is with\r\n\tdefining the semantics is that the definition was rather vague in HTML 2.0,\r\n\tand only became more so later. The definitions for the With such poor definitions, it\u2019s easy to understand why there is such a debate\r\n\tover the element\u2019s semantics, and why it is often viewed as a poorly structured,\r\n\tnon-semantic, presentational element. In order to understand its true semantics,\r\n\tand how it differs from other elements like section, we must analyse its legitimate,\r\n\tnon-presentational usage in the real world. There are two common use cases we\r\n\twill investigate, including separators used in books, and separators used to\r\n\tgroup menu items in a typical GUI<\/abbr>.<\/p>\r\n\r\n In books, and other similar publications, such separators are often used to\r\n\tindicate a minor change in topic, scene or perspective. These changes, or divisions,\r\n\tare usually smaller than a whole chapter and, in fact, a chapter may contain\r\n\tmany such divisions with each separated visually with some kind of rule, stars\r\n\tor other graphical representation.<\/p>\r\n Compare this with the For menu items, such separators usually group related items. For example,\r\n\toptions to create, open and save documents are separated from those used to\r\n\tpreview and print the document, yet they are still operations performed on the\r\n\tfile as a whole, and therefore generally belong in the File menu. In this case,\r\n\tthe separator doesn\u2019t really indicate a change in topic, but rather a way to\r\n\tgroup related items. Using the Example 5<\/a>:<\/p>\r\n<part>\r\n <p>part 1<\/p>\r\n<\/part>\r\n<part>\r\n <p>part 2<\/p>\r\n<\/part><\/code><\/pre>\r\n<\/div>\r\n\r\nhr<\/a><\/code> and br<\/a><\/code> elements, and XHTML 2\u2019s proposed separator<\/code> element<\/a>. To separate\r\n\tone part from another, these elements are placed between the content, which\r\n\tsome argue goes against the spirit of SGML and XML. e.g.<\/p>\r\n\r\n<p>part 1<\/p>\r\n<separator\/>\r\n<p>part 2<\/p><\/code><\/pre>\r\n<\/div>\r\n\r\nTag Name<\/h3>\r\n
separator<\/code> element has been renamed from HTML 4\u2019s hr<\/code> element.\r\n\tThe reason for this is that the presentation of the separation is not always\r\n\thorizontal, and not always a rule. According to a\r\n\trecent presentation by Stephen Pemberton<\/a>, the Japanese community were asking for a vr<\/code> (Vertical\r\n\tRule) element. He also provided some examples from different editions of\r\n\tthe same book where, in each case, the presentation of the separator was\r\n\tdifferent, but the semantics were the same.<\/p>\r\nseparator<\/code>. However, this name has been questioned because of its\r\n\tapparent spelling difficulty. It seems that \u2018separator\u2019 is often incorrectly\r\n\tspelt with an \u2018e\u2019 in place of the first \u2018a\u2019 as: \u2018seperator\u2019. There has been\r\n\ta suggestion for the tag name to be reduced to \u2018sep<\/code>\u2019 to avoid all this confusion\r\n\tand make it easier to type.<\/p>\r\nStructure<\/h3>\r\n
br<\/code> element be replaced with a much\r\n\tmore structured line<\/code> element instead, and that the hr<\/code> element be replaced with\r\n\ta similar structural equivalent. He compares hr<\/code> with the original structure\r\n\tof the p<\/code> element as a separator between paragraphs, rather than a container;\r\n\tand Unicode control codes; and explains why this structure is not appropriate\r\n\tin an SGML or XML context.<\/p>\r\n<part>\r\n <p>part 1<\/p>\r\n<\/part>\r\n<part>\r\n <separator\/>\r\n<\/part>\r\n<part>\r\n <p>part 2<\/p>\r\n<\/part><\/code><\/pre>\r\n<\/div>\r\n\r\nseparator<\/code> element in this case really only serves to separate the content\r\n\twithin the second part element. If the separator<\/code> element is really intended\r\n\tto both structurally and semantically separate parts 1 and 2, then it would\r\n\tseem that the boundary of separation extends beyond the separator<\/code> element\u2019s\r\n\tparent, which really seems to break the tree-like structure of XML markup even\r\n\tmore.<\/p>\r\nAlternative Markup<\/h3>\r\n
br<\/code> element has in fact already been addressed with the introduction\r\n\tof the l<\/code> element in XHTML 2, but the issues with the hr<\/code> and separator<\/code> elements\r\n\tstill remain. In essence, the hr<\/code> element is the block-level equivalent to the\r\n\tinline br<\/code> element; yet it is not quite so easy to replace it with a structural\r\n\tand semantic equivalent, as it is replacing br<\/code> with l<\/code>, because it is harder\r\n\tto define its semantics.<\/p>\r\nsection<\/code> element<\/a>. For example, the following is structurally equivalent to example 1\r\n\tand logically equivalent to both examples 1 and 2, but is it semantically equivalent\r\n\tto either?<\/p>\r\n\r\n<section>\r\n <p>part 1<\/p>\r\n<\/section>\r\n<section>\r\n <p>part 2<\/p>\r\n<\/section><\/code><\/pre>\r\n<\/div>\r\n\r\nPresentation<\/h3>\r\n
Semantics<\/h3>\r\n
hr<\/code> element in all versions\r\n\tfrom HTML 2.0 through to XHTML 1.1 and the separator<\/code> element in the XHTML 2.0\r\n\tdraft are as follows:<\/p>\r\n\r\n\r\n\t
HR<\/code> (HTML\r\n\t2.0<\/a>):<\/dt>\r\n\t<HR><\/code> element is a divider between sections of text; typically\r\n\t\ta full width horizontal rule or equivalent graphic.<\/dd>\r\n\t<HR><\/code> element is used for horizontal rules that act as dividers\r\n\t\tbetween sections. The SRC<\/code> attribute can be used to designate a custom graphic,\r\n\t\totherwise subclass HR<\/code> with the CLASS<\/code> attribute and specify the appropriate\r\n\t\trendering with an associated style sheet.<\/dd>\r\n\tHR<\/a><\/code> – horizontal rules<\/a> (HTML\r\n\t3.2)<\/dt>\r\n\tHR<\/code> element<\/a> (HTML 4.0 to XHTML 1.1 (Modularization of XHTML))<\/dt>\r\n\tHR<\/code> element causes a horizontal rule to be rendered by visual user agents.<\/dd>\r\n\tseparator<\/code> element<\/a> (XHTML 2.0)<\/dt>\r\n\tseparator<\/code> element separates parts of the document from each other.<\/dd>\r\n<\/dl>\r\nUsage<\/h3>\r\n
Book Chapters and Topics<\/h4>\r\n
section<\/code> element, which is designed to structure\r\n\ta document into sections – each with its own heading (in most cases).\r\n\tThe sections delimited with the separator element tend not to have headings\r\n\t\u2013 they\u2019re still related to the same section \u2013 but they do indicate a slight,\r\n\tyet related, change in topic. Thus, while both are similar, there is a semantic\r\n\tdifference between the two.<\/p>\r\n\r\nMenu Items<\/h4>\r\n
separator<\/code> element, this structure could be marked\r\n\tup as follows.<\/p>\r\n\r\n<nl>\r\n <label>Menu<\/label>\r\n <li>Item 1<\/li>\r\n <li>Item 2<\/li>\r\n <li><separator\/><\/li>\r\n <li>Item 3<\/li>\r\n <li>Item 4<\/li>\r\n<\/nl><\/code><\/pre>\r\n<\/div>\r\n\r\n