Feedback Semantic DOM

[rijkvanzanten]

Heya! Couple of quick tips/feedback points based on your HTML file as of today

• Nitpicky: inconsistent use of quotes in attributes:
  

  manuscript/words-as-materials.html

  Line 6 in 86121c3

  <link href="words-as-materials-style.css" rel=stylesheet>

  
  (Note how rel=stylesheet is missing the " around stylesheet)
• Think of heading levels (eg h1-h2-h3 etc) as chapter markers rather than visual differentiators. With that in mind, a couple problems arise:
  • Your header now contains two semantic "book titles":
    

    manuscript/words-as-materials.html

    Lines 12 to 15 in 86121c3

    	<header>
    	<h1 id="outline">Words as</h1>
    	<h1>Materials</h1>
    	</header>

    
    Whereas you're only trying to differentiate the first bit for styling purposes. An emphasis element (<em>) (if there's a meaningful difference in the words) or span element (<span>) would be more suitable: <h1><span>Words as</span> Materials</h1>
  • I believe you intend this to be a sidebar

    manuscript/words-as-materials.html

    Lines 19 to 21 in 86121c3

    	<h4>Response</h4>
    	<h4>How design works</h4>
    	<h4>How communication works</h4>

    
    Semantically, it would be more appropriate to have that be a <nav> with a list <ul> and list-items <li> rather than headings
• You're using the br element for stylistic purposes rather than semantic purposes. The element is used where the division of lines is significant (source).
• The <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. (source). I don't think your use here is intended:
  

  manuscript/words-as-materials.html

  Line 176 in 86121c3

  After choosing a design direction, we can prototype it, refine it, and try to make it speak for itself. The product needs to reflect thegoals and intent we set out to achieve<code>&#8212;</code>and in some ways, it needs to stand on its own.

  
  You don't need to wrap HTML Entities in anything specific for them to work.
• Another good example of the "headings as style". These are not the title of the page:
  

  manuscript/words-as-materials.html

  Lines 573 to 576 in 86121c3

  	<footer>
  	<h1 id="outline">Thank</h1>
  	<h1>You.</h1>
  	</footer>