Skip to content

HTML5

Jump to bottom
Mithi Sevilla edited this page Apr 4, 2021 · 4 revisions

div replacements

  • article - independent, self contained like blog entry, author biography etc
  • aside - content separate from surrounding content aside from the content it is placed in
  • figure - self contained content like illustration, diagram, photo, usually wraps img with figcaption
  • figcaption
  • footer - can be document or section, contain information about container element, can contain important links, copyright notice, terms of use, contact info
  • header - enhanced heading for document or section, can contain logo, byline, set of navigation link
  • hgroup - example title with subtitles
  • nav - a block of links on a page, page may have multiple nav
  • section use it only if other semantic elements do not apply, rule of thumb is that it should begin with a heading (h1, h2)

Enriching Texts

  • em - emphasis, italic
  • strong - bold, important
  • span
  • abbr - The <abbr title= "World Health Organization">WHO</abbr> was founded in 1948.
  • bro - override current text direction (ltr, left to right or rtl right to left
  • big - larger font than its environment
  • code - <code> print("hello world") </code>
  • del - text that has been deleted, ins - inserted to a document
  • dfn defines a definition term. `HTML is the standard markup for creating webpages
  • time - time related value. example: `

    my birthday is on 1969-09-07

  • kbd - keyboard input
  • mark - marked text, use to highlight part of text
  • pre preserves spaces and line breaks, fixed-width font
  • q - short quotation
  • samp sample output of a computer program
  • small smaller text uses a smaller font than its environment
  • sub subscripted text, sup superscripted text
  • var variable of a code
  • br - line break
  • wbr - specifies a position where it would be okay to add a line break, this feature is great when you have a long text that could be broken during rendering
<p>ThisIsAVeryLong<wbr/>TextWrittenAss<wbr/>OneWorld</p>
  • lists: ul, ol, li
  • <a href>I am a link</a>
  • img

tables

  • table, thead, tbody, tfoot, th, td, tr
  • colspan=2, rowspan=3 
<tr>
  <th headers="anotherHeader" scope="col">False</th>
</tr>
  • anotherHeader is semantically connected to the Fals
  • col the corresponding th tag are headers for a column
  • table captions
<table>
  <caption>
    Monthly Sales
    <br/>
    (March, 2013)
  </caption>
</table>

iframe

<iframe 
  width="640"
  src="https://www.youtube.com/embed/asdladj91qdns"
  frameborder="0"
  allowfullscreen>
</iframe>

Multimedia

<video width="450" height="360" controls autoplay>
  <source src="a_great_movie_video.mp4" type="video/mp4"
</video>

<audio controls>
  <source src="elearning_is_great.mp3" type="audio/mpeg">
</audio>
  • controls defines audio controls like volume, pause, play
  • source define various audio files and formats which the browsers may choose from
<video src="./Video/Carribean.mp4" constrols autoplay><video />
  • Other attributes: width, height
  • poster - allows specifying the image to be shown while the video is downloading or until the user hits the playbutton
  • mute you can tell the player that your video should be muted
  • loop start over again every time it's finished
  • video formats video/mp4, video/ogg, video/webm 
<video controls poster="Images/VideoPoster">
  <source src="Video/caribberan.webm" type="video/webm" />
</video>

<video controls 
  poster="Images/VideoPoster.png">
  <source src="Video/Caribean.webm" type="video/webm" />
  <source src="Video/Caribean.mp4 type="video/mp4" />
  Sorry, HTML5 video is not supported
</video>

<audio controls>
  <source="audio.mp3" type="audio/mpec" />
</audio> 
// mp3
// wav
// ogg vorbis

<video>
  <!-- source tags omitted -->
  <track src="subtitlesEn.vtt" kind="subtitles" srclang="en" label="english" />
  <track src="subtitlesHu.vtt" kind="subtitles" srclang="hu" label="hungarian" />
</video>
  • track is a text stream
  • kind is caption, chapters, description, metadata, subtitles
  • srclang is required when kind=subtitles
  • What it cannot do
    • cannot support audio or video capturing or recording
    • no copyright protection system
    • no adaptive streaming with different video resolution, buffering or live events

Forms

  • form encapsulates all controls

input element

  • button
  • checkbox
  • radio
  • submit
  • image as the submit button
  • reset

input element types

  • password
  • email
  • url
  • tel
  • search
  • number
  • file

date and time controls (relatively new)

  • date
  • datetime
  • date-time-local
  • month
  • time
  • week
  • color picker
  • range (range slider`

Others

  • select
  • textarea
  • fieldset - group related controls
  • legend - caption to fieldset
  • label - descriptive text for input controls for accessibility
  • button - same as input but you can create content that is not just simple text
<form action="#" method="post">
  <fieldset>
    <legend>Personal Data</legend>
    <p> Your personal data here >
    <label for="fname">First name:</label>
    <input id="fname" type="text" name="fname" />
    <label for="pwd">Password:</label>
    <input id="pwd" type="password" name="pwd" />
    <label for="gender">Gender</label>
    <select id="gender" name="gender">
      <option label="male" value="male" selected />
      <option label="female" value="female" />
      <option label="none of the above" value="none of the above" />
      <option label="prefer not to say" value="prefer not to day" />
    </select>      
  </fieldset>
  <fieldset>
    <legend>More information</legend>
    <p>What is your membership status</p>
    <label><input type="radio" name="membership" value="none"/>Not a member</label>
    <label><input type="radio" name="membership" value="silver"/>silver member</label>
    <label><input type="radio" name="membership" value="gold"/>gold member</label>
    <br/>
    <p>What is your privacy settings</p>
    <label><input type="checkbox" name="privacy-settings"/>is private</label>
  </fieldset>
  <input type="submit" value="register" />
  <!-- same as <button type="submit>register</button>  -->
</form>

Data list, you can bind it to the salutation textbox

    <datalist id="genderlist">
      <option value="male" selected />
      <option value="female" />
      <option  value="none of the above" />
      <option value="prefer not to day" />
    </datalist>  
    <input id="gender" type="text" list="genderlist" name="gender" autofocus />

hidden fields

  • when you send the form this will also be sent but the user will not see this

optgroup

<select id="car">
  <optgroup label="japanese cars">
    <option value="honda">Honda</option>
    <option value="toyota">Toyota</option>
  </optgroup>
  <optgroup label="german cars">
    <option value="audi">Audi</option>
    <option value="vw">Volkswagen</option>
  </optgroup>
</select>

Sliders

<form> 
  <label>
    Number of machines
    <input id="numberOfMatchines" type="range" min="1" max="8" value="2" step="" type="number" pattern="[A-Za-z]{3}-\d{3}"/>
  </label>
  <input type="reset" value="reset" />
  <input type="submit" value="increment" />
</form>
  • placeholders
  • title="Please specify the last name", required

definition list

definition lists

  • dl list of definitions
  • dt definition terms
  • dd definition descriptions (indented)
<dl>
  <dt> System.Byte </dt>
  <dd> 8-bit unsigned integer </dd>
</dl>

hr, q, blockquote

thematic breaks - hr quotes -

<q cite="https://magazin.com/article">Thousand ways of extension</q>
<blockquote cite="">
Longer paragraph
</a>

images and mapping

  • example color picker defined as a single image
<img src="myimage.png" usemap="#mymap" />
<map name="mymap">
  <area shape="rect" coords="10,10,54,86" title="iam a rectable" href="#what" alt="what"/>
  <area shape="circle" coords="102,34,28" />
  <area shape="poly" coords="84,16,21,38,114,38" /> <!--- coordinate of all corners -->
</map>
  • alt, href, hreflang, media, rel, target, type

Visualizing progress

used to represent the progress of a task, only has two attributes, max and value

<progress max="25" value="3" id="progress" />

inline frames

  • security considerations
  • you can add html displaytitle.html three times in one page for example

Custom attributes

  • you can add your own attributes on any html element data-product-cpu, you can get it via javascript example htmlNode.getAttribute('data-product-cpu')

Canvas

  • an element which is a place you can draw
  • leverages hardware acceleration
  • you can create overlapping layers on your page, fractional pixels

Tables

Ratings component

Clone this wiki locally