<span>
    <a style="cursor: pointer" onclick="SP.UI.ModalDialog.showModalDialog({url:'../_layouts/userdisp.aspx?ID={{ personInfo.ID || personInfo.Author.ID || personInfo.User.ID }}'});">
        {{ personInfo.Name || personInfo.Author.Name || personInfo.User.Name }}
    </a>
</span>    

<h1>{{title}}</h1>
<div>
    {{content}}
</div>

{
    "title": "Example",
    "content": "Here is some example content"
}

<h1>Example</h1>
<div>
    Here is some example content
</div>

• HTML that describes the content
• Use of HTML to reinforce the meaning
  
  
• Semantic tags
• h1, form, table, img
• Non-Semantic tags
• div, span

 <button>Go!</button>

 <div class="button">Go!</div>

 <div class="link" data-link-to="/about">About</div>

 <a href="/about">About</a>

• Screen readers work better
• Search engines can understand better
• Easier as a dev to understand
• Encourages better separation of concerns

• Nothing new, boagworld has an article from 2005
• HTML 5 just introduces additional tags
• header, nav, section, article, aside, figure, figcaption, footer, details, summary, mark, time
• Know when to use them

<a style="cursor: pointer" onclick="SP.UI.ModalDialog.showModalDialog({url:'../_layouts/userdisp.aspx?ID={{ personInfo.ID || personInfo.Author.ID || personInfo.User.ID }}'});">
        {{ personInfo.Name || personInfo.Author.Name || personInfo.User.Name }}
</a>

• Both span and anchor's are inline elements
• span provides no value in this scenario

• What is that style doing there?
• Well, lets partially fix now

<a onclick="SP.UI.ModalDialog.showModalDialog({url:'../_layouts/userdisp.aspx?ID={{ personInfo.ID || personInfo.Author.ID || personInfo.User.ID }}'});">
        {{ personInfo.Name || personInfo.Author.Name || personInfo.User.Name }}
</a>

• Allow web developers to define new HTML elements
  
• Allows more semantic markup
• Allows bundling of Javascript with an element

        <x-gas-products>
        </x-gas-products>
    

• Part of the HTML5 spec
• wait for Microsoft to adopt (NOT part of IE11)
• Chrome and Firefox support
• Use a library or framework
• Ember-Components
• Angular Directives
• Polymer

• There is really nothing to do here
• Already using an Angular Directive
• We have been looking at the "internal" markup all along

<div data-person data-person-info="item.Author" />

• Non-semantic div
• Data prefixing
• Self Closing

 <div data-person data-person-info="item.Author" />

onclick="SP.UI.ModalDialog.showModalDialog({url:'../_layouts/userdisp.aspx?ID={{ personInfo.ID || personInfo.Author.ID || personInfo.User.ID }}'});"

<a ng-click="showUserInfoSPModal()">{{ personObject.Name }}</a>

onclick="SP.UI.ModalDialog.showModalDialog({url:'../_layouts/userdisp.aspx?ID={{ personInfo.ID || personInfo.Author.ID || personInfo.User.ID }}'});"

ng-click="showUserInfoSPModal()"

// personObject is passed into the controller
...
var userDisplayUrl = '/_layouts/userdisp.aspx?ID=' + personObject.ID;
showUserInfoSPModal = function() {
    SP.UI.ModalDialog.showModalDialog({url: userDisplayUrl});
};
...

• Proper separation of code
• Remove complexity
• Added readability

 var id = personInfo.ID || personInfo.Author.ID || personInfo.User.ID;

var id = personObject.ID;

• Angular Directive
• Org Chart
• Wrap Content
• Ember Component
• Google Map
• Wrap Content