HTML #8

petrosh · 2015-09-24T14:35:24Z

Reload when anchor link: <a href="?reload=1#153">Reload</a> and change reload value.

New Doctype
The Figure Element
No More Types for Scripts and Links
Flexibility with “Quotation marks”
Content Editable
Mark Element
Audio Support
Video Support
Local Storage
[input] Email type
[input] Placeholders Attribute
[input] Required Attribute
[input] Autofocus Attribute
[input] Autofocus Attribute

The text was updated successfully, but these errors were encountered:

petrosh · 2016-12-22T16:49:26Z

Dialogs

Semantic HTML for confirmation, error and warnings messages

<figure id="dialog-box" class="warning">
    <figcaption>Message Title</figcaption>
    <p>Message text</p>
</figure>

petrosh · 2016-12-22T17:29:22Z

Script loading

Links

Deep dive into the murky waters of script loading

Use defer

HTML5 Mastery: Semantics, Standards, and Styling

Putting scripts at the end of the body (you can but) strip metadata from the head (where they belong) to the body.

<script src="script.js" defer></script>

petrosh · 2017-01-08T15:56:49Z

Input

Enter file path with forced extension

<input type='text' autocomplete='off' name='$id' pattern='(.*)(\.yml)$'>

Attributes ^MDN

min: The minimum (numeric or date-time) value
max: The maximum (numeric or date-time) value
step: Limit the increments at which a numeric or date-time value can be set
maxlength: Maximum number of characters (in UTF-16 code units)
minlength: Minimum number of characters (in Unicode code points)
required: User must fill in a value before submitting

form attribute

The id of a <form> element in the same document. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements.

<form id="form-id">
  ...
</form>
<input type="text" form="form-id">

Select

Default blank option

<option hidden disabled selected value></option>

optgroup

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

Dates

The date Type

<input type=date step=7 min=2014-09-08> - Monday only
<input type=time min=9:00 max=17:00 step=900> - 15m increments
<input type=week step=2 min=2014-W30> - odd week

Progress

<progress max="100" value="75">75/100</progress>

Meter

<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

Value	Render
75
60
30

petrosh · 2017-01-12T21:17:34Z

Meta tags

What Meta Tags Your Site Should be Using

<meta charset="utf-8">
<title>What Meta Tags Your Site Should be Using | Aaron Krauss</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimal-ui">
<meta name="description" content="Whenever you’re building a new site, you probably pay...">
 
<!-- Open Graph -->
<meta property="og:title" content="What Meta Tags Your Site Should be Using | Aaron Krauss">
<meta property="og:description" content="Whenever you’re building a new site, you probably pay...">
<meta property="og:image" content="https://thesocietea.org/wp-content/uploads/2016/12/what-meta-tags.jpg">
<meta property="og:url" content="https://thesocietea.org/2016/12/what-meta-tags-your-site-should-be-using/">
<meta property="og:type" content="website">
 
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@thecodeboss">
<meta name="twitter:creator" content="@thecodeboss">

Other example

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Coronavirus country comparator</title>

  <link rel="shortcut icon" href="favicon.ico">

  <link href="css/roboto.css" rel="stylesheet">
  <link href="css/vuetify.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <meta property="og:title" content="Coronavirus country comparator" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://boogheta.github.io/coronavirus-countries/" />
  <meta property="og:image" content="https://boogheta.github.io/coronavirus-countries/img/screenshotv2.png"/>
  <meta property="og:description" content="Compare the spread of the COVID-19 coronavirus in all countries by numbers of confirmed, recovered and deceased ones as reported by JHU CSSE and different countries"/>

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@boogheta">
  <meta name="twitter:creator" content="@boogheta">
  <meta name="twitter:title" content="Coronavirus country comparator">
  <meta name="twitter:description" content="Compare the spread of the COVID-19 coronavirus in all countries by numbers of confirmed, recovered and deceased ones as reported by JHU CSSE and different countries">
  <meta name="twitter:image" content="https://boogheta.github.io/coronavirus-countries/img/screenshotv2.png">
 </head>
 <body>
  <noscript><strong>Coronavirus country comparator requires JavaScript. Please enable it to continue.</strong></noscript>

petrosh · 2017-02-04T16:57:56Z

SVG

External link symbol

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M17 13.5v6H5v-12h6m3-3h6v6m0-6-9 9" class="icon_svg-stroke" stroke="#666" stroke-width="1.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

Grid

<img src="https://imgh.us/grid.svg" width="641" height="161"/>

Illustrator

SVG FLAGS

domtool/svg flags

petrosh · 2017-02-08T09:43:09Z

Characters encode

hyphen -

minus − −

A very close approximation of hyphen but set a little lower and shorter than a true hyphen.

en dash – –

The en dash is a slightly longer dash used to denote ranges or relations.

em dash — —

The em dash is usually one em wide and usually represents a change in thought.

hair space  

This—dash—is normal.
This — dash — is hairspaced.
This —dash— is spaced.

— em-dash
– en-dash
‒ figure dash (using en-dash is mostly acceptabe).
‑ non-breaking hyphen
&emsp; one em of space
&ensp; one en of space
  the much-misused nonbreaking space (use an en space for &nbsp ktksbai)
  thin space (0.2-0.25em)

petrosh · 2017-06-26T13:06:01Z

Redirect

I decided to disable AMP on my site

<head>
    <noscript>
        <meta http-equiv="refresh" 
            content="0;URL=https://www.alexkras.com/simple-guide-to-finding-a-javascript-memory-leak-in-node-
            js/amp/" 
        />
    </noscript>
    <title>https://www.alexkras.com/simple-guide-to-finding-a-javascript-memory-leak-in-node-js/amp/</title>
</head>
<script>
    window.opener = null;
    location
    .replace(`https:\/\/www.alexkras.com\/
        simple-guide-to-finding-a-javascript-memory-leak-in-node-js\/amp\/`)
</script>

petrosh · 2017-09-04T09:16:56Z

Responsible Social Share Links

https://jonsuh.com/blog/social-share-links/

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fjonsuh.com%2F"
   target="_blank">Share on Facebook</a>

petrosh · 2017-10-10T17:53:32Z

Code

Make <pre> Text Wrap.

pre {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

petrosh · 2018-04-09T14:11:38Z

Images

Alternate image onerror

<img src='url.jpg' onerror='this.onerror=null;this.src="other-url.png";'>

trasparente · 2020-02-27T17:07:00Z

Sometimes is better:

<input type="text" inputmode="numeric" pattern="[0-9]*">

instead of:

<input type="number">

https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

petrosh added the Sass label Sep 24, 2015

petrosh changed the title ~~SASS mixins~~ SASS – Mixins Sep 29, 2015

petrosh changed the title ~~SASS – Mixins~~ HTML Dec 22, 2016

petrosh added HTML and removed Sass labels Dec 22, 2016

joelmarquez90 mentioned this issue Oct 18, 2017

Waiting for iTunes Connect to finish processing the new build throws an error fastlane/fastlane#10635

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HTML #8

HTML #8

petrosh commented Sep 24, 2015 •

edited

Loading

petrosh commented Dec 22, 2016 •

edited

Loading

petrosh commented Dec 22, 2016 •

edited

Loading

petrosh commented Jan 8, 2017 •

edited by trasparente

Loading

petrosh commented Jan 12, 2017 •

edited by trasparente

Loading

petrosh commented Feb 4, 2017 •

edited by trasparente

Loading

petrosh commented Feb 8, 2017 •

edited

Loading

petrosh commented Jun 26, 2017 •

edited

Loading

petrosh commented Sep 4, 2017

petrosh commented Oct 10, 2017

petrosh commented Apr 9, 2018

trasparente commented Feb 27, 2020

HTML #8

HTML #8

Comments

petrosh commented Sep 24, 2015 • edited Loading

petrosh commented Dec 22, 2016 • edited Loading

Dialogs

petrosh commented Dec 22, 2016 • edited Loading

Script loading

petrosh commented Jan 8, 2017 • edited by trasparente Loading

Input

Attributes MDN

Select

petrosh commented Jan 12, 2017 • edited by trasparente Loading

Meta tags

petrosh commented Feb 4, 2017 • edited by trasparente Loading

SVG

petrosh commented Feb 8, 2017 • edited Loading

Characters encode

petrosh commented Jun 26, 2017 • edited Loading

Redirect

petrosh commented Sep 4, 2017

Responsible Social Share Links

petrosh commented Oct 10, 2017

Code

petrosh commented Apr 9, 2018

Images

trasparente commented Feb 27, 2020

petrosh commented Sep 24, 2015 •

edited

Loading

petrosh commented Dec 22, 2016 •

edited

Loading

petrosh commented Dec 22, 2016 •

edited

Loading

petrosh commented Jan 8, 2017 •

edited by trasparente

Loading

Attributes ^MDN

petrosh commented Jan 12, 2017 •

edited by trasparente

Loading

petrosh commented Feb 4, 2017 •

edited by trasparente

Loading

petrosh commented Feb 8, 2017 •

edited

Loading

petrosh commented Jun 26, 2017 •

edited

Loading