HTML notes

html-notes.markdown

HTML notes

A Pen by clayanNEU on CodePen.

License.

index.html

<h1>1st Level Headline</h1>
<h2>subtitle</h2>
<p>This is a paragraph</p>
<!-- Italics -->
<p1> <i>visual-only italics like for titles</i>
<em>emphasis on wording</em> <p1>
<!-- Bold -->
<p2> <strong> Use for importance, seriousness, urgency </strong>
<b> Bold for style </b> <p2>
  
<!-- Lists -->
  <ul> unordered list of kitchen items
    <li>cup</li>
    <li>knife</li>
    <li>bowl</li>
  </ul>
  
  <ol> ordered list
    <li>cup</li>
     <li>knife</li>
    <li>bowl</li>
  </ol>
  
  <dl> <b>Definition List</b>
    <dt>Unordered List (term)</dt>
    <dd> For grouping a collection of items that do not have a 
      numerical ordering. Their order in the list is meaningless. (defintion)</dd>
    
    <dt>Ordered List</dt>
    <dd> For an ordered list of items, typically rendered as a numbered list. Order is meaningful.</dd>
    
    <dt>Definition List</dt>
    <dd> For creating a list of groups of terms and descriptions. Can be used as a list of key-value pairs.</dd>
    
    
<blockquote>
  <p> paragraph </p>
  
  <cite> - Clayton Yan</cite>
    </blockquote>
    
    <q> I am hungry.</q> said Clayton

<!-- Inline Elements
<q>, <strong>, <b>, <i>, <em> for wrapping around -->
    
<!-- Block-Level Elements
<blockquote>, <p>, <ul> that start a new block -->
    
    
<!-- Dates and times -->
    <time> May 1, 2020</time>
    <br>
    
<!-- Attribute for date/time -->
    <time datetime="2020-05-01">May 8, 2020 doesn't matter for people</time>
    <br>
    <time datetime="2020-11-04 19:00-0500"> Wednesday, Nov 4th at 7p</time>
    
    <br>
    <code> String a = new String("hello"); </code>
    <br>
    <code> &lt;code&gt;</code> element
    <br>
    
    <!-- <pre> maintains formatting and spacing -->
<pre>
h e l l ooo ooo    oooo
<code> Main{
  println("helloos");
}</code>
</pre>
    
    <!-- subscripts, superscripts -->
    
    <p> H<sub>2</sub>O <p>
    <p> footnote or <i>e</i><sup>3.3</sup>
      
    <!-- stuff for footers -->
      <br>
      <small> &copy; &trade; &star;2020 HMTML company </small>
      
    <!-- Global attributes -->
      
<h3>Attributes</h3>
    <p class="intro">
      This is the introduction, allows us to target all elements with that class in our CSS or JavaScript
    </p>
    
    <p class="intro" id="article-intro">
      allows us to target a unique element with that id in our CSS or JavaScript
    </p>
    
    <blockquote contenteditable="true">
      
      CLick ME, Edit this content to add your own quote.
      
    </blockquote>
    
    <br>
    <p lang="en-GB">This paragraph is in British English. </p>
    
    <p dir="ltr">This paragraph is in English. It flows from left to right. </p>
      
    <br>
    <p dir="rtl">This paragraph is in English. It flows from right to left. </p>
    
    <h3> ARIA</h3>
    <h4 aria-label="Hello World"></h4>
    <div class="grid" aria-hidden="true">
      
      
      <p> This is a non&nbsp;breaking space.</p>
      <p> Two spaces between&nbsp;&nbsp;here</p>