citation - HTML5 Basic Page Structure

• Beyond simple structure lies the richness of a good Semantic;

• Semantic means to give your web page content an extra meaning which is very beneficial;

• Some benefits of Semantics include:

• The Semantic Web is a collaborative movement led by international standards body the World Wide Web Consortium (W3C) which promotes common data formats on the World Wide Web.


• By encouraging the inclusion of semantic content in web pages, the Semantic Web aims at converting the current web, dominated by unstructured and semi-structured documents into a "web of data". 


• The Semantic Web stack builds on the W3C's Resource Description Framework (RDF).

citation - Wikipedia: Semantic Web

citation - Wikipedia: RDF

citation - Wikipedia: RDF

Microformats:

• Created by Grassroots Coalition of Developers
• Add extra meaning to content through standardized markup patterns using existing HTML attributes
• Example:
  

  <div class="vcard">
    <p><a href="https://www.facebook.com/piyushagarwal11" class="url fn">Piyush Agarwal</a>
    is a student at <a href="http://uncg.edu" class="url org">UNCG</a>.</p>
  </div>

• A crawler which recognizes the hcard pattern will see the vcard class and know that the content inside is the information for the person it is looking for. First link contains the full name(fn) of the contact and the second link contains the organization(org) the contact is related to 
  

Resource Description Format in Attributes (RDFa):

Microdata:

• It has a companion DOM API which proves useful for extracting the data from the page


• getItems() is the key method which returns a NodeList containing all  items on the page 

 var list = document.getItems();

choosing a single item and getting its property value

 var itemVal = list[0].properties['name'][0].itemValue;

NOTE: As there were still many issues with this API, Google has removed it from Chrome

• One can use any of the three Semantic types, which he/she is comfortable with, but my preference is Microdata.
  

• The reason for this preference is that it is widely accepted on Web so one can get the web page content easily noticed and promoted by search engines.

• In 2011 four big Web Giants - Google, Microsoft, Yahoo! and Yandex - launched a new Website, Schema.org, which introduced a set of shared vocabularies for marking up common patterns using microdata.

• Acts  as key-value pairs as in Databases


• There is a key attached to a value displayed on the page. 

 <p data-id="123">DevTalks</p>

• Simple DOM API that uses the dataset  property

 var temp = document.querySelector('p');
 console.log('The ID is ', temp.dataset['id']);
 temp.dataset['id'] = 100;
 console.log('New ID is ', temp.dataset['id']);

Use of Data-Attributes:

1. Some companies like Twitter, Facebook, Google+, etc. have already started using data attributes extensively
2. Twitter adopted them quickly, allowing them to be used for adding tweet button on webpages

<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://uncg.edu" data-via="piyushag88">Tweet</a>

By calling to Twitter's JavaScript somewhere else in the page, this element is replaced by a Tweet Button

• The websites should be Adaptive and Responsive
• We can make our websites both adaptive and responsive using the media queries provided in CSS
• Table based websites are now an old practice with the rapid development in CSS
• Media Query is a logical statement: if the logic is True, the specified style rules are applied; if the logic is False, these rules are skipped
• The most common use of this is the use of device dimensions or the viewport

Syntax:

1. <link rel="stylesheet" href="test.css" media="screen and (query)">
   

   This specifies that the media type should be a screen (not a printer) and if the query is true then apply the style-sheet test.css

2.  @media screen and (query) {...}

   This specifies the inline method of using media queries in a CSS file

3. @import url('test.css') screen and (query);

   This is used when we need to import one CSS into another CSS file, based on the query

• Different type of dimensions:
  1. Device - The dimensions of the device being used, i.e., the monitor, smartphone, TV, etc.
  2. Viewport - The dimensions of the area in which the website is being displayed, i.e., browser window size, app window, etc.

  
  

• Which one of the two is important? 

• To ease out the task of coding, there are some predefined CSS frameworks available


• The best of them is Bootstrap


• Bootstrap provides some predefined templates and ways in which we can make our websites more device responsive and adaptive

• A well-structured web page makes it easy to maintain it
  
• Semantics provide better meaning to the webpage
  
• We can use RDF, Microformat, RDFa and Microdata for providing Semantic to our web-content. Data-Attributes can be used to help the developers in getting hidden-values in scripts
  
• CSS can help make our websites Adaptive and Responsive
• Media Queries is one of the best feature provided in CSS to apply rules based on some queries
• We can use the modern CSS frameworks like Bootstrap for making websites adaptive and responsive, EASY