XML, HTML, and Best Practices

Descriptive vs Presentational Markup

  • The goal of XML and HTML, broadly, is to describe what data is. 
  • One XML file can become a lot of different kinds of other files via XSLT (e.g., HTML, PDF, differently formatted XML, etc.). 
  • XML and HTML generally have little to do with presentation. 
    • XSLT determines what parts of an XML file are included in the transformation. 
    • The transformation (here, mostly HTML) is then styled by a cascading style sheet (CSS).
      • Yes, CSS can be embedded into HTML, but keeping the two separate will keep your project more consistent. 
      • For the purposes of this workshop, we're embedding some styling into the HTML.
    • One HTML file can be styled in numerous ways. See CSS Zen Garden for examples.

 

In this workshop, we are moving from one descriptive markup language to another via XSLT. Description of data =/= presentation of data. 

 

Basic HTML

<!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
        </head>
        <body>
            <h1>Heading</h1>
            <p>Paragraph</p>
        </body>
    </html>

The HTML <head>

  • Contains webpage metadata
  • Requires a <title> element (used for the title in the browser's toolbar)
  • Uses <meta> to define character sets, viewport size, keywords, and other information
  • Uses <link> to connect to stylesheets
  • Uses <script> to connect to JavaScripts

 

The HTML <body> contains all of the content to be displayed to the user. 

A GLossary of our HTML tags

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> — Used to denote different levels of headings.

  • For accessibility, these should always be used in order, from <h1> (top level) to <h6> (lowest level). They are indicators of hierarchy, not size. You can style them to suit your needs with CSS.

<section> — Used to define a discrete section of a text for either semantic or markup purposes

<div> — Another way of declaring a discrete section of text, usually for styling. Less accessible than <section> because it does not convey they same semantic meaning.

<p> — Paragraph! We know this one.

<em> — Emphasis. Used to style specific portions of text, usually by rendering them in italics. Indicates that text should be emphasized by a screen reader.

  • We could also use <mark> if we don't want the added emphasis.

<br/> — Line break. Equivalent to the TEI <lb>

  • This tag is always self-closing.

​

 

A GLossary of our HTML tags for Tables

<table> — defines the beginning and ending of content to be formatted as a table.

<thead> — sets header content for a table apart from the table body.

  • Usually contains a single row (<tr>).

<tbody> — groups a table's body content

  • Usually contains several rows (<tr>)

<tr> — declares the start of a new row in the table

<th> — defines a table cell as containing header content

<td> — defines a table cell as containing data content

​

 

Accessibility

  • Use the right element for the job, embrace their semantic nature​
    • Remember, HTML is about what the content is, not how it looks. 
  • Always include descriptive, context-specific alt text for images and figures.
  • Use ARIA roles to clarify the meaning and usage of multimedia features and widgets. 
  • Use descriptive link text rather than "click here" or raw hyperlinks. 

 

Made with Slides.com