HTML: Inline & HTML5 Elements, and More CISC 282 September 20, 2017 Semantic HTML HTML is used to define content Choose tags according to content, not style What category (defined with tags) suits your text? You may not like how it looks...... but you can change that elsewhere Stylesheets handle the appearance 2
MIME Types Multipurpose Internet Mail Extensions Method for specifying a resource's type Originally defined for e-mail use Used by many web protocols Declared using metadata Using XHTML (for legacy reasons)? Must declare your resources' types to use them and for others to make use of them Declare your page's type in the header for validation <meta http equiv="content Type" content="text/html;charset=utf 8" /> 3 MIME Types Format: category/subcategory Type MIME Type Description AV video/quicktime QuickTime movies audio/mpeg MPEG or MP3 Image image/gif GIF image image/jpeg JPEG image image/png PNG image Text text/css CSS stylesheet text/html HTML webpage text/javascript JavaScript program 4
Basic Inline Elements Code <code>content</code> Denotes computer code or technical material Line break <br/> Inserts a new line Be careful not to overuse! Try to separate material using block elements Abbreviation <abbr title="full">content</abbr> Specifies an abbreviation Full title is displayed as a tooltip on mouseover 5 Basic Inline Elements Emphasis <em>content</em> <strong>content</strong> Emphasizes or strongly emphasizes text <i> and <b> are considered passé Superscript <sup>content</sup> Raises content and reduces size (by default) Subscript <sub>content</sub> Lowers content and reduces size (by default) 6
Images <img src="path" alt="description" /> Displays an image on the page path can be a URL, absolute or relative URL: http://validator.w3.org/images/w3c.png Absolute: /images/w3c.png Begins from document root on web server The absolute path for you is /~NetID/ Relative:../images/w3c.png With respect to the current file's path description (i.e., the alt text) is essential for accessibility Used by screen readers Displayed if there's no image at path 7 Images Optional attributes width = "#" or width = "%" height = "#" or height = "%" Sets width or height of image Can be # of pixels or % of the page An img is actually somewhat inline and somewhat block Produces interesting behaviour and style options 8
Anchors <a href="path">content</a> Specifies a hyperlink to a file or target For file, path can be a URL, absolute or relative http://fortuito.us/diveintohtml5/index.html /index.html../../index.html Targets are created using id attribute Common to all block and inline tags <h1 id="links">links</h1> <a href="#links">click here for links!</a> <a href="index.html#links">links are here!</a> 9 Anchors Anchors are inline elements In theory, should only wrap other inline elements XHTML prefers this but that's not always feasible In HTML5, anchors can wrap multiple elements Even multiple block elements just not another a element 10
HTML Outline The # in a heading <h#> represents its rank Nested headings create an outline Known as implicit sectioning Based on rank <h1>a</h1> <h2>b</h2> <h3>c</h3> <h3>d</h3> <h2>e</h2> <h3>f</h3> <h1>g</h1> 1. A 1.1. B 1.1.1. C 1.1.2. D 1.2. E 1.2.1. F 2. G 11 HTML5 Outline Elements <header>content</header> Introductory content (e.g., title) <nav>content</nav> Set of links (e.g., main menu) content</article> Self-contained content (e.g., content on cats) content Thematic grouping of content (e.g., section on catnip) Typically starts with a heading Can contain a header and footer 12
HTML5 Outline Elements <aside>content</aside> Set of tangentially-related content (e.g., links to information about dogs) <footer>content</footer> Concluding content (e.g., copyright) Why use these outline elements? Semantic HTML Use accurate and meaningful tags to organize content Additional styling options 13 HTML5 Outline Elements Sections can also contain articles e.g., section of search results on blog posts Section headings can restart rank #'s nav should be used for site navigation, not all sets of links Typically primary navigation (e.g., main menu) Often secondary navigation (e.g., sidebar menu) These tags are only supported by IE in version 9 and up IE8 or older treats these elements as inline Older versions of other browsers have better support 14
HTML5 Outline Both sections and headings form the outline Heading rank & nesting in blocks should be consistent Inconsistency will affect the outline Consistent Consistent Avoid <h1>a</h1> <h1>b</h1> <h2>c</h2> <h2>d</h2> <h1>e</h1> <h1>a</h1> <h2>b</h2> <h3>c</h3> <h3>d</h3> <h2>e</h2> <h2>a</h2> <h3>b</h3> <h1>c</h1> <h2>d</h2> <h1>e</h1> 15 Other HTML5 Elements These elements won't be covered in CISC 282... but they are noteworthy canvas provides drawing features (e.g., lines, shadows) Need to use JavaScript to draw Not accessible for adaptive tech (e.g., screen readers) audio and video which supports different formats Can display controls Can autoplay and loop Don't typically do this for audio, though Even more tags! figure, mark, meter, time, etc. 16