Skip to main content

Home/ HTML5 development/ Group items tagged titles

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

The hgroup element | HTML5 Doctor - 0 views

html5doctor.com/the-hgroup-element

headings HTML5 header html document outline hgroup markup semantic semanticweb

shared by Vernon Fowler on 18 Feb 13 - No Cached
  • An article with a title and metadata
  • An article with a title and subtitle
  • An article with a title, subtitle and metadata
  • ...4 more annotations...
  • If you have a title with subtitle(s) or tag lines (i.e., more than one consecutive <h1>–<h6>), group them in an <hgroup>.
  • If you have a title with subtitle(s) and other metadata associated with the section or article, place both the <hgroup> and the metadata within a single <header> element.
  • When grouping headings in an <hgroup> element, the outline algorithm will mask the lowest level all but the highest level heading in the group from the resulting document outline.
  • It can only contain a group of <h1>–<h6> element(s), and it should be used for subtitles, alternative titles, and tag lines.
Vernon Fowler

How to mark up subheadings, subtitles, alternative titles and taglines | HTML5 Doctor - 0 views

html5doctor.com/howto-subheadings

subtitles titles alternative html html5 markup

shared by Vernon Fowler on 05 May 13 - No Cached
  • Vernon Fowler on 05 May 13
     
    If you don't already know, the hgroup element is obsolete in HTML5. Advice is now provided in the HTML spec on how to mark up subheadings, subtitles, alternative titles and taglines using existing and implemented HTML features.
Vernon Fowler

: The Input (Form Input) element - HTML | MDN - 0 views

developer.mozilla.org/...input

HTML5 form input attributes

shared by Vernon Fowler on 06 Mar 18 - No Cached
  • A single-line text field for entering search strings.
    • Vernon Fowler
      Vernon Fowler on 06 Mar 18
       
      On mobile devices with on-screen keyboards, the search input type sets the submit button text to "Search". On desktop devices, this should also enable submitting the form by pressing the Enter key?
  • Possible values are: off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry. on: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however on does not provide any further information about what kind of data the user might be expected to enter. name: Full name. honorific-prefix: Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle"). given-name: First name. additional-name: Middle name. family-name: Last name.
  • inputmode
    • Vernon Fowler
      Vernon Fowler on 06 Mar 18
       
      Currently not supported in any browser. https://caniuse.com/#feat=input-inputmode
  • ...4 more annotations...
  • This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored.
  • minlength HTML5 If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter.
  • maxlength If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter.
  • autocorrect A Safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field. Permitted values are: on Enable automatic correction of typos, as well as processing of text substitutions if any are configured.
Vernon Fowler

Microdata - Dive Into HTML5 - 0 views

diveintohtml5.info/extensibility.html

HTML5 microdata

shared by Vernon Fowler on 27 Oct 12 - No Cached
  • a third option developed using lessons learned from microformats and RDFa, and designed to be integrated into HTML5 itself: microdata.
  • “Adding microdata” to your page is a matter of adding a few attributes to the HTML elements you already have.
  • So where is the real information? It’s in the <dd> element, so that’s where we need to put the itemprop attribute. Which property is it? It’s the name property. Where is the property value? It’s the text within the <dd> element. Does that need to be marked up? the HTML5 microdata data model says no, <dd> elements have no special processing, so the property value is just the text within the element.
  • ...7 more annotations...
  • This technique is also useful for microdata. There are two distinct pieces of information here: a title and an affiliation. If you wrap each piece in a dummy <span> element, you can declare that each <span> is a separate microdata property.
  • There are two major classes of applications that consume HTML, and by extension, HTML5 microdata: Web browsers Search engines
  • Google supports microdata as part of their Rich Snippets program.
  • a handy tool to see how Google “sees” your microdata properties
  • Just like associating a URL with a Person, you can associate a URL with an Organization. This could be the company’s home page, a contact page, product page, or anything else. If it’s a URL about, from, or belonging to the Organization, mark it up with an itemprop="url" attribute.
  • To handle edge cases like this, HTML5 provides a way to annotate invisible data. This technique should only be used as a last resort. If there is a way to display or render the data you care about, you should do so. Invisible data that only machines can read tends to “go stale” quickly. That is, someone will come along later and update the visible text but forget to update the invisible data. This happens more often than you think, and it will happen to you too.
  • itemscope says that this element is the enclosing element for a microdata item with its own vocabulary (given in the itemtype attribute). All the properties within this element are properties of http://data-vocabulary.org/Geo, not the surrounding http://data-vocabulary.org/Organization.
1 - 4 of 4
Showing 20▼ items per page