DDQ TUE 2021-11-02

31. HTML Semantics¶

31.1. Agenda¶

Important

No office hours today, TUE 2021-11-02.

General Announcements
Discussion & Activity

Table 31.1 Current Assignments for Everyone¶
Category	Assignment	Day	Date
Term Project	Milestone 3: Design Alternatives; extended \(\to\)	SUN	2021-12-071
Exams	Exam 22	TBD	TBD

1: Originally announced on MON 11-01: I apologize for the delay, but you should receive feedback for Milestone 2 at or before the end of day on WED November 3. To give you more time to incorporate feedback, if needed, into your Milestone 3 submission, I’ve extended the deadline to SUN night.
2: As explained in the Exams section of the syllabus, the final milestone of your term project serves as your final examination in this course. Exam 2 is, therefore, a regular exam; it is not the final exam.

31.2. Activity¶

31.2.1. HTML¶

HTML¶
HyperText Markup Language¶: HTML is the World Wide Web’s core markup language for semantically describing documents and, to some extent, application systems. The language uses tags to denote elements in a document’s object model.

See also

HTML Living Standard

31.2.1.1. Semantics¶

While most user agents have reasonable defaults for the style and presentation of HTML elements, authors should not use element styling to determine what elements to use in a document; instead, elements should be chosen based on the semantics (i.e., the meaning) of the content a particular type of element is said to describe in the HTML standard.

Styling is still important from a UX perspective, but so is accessibility, usability, and inclusion. Since element styling can be adjusted using CSS, authors should semantically describe content so that their document works well with assistive technologies, including screen readers that read document content to users, screen magnifiers that enlarge document content, and assistive technologies for navigating a document (e.g., voice recognition software or the keyboard navigation capabilities provided by most user agents).

31.2.1.2. Document¶

html element¶

The html element represents the root of an HTML document.

<!doctype html>
<html lang="en">
  <head>
    <title>Swapping Songs</title>
  </head>
  <body>
    <h1>Swapping Songs</h1>
    <p>Tonight I swapped some of the songs I wrote with some friends, who
    gave me some of the songs they wrote. I love sharing my music.</p>
  </body>
</html>

See also

HTML Living Standard: The html element

HTML comment¶

Comments in an HTML document, which are not rendered by a user agents, have the following format:

1<!-- Comment text. -->

There are some restrictions on what can be included as part of the comment text: the text must not start with the string ">", nor start with the string "->", nor contain the strings "" (since that denotes the end of a comment), or "--!>", nor end with the string "<!-". The rules do permit multliline comments:

<!--
  Comment text. More comment text.
  Even more comment text, etc.
-->

31.2.1.3. Metadata¶

head element¶

The head element represents a collection of metadata for an HTML document.

<!doctype html>
<html lang=en>
  <head>
    <meta charset="utf-8">
    <title>Document Title</title>
    <link rel="stylesheet" href="static/site/default.css">
    <script src="static/site/support.js"></script>
  </head>
</html>

Here are some different ways to access head element using vanilla JavaScript:

document.head
document.querySelector('head')

See also

HTML Living Standard: The head element

title element¶

The title element represents an HTML document’s title or name. Its text content is usually displayed in the user agent’s title bar or in the label for a tab. Authors are encouraged to use titles that identify their documents out of context (e.g., in a user’s history, their bookmarks, or in search results).

<!doctype html>
<html lang=en>
  <head>
    <meta charset="utf-8">
    <title>Document Title</title>
    <link rel="stylesheet" href="static/site/default.css">
    <script src="static/site/support.js"></script>
  </head>
</html>

Here are some different ways to access the text content of the title element using vanilla JavaScript:

document.title
document.querySelector('title').text

See also

HTML Living Standard: The title element

link element¶

The link element allows authors to link their HTML document to other resources, described using the element’s href attribute (resource location) and rel attribute (resource type).

<!doctype html>
<html lang=en>
  <head>
    <meta charset="utf-8">
    <title>Document Link</title>
    <link rel="stylesheet" href="static/site/default.css">
    <script src="static/site/support.js"></script>
  </head>
</html>

Here is some vanilla JavaScript code that prints (to the console) the href values for each link element that refers to a stylesheet:

document.querySelectorAll('link[rel="stylesheet"]').forEach(link => {
  console.log(link.href)
})

See also

HTML Living Standard: The link element

meta element¶

A meta element represents various kinds of metadata associated with an HTML document that cannot be expressed using other elements. A set of standard metadata names for the meta element can be found here and here.

<!doctype html>
<html lang=en>
  <head>
    <meta charset="utf-8">
    <title>Document Meta</title>
    <link rel="stylesheet" href="static/site/default.css">
    <script src="static/site/support.js"></script>
  </head>
</html>

Here are some different ways to access the text content of the meta element describing the document’s character set using vanilla JavaScript:

document.querySelector('meta[charset]').attributes.charset.textContent
document.querySelector('meta[charset]').getAttribute('charset')

See also

HTML Living Standard: The meta element

style element¶

A style element allows authors to embed CSS stylesheets directly into their HTML document’s (e.g., instead of using a link element).

<!doctype html>
<html lang=en>
  <head>
    <meta charset="utf-8">
    <title>Document Style</title>
    <link rel="stylesheet" href="static/site/default.css">
    <script src="static/site/support.js"></script>
    <style type="text/css; charset=utf-8">
        ...
    </style>
  </head>
<html>

See also

HTML Living Standard: The style element

31.2.1.4. Document Content¶

body element¶

The body element represents the contents of an HTML document.

<!doctype html>
<html lang=en>
  <head>
    ...
  </head>
  <body>
    <header>
      <h1>My App Name</h1>
    </header>
    <main>
      ...
    </main>
    <footer>
      <p>Copyright &copy; <span itemprop="copyrightYear">2021</span>
      <span itemprop="copyrightHolder">The Example Company</span></p>
    </footer>
  </body>
</html>

See also

HTML Living Standard: The body element

More Elements

Instead of listing all the elements here, please refer to the HTML Living Standard: The elements of HTML section for semantic element descriptions, examples, and advice.

31.2.2. Breakout Groups¶

Important

RANDOMIZE: Please move around to different tables and form a random group for this activity.

Quickly introduce yourselves to each other, if you don’t already know each other.
Pick a group representative. This person will be responsible for posting your breakout group’s response on Piazza before breakout group work ends for this activity.
Help your group representative respond to the following in a followup discussion to Piazza @89.
1. List the names of your breakout group members.
2. Use JSFiddle to create and style (optional) an HTML document that introduces users to the concepts of accessibility, usability, and inclusion.
  Criteria
  1. You should start with the following template boilerplate, but feel free to modify it as needed:
    <!doctype html> <html lang=en> <head> <meta charset="utf-8"> <title>Document Title Here</title> </head> <body> <header> <h1>Top-Level Heading Here</h1> </header> <main> ... </main> <footer> ... </footer> </body> </html>
  2. Except for the template provided above, the only other resource you may copy-paste boilterplate from is HTML Living Standard: The elements of HTML Remember, choose HTML elements based on their semantic description; you can always change how they look using CSS. If time permits, try to style your document using CSS.
    
    Note
    
    When using JSFiddle, CSS rules that you include in the “CSS” text area are automatically linked to the HTML document without requiring a link element.
  3. Your document should not merely copy-paste the definitions. Please make an honest attempt to introduce the concepts, provide context, and include links to relevant resources.
3. Update your fiddle with notes about why your group chose particular element types for various pieces of document content and why your group nested things the way that you did. You should include these notes directly into the HTML document using comments.
4. Share your fiddle. Whenever you save a fiddle, a new URL is generated. Copy that URL and paste it into your follow-up discussion for others to see.
5. Include a screenshot of your fiddle’s resulting document.
6. Include a few sentences describing what you learned through this process.
7. Look at and reply to the posts that other groups made.

31.2.3. After Breakout Groups¶

Duration: TBD

Look at some of the Piazza posts as a class.

31.2.4. After Class¶

Before 11:55PM on WED 11-03, individually comment on someone else’s followup discussion in Piazza @89.
Comments

Please keep the comments polite and constructive. In addition to whatever else you want to write, please comment on:
- one or more aspects that you like or think is interesting; and
- one or more aspects that you think needs improvement.
As always, please be sure to provide a brief justification for each.

Continue reading the Design and Practicum modules, and make sure you’re aware of current assignments and their due dates.
Suggestion: Consider reproducing an interface relevant to your term project as a mockup in Adobe XD or Figma.