SYST10049 learn HTML

Non-semantic wrappers

Used only when a suitable semantic element is not available. Always give preference to a semantic element before selecting DIV or SPAN

The <div> element: a block behaviour
The <span> element: an inline behaviour

Line breaks and horizontal rules

The <br> element: a line break; an empty element; inline behaviour (is not a box, does not take up the entire width)
The <hr> element: an horizontal line; an empty element; block behaviour

Example

Output

Code


<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</p>
<hr>
<p>
<!-- the same paragraph contains break lines -->
Lorem ipsum dolor sit amet, 
<br>consectetur 
<br>adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et 
<br>dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco 
<br>laboris nisi ut aliquip ex ea commodo consequat. 
</p>
<hr>

Page regions

element main

represents the main content of the body of a document or application.

is not sectioning content and has no effect on the document outline.
main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or application’s main function is that of a search form).
must not be more than one visible main element in a document.
authors must not include the main element as a descendant of an article, aside, footer, header or nav element.
is not suitable for use to identify the main content areas of sub sections of a document or application.

element header

usually contain Web page's/section's headers: logo, navigations, headers, search form, etc. ☍MDN ☍W3C

element footer

typically contains information about its section: author, links to related documents, copyright info, etc. ☍MDN ☍W3C

element aside

represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content: pull quotes, sidebars, advertising, groups of nav elements, etc. ☍MDN ☍W3C

Output

Code


<!-- a typical layout using page regions -->
<header>
  <h1>Page Heading</h1>
<header>
<nav>
  links will appear here
<nav>
<main>
  <p>Main content goes here.</p>
<main>
<footer>
  <!-- contact info goes here -->
  <address>Web Development © Sheridan College</address>
</footer>

Articles and sections

element article

represents a independent item section of content: news topic, forum post, newspaper article, blog entry, user-submitted comment, etc.

element section

represents a generic section of a document or application.

It is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.
You are encouraged to use the <article> element, instead, when the content is complete, or self-contained, composition.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

Example

Output

Code


<!-- a sample article layout -->
<article>
  <header>
    <h2>Article Heading</h2>
    <h5>Byline</h5>
  </header>
  <section>
    <h3>Section 1 Subheading</h3>
    <p>Content...</p>
  </section>
  <section>
    <h3>Section 2 Subheading</h3>
    <p>Content...</p>
  </section>  
    …
  <footer>
    article footer
  </footer>    
</article>

Figures and figure captions

element figure

represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

can be used to annotate illustrations, diagrams, photos, code listings, etc.
when a figure is referred to from the main content of the document by identifying it by its caption (e.g., by figure number), it enables such content to be easily moved away from that primary content, e.g., to the side of the page, to dedicated pages, or to an appendix, without affecting the flow of the document.

element figcaption

represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

Example

Output

Code


<!-- image in a figure with description -->
<p>Content before...</p>
<figure>
    <img src="semElements.gif" alt="page regions">
<figcaption>Figure XVI: description here</figcaption>
</figure>
<p>Content after...</p>

More examples

figure-for-code.html (full code)

Ordered, unordered, and description lists

Ordered (numbered) and unordered (bulletted) lists

element ol

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. The items of the list are the li element child nodes of the ol element, in tree order.

The reversed attribute is a boolean attribute. If present, it indicates that the list is a descending list (..., 3, 2, 1). If the attribute is omitted, the list is an ascending list (1, 2, 3, ...).
The start attribute, if present, must be a valid integer giving the ordinal value of the first list item.
The type attribute, can be used to specify the kind of marker to use in the list, in the cases where that matters. It must have a value that is a case-sensitive match for one of the characters 1 (decimal), a (lower-alpha), A (upper-alpha), i (lower-roman), I (upper-roman).

element ul

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. The items of the list are the li element child nodes of the ul element.

element li

The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element’s list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element.

Description lists

element dl: The dl element represents a description list of zero or more term-description groups. Each term-description group consists of one or more terms and one or more descriptions. Term-description groups may be names and definitions, questions and answers, categories and topics, or any other groups of term-description pairs.
element dt: The dt element represents a term, part of a term-description group in a description list (dl element).
element dd: The dd element represents a description, part of a term-description group in a description list (dl element).

Examples

Output

Code


<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

Output

Code


<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Output

Code


<figure>
  <figcaption>The top 10 movies of all time</figcaption>
  <ol reversed>
    <li><cite lang="sh">Црна мачка, бели мачор</cite>, 
            1998</li>
    <li><cite>A Bug’s Life</cite>, 1998</li>
    <li><cite>Toy Story</cite>, 1995</li>
    <li><cite>Monsters, Inc</cite>, 2001</li>
    <li><cite>Cars</cite>, 2006</li>
    <li><cite>Toy Story 2</cite>, 1999</li>
    <li><cite>Finding Nemo</cite>, 2003</li>
    <li><cite>The Incredibles</cite>, 2004</li>
    <li><cite>Ratatouille</cite>, 2007</li>
  </ol>
</figure>

Example from W3C demonstrating a reversed ordered list, in a figure with figure caption, use of cite element and lang attribute.

Output

Code


<dl>
  <dt>What is my favorite drink?</dt>
  <dd>Tea</dd>
  <dt>What is my favorite food?</dt>
  <dd>Sushi</dd>
  <dt>What is my favourite film?</dt>
  <dd>What a Wonderful Life</dd>
</dl>

Output

Code


<!--
In this example the DFN element indicates that the DT 
element contains a defined term, the definition for which 
is represented by the DD element
-->
<dl>
  <dt lang="en-us"><dfn>Color</dfn></dt>
  <dt lang="en-gb"><dfn>Colour</dfn></dt>
  <dd>A sensation which (in humans) derives from the ability
  of the fine structure of the eye to distinguish three 
  differently filtered analyses of a view.</dd>
</dl>

Table data structures

The various table elements and their content attributes together define the table model. A table consists of cells aligned on a two-dimensional grid of slots with coordinates (x, y). The grid is finite, and is either empty or has one or more slots. Tables correspond to table elements. A cell is a set of slots anchored at a slot. Cells can either be data cells or header cells. Data cells correspond to td elements, and header cells correspond to th elements. Cells of both types can have zero or more associated header cells. It is possible, in certain error cases, for two cells to occupy the same slot. Documents must not have table model errors. A row is a complete set of slots from x=0 to x=N-1, for a particular value of y. Rows usually correspond to tr elements. A column is a complete set of slots from y=0 to y=N-1, for a particular value of x. Columns can correspond to col elements.

Simple data tables

element table: An HTML table is defined with the table tag.
element tr: Each table row is defined with the tr tag.
element td: A table data cell is defined with the td tag.
element th: A table header is defined with the th tag. By default, table headings are bold and centered.
attribute colspan: Cells that span many columns are created using the colspan attribute.
attribute rowspan: Cells that span many rows are created using the rowspan attribute.
attribute border: If you do not specify a border for the table, it will be displayed without borders. A border is set using the CSS border property. Note that in some examples, the border attribute is used temporarily, to display borders without CSS.
element caption: To add a caption to a table, use caption tag. It must be inserted immediately after the table tag.

Examples

Example of a two-by-two table. Note the border attribute is included only during development to see the boraders of the table and the cells. Later will be replaced by styles.

Output

Code


<!-- border attribute temporary -->
<table border="1">	
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr> 
</table>

Example of a two-by-two table. The cells in the first row have been replaced by table headings (th); bold by default.

Output

Code


<!-- border attribute temporary -->
<table border="1">	
  <tr>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr> 
</table>

Example of a three-by-three table with row spans and column spans. Note the alignment of the content - horizontally right-justified and vertically centered.

Output

Code


<!-- border attribute temporary -->
<table border="1">	
  <tr>
    <td colspan="2">A</td>
    <td rowspan="2">C</td>
  </tr>
  <tr>
    <td rowspan="2">D</td>
    <td>E</td>
  </tr> 
  <tr>
    <td colspan="2">H</td>
  </tr>   
</table>

Complex data tables

~~tbody, thead, tfoot, col, colgroup~~ - not covered in the condensed version.

Output

Code


<!-- comment -->
<table>
<tbody>
</tbody>
<thead>
</thead>
<tfoot>
</tfoot>
</table>

HTML table advanced features and accessibility (MDN)

Marking up semantic content

Non-semantic wrappers

Line breaks and horizontal rules

Example

Output

Code

Page regions

Output

Code

Articles and sections

Example

Output

Code

Grouping content

Figures and figure captions

Example

Output

Code

More examples

Ordered, unordered, and description lists

Ordered (numbered) and unordered (bulletted) lists

Description lists

Examples

Output

Code

Output

Code

Output

Code

Output

Code

Output

Code

Table data structures

Simple data tables

Examples

Output

Code

Output

Code

Output

Code

Complex data tables

Output

Code