{"id":732,"date":"2010-07-06T19:03:18","date_gmt":"2010-07-06T19:03:18","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=732"},"modified":"2023-09-19T11:27:30","modified_gmt":"2023-09-19T17:27:30","slug":"html5-introduction","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=html5-introduction","title":{"rendered":"HTML Introduction"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">HTML 5 is the current version of HTML, which stands for Hyper Text Markup Language. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML is one of three important web development languages you will encounter on the web:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML (<strong>H<\/strong>yper <strong>T<\/strong>ext <strong>M<\/strong>arkup <strong>L<\/strong>anguage)<\/li>\n\n\n\n<li>CSS (<strong>C<\/strong>ascading <strong>S<\/strong>tyle <strong>S<\/strong>heets)<\/li>\n\n\n\n<li>JS (<strong>J<\/strong>ava<strong>S<\/strong>cript)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">All m-Power applications utilize HTML files, which can be edited from the m-Painter editor. While knowing HTML is not required to customize your applications&#8217; look and feel, having basic HTML knowledge will allow you to perform more advanced customizations to your application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML in short is the content you see on a web page. Content includes headings, paragraphs, hyperlinks, images, forms, inputs, and much more. It is responsible for defining the meaning of structure of a web page. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of a very short HTML page. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;title&gt;My Page&lt;\/title&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h1&gt;My First Heading&lt;\/h1&gt;\n&lt;p&gt;My first paragraph.&lt;\/p&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">All HTML elements are indicated by tags, which start and end with a &lt; and &gt; symbol. For instance, a paragraph in HTML is indicated by the <code>&lt;p&gt;...&lt;\/p&gt;<\/code>  tags. The text in the paragraph to display goes in between the tags:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;My first paragraph.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s a full example that I have included from CodePen which shows raw HTML code and the browser output:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-theme-id=\"dark\" data-default-tab=\"html,result\" data-slug-hash=\"qBLXdgv\" data-user=\"Matthew-Espindola\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Matthew-Espindola\/pen\/qBLXdgv\">\n  Untitled<\/a> by Matthew Espindola (<a href=\"https:\/\/codepen.io\/Matthew-Espindola\">@Matthew-Espindola<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script type=\"text\/javascript\" async src=\"\/techblog\/mrc-files\/matt.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Benefits<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you work with web development at all, you should learn HTML.  A basic understanding will allow you to harness more advanced capabilities for your webpages, as well as speed up your development time by leaps and bounds. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are some more advanced HTML 5 features to at least be aware of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Offline Storage<\/strong>\u00a0\u2013 HTML5 lets developers create web pages that can be cached by the browser for offline access.<\/li>\n\n\n\n<li><strong>Audio and video playback<\/strong> &#8211; HTML 5 allows developers to embed audio and video without the need of additional plugins, such as Flash.<\/li>\n\n\n\n<li><strong>New Markup<\/strong>\u00a0\u2013 HTML5 adds new markup tags to provide a meaningful alternative to <code>&lt;div><\/code> tags and make your code easier to navigate. Such tags include <code>&lt;header><\/code>, <code>&lt;footer><\/code>, <code>&lt;article><\/code>, and <code>&lt;section><\/code>.<\/li>\n\n\n\n<li><strong>Geolocation<\/strong>\u00a0\u2013 Makes location available to any HTML5 compatible browser. HTML5 can find a user\u2019s location and use it to tailor things like search results.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Resources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To learn more about HTML and see additional examples, the <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/en-US\/\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/\" target=\"_blank\">Mozilla MDN Web docs<\/a> are a great resource for getting started. For HTML basics specifically, see <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML 5 is the current version of HTML, which stands for Hyper Text Markup Language. HTML is one of three important web development languages you will encounter on the web: All m-Power applications utilize HTML files, which can be edited from the m-Painter editor. While knowing HTML is not required&#8230;<\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[],"ht-kb-tag":[],"class_list":["post-732","ht_kb","type-ht_kb","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=732"}],"version-history":[{"count":19,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/732\/revisions"}],"predecessor-version":[{"id":12159,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/732\/revisions\/12159"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=732"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=732"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}