Semantics is the study of the meanings of words and phrases in a language. Semantic elements = elements with a meaning. What are Semantic Elements? A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: <div> and <span> – Tells nothing about its content. Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content. Browser Support […]
What is New in HTML5? The DOCTYPE declaration for HTML5 is very simple: <!DOCTYPE html> The character encoding (charset) declaration is also very simple: <meta charset=”UTF-8″> HTML5 Example: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>Title of the document</title> </head><body> Content of the document…… </body></html> Try it Yourself » The default character encoding in HTML5 is UTF-8. New HTML5 Elements […]
Samp Object The Samp object represents an HTML <samp> element. Access a Samp Object You can access a <samp> element by using getElementById(): Example var x = document.getElementById(“mySamp”); Try it Yourself » Create a Samp Object You can create a <samp> element by using the document.createElement() method: Example var x = document.createElement(“SAMP”); Try it Yourself » Standard […]
Example A ruby annotation:www. <ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby> Try it Yourself » Definition and Usage The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations. Use the <rp> tag together with the <ruby> and the <rt> tags: The <ruby> element consists of one or more characters […]
Example A ruby annotation: <ruby> 漢 <rt> ㄏㄢˋ </rt> </ruby> Try it Yourself » Definition and Usage The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation. Use the <rt> tag together with the <ruby> and the <rp> tags: The <ruby> element consists of one or more characters that needs an explanation/pronunciation, and an […]
Strong Object The Strong object represents an HTML <strong> element. Access a Strong Object You can access a <strong> element by using getElementById(): Example var x = document.getElementById(“myStrong”); Try it Yourself » Create a Strong Object You can create a <strong> element by using the document.createElement() method: Example var x = document.createElement(“STRONG”); Try it Yourself » Standard […]
Example Use the meter element to measure data within a given range (a gauge): <meter value=”2″ min=”0″ max=”10″>2 out of 10</meter><br> <meter value=”0.6″>60%</meter> Try it Yourself » Definition and Usage The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge. Examples: Disk usage, the relevance of a […]
HTML <meter> form Attribute Example A <meter> element located outside a form (but still a part of the form): <form action=”/action_page.php” method=”get” id=”form1″> First name: <input type=”text” name=”fname”><br> <input type=”submit” value=”Submit”> </form><meter form=”form1″ name=”x1″ min=”0″ low=”40″ high=”90″ max=”100″ value=”95″></meter> Try it Yourself » Definition and Usage The form attribute specifies one or more forms the <meter> element belongs to. HTML <meter> high Attribute Example A gauge with a current value and min, max, high, […]
Example A video with two subtitle tracks: <video width=”320″ height=”240″ controls> <source src=”forrest.mp4″ type=”video/mp4″> <track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”> <track src=”subtitles_no.vtt” kind=”subtitles” srclang=”no” label=”Norwegian”> </video> Definition and Usage The required src attribute specifies the URL of the track file. Browser Support The numbers in the table specify the first browser version that fully supports the attribute. Attribute src 18.0 10.0 31.0 6.0 15.0 Differences Between HTML 4.01 and […]
Example A video with two subtitle tracks. “English” subtitle is the default: <video width=”320″ height=”240″ controls> <source src=”forrest.mp4″ type=”video/mp4″> <track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English” default> <track src=”subtitles_no.vtt” kind=”subtitles” srclang=”no” label=”Norwegian”> </video> Definition and Usage The default attribute is a boolean attribute. When present, it specifies that the track is to be enabled if the user’s preferences do not indicate that another track would be more appropriate. Note: There must not […]
Example A video with two subtitle tracks: <video width=”320″ height=”240″ controls> <source src=”forrest.mp4″ type=”video/mp4″> <track src=”subtitles_en.vtt” kind=”subtitles” srclang=”en” label=”English”> <track src=”subtitles_no.vtt” kind=”subtitles” srclang=”no” label=”Norwegian”> </video> Definition and Usage The <track> tag specifies text tracks for media elements (<audio> and <video>). This element is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing. Browser Support The numbers in […]
Example An image-map, with clickable areas: <img src =”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”> <map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”> <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”> <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”> </map> Try it Yourself » Definition and Usage The coords attribute specifies the coordinates of an area in an image-map. The coords attribute is used together with the shape attribute to specify the size, shape, and placement of an area. Tip: The coordinates of the top-left […]
Example An image-map, with clickable areas: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”><map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”> <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”> <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”> </map> Try it Yourself » Definition and Usage The alt attribute specifies an alternate text for an area, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of […]
Example An image-map, with clickable areas: <img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”><map name=”planetmap”> <area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”> <area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”> <area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”> </map> Try it Yourself » Definition and Usage The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas). The <area> element is always nested inside a <map> tag. Note: The usemap attribute in the <img> tag is associated with the <map> element’s […]
XHTML is HTML written as XML. What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers Why XHTML? Many pages on the internet contain “bad” HTML. This HTML code works fine in […]
