Saturday, 8 December 2012
HTML syntax
Saturday, 8 December 2012 by Unknown
HTML Syntax
Writing valid HTML (or XHTML) is not a terribly difficult task once you know what the rules are, although the rules are slightly more stringent in XHTML than in HTML.
The Document Tree
A web page is, at its heart, little more than a collection of HTML elements—the defining structures that signify a paragraph, a table, a table cell, a quote, and so on. The element is created by writing an opening tag, and completed by writing a closing tag. In the case of a paragraph, you’d create a
p
element by typing <p>Content goes here</p>
.
The elements in a web page are contained in a tree structure in which
others). Where this occurs, the opening and closing tags must be symmetrical. If an opening paragraph tag is followed by the opening
html
is the root element that splits into the head
and body
elements (as explained in Basic Structure of a Web Page). An element may contain other nested elements (although this very much depends on what the parent element is; for example, a p
element can contain span
, em ,
or strong
elements, among others). Where this occurs, the opening and closing tags must be symmetrical. If an opening paragraph tag is followed by the opening
em
element, the closing tags must appear in the reverse order, like so: <p>Content goes here, <em>and some of it needs emphasis</em> too</p>
. If you were to type <p>Content goes here, <em>and some of it needs emphasis too</p></em>
, you’d have created invalid markup.Case Sensitivity
In HTML, tag names are case insensitive, but in XHTML they’re case sensitive. As such, in HTML, you can write the markup in lowercase, mixed case, or uppercase letters. So
<p>this is a paragraph</p>
, as is <P>this example</P>
, and even <P>this markup would be valid</p>
. In XHTML, however, you must use lowercase for markup: <p>This is a valid paragraph in XHTML</p>
.Commenting Markup
You may add comments in your HTML, perhaps to make it clear where sections start or end, or to provide a note to remind yourself why you approached the creation of a page in a certain way. What you use comments for isn’t important, but the way that you craft a comment is important. The HTML comment looks like this:
<!-- this is a comment -->
. It’s derived from SGML, which starts with an <!
and ends with an >
; the actual comment is, in effect, inside the opening --
and the closing --
parts. These hyphens tell the browser when to start ignoring text content, and when to start paying attention again. The fact that the double hyphen --
characters signify the beginning and end of the comment means that you should not use double hyphens anywhere inside a comment, even if you believe that your usage of these characters conforms to SGML rules. Single hyphens are allowed, however.
The markup below shows examples of good and bad HTML comments—see the remark associated with each example for more information:
<p>Take the next right.<!-- Look out for the signpost for 'Castle' --></p> a valid comment <p>Take the next right.<!-- Look out for -- Castle --></p> not a valid comment; the double dashes in the middle could be misinterpreted as the end of the comment <p>Take the next right.<!-- Look out for -- -- Castle --></p> a valid comment; 'Look out for' is one comment, 'Castle' is another <p>Take the next right. <!--------------------------------- This is just asking for trouble. Too many hyphens! --></p> a valid comment; don't use hyphens or <> characters to format comment text <p <!-- class="lively" -->>Wowzers!</p> It's not possible to comment out attributes inside an HTML element
Subscribe to:
Post Comments (Atom)
0 Responses to “HTML syntax”
Post a Comment