ADVANCED HTML 6
HypertextMarkup Language (HTML) is a standardized systemused for creating text tags that are used to achieve various color,graphic, text and hyperlinks effects on web pages. The markupcreates basicinstructions on how to display text and images on a browser.According to Turner & Brackbill,(2011) HTML is not a programming language but a markup languagebecause it cannot execute functions, make decisions, process data.The language is imperativeas it lays the basic structure for web design and website developmentthrough the use of tags, attributes,and entities which are useful in the process of developinga website.
Inthis study of the HTML language, I mainly used the W3schools tutorialsiteto gain skills on creating my basic website using HTML5. The siteprovides a variety of tutorials from the introduction of advancedHTML forms, entities, symbols, layout, charset, input types andattributes to advanced HTML5 elements, semantics,and migration. The tutorials weremainly focusedon training the website subscribers on hands-onskill activities through their online editor that allows users tolearn and edit code examples provided. Due to its flexibility andattractive Graphic UserInterface (GUI) the editorprovided the best learning experience when coding.
It’sworth noting that HTML uses a markup to define the structure of webpages. HTML elements are the “building blocks” of different HTMLpages that we interact with on a daily basis. Tagsnormally represent the HTML elements.The HTML tags are used to label pieces of web page content such assubheadings, headings, paragraphs, tables, forms and so on. Also,the browsers we use either on our phones or computers do not displayHTML tagsbut use the tags to display content to the users. However, they canbeviewedon the source of the web page.
AnHTML5 document isdeclaredon top of an HTMLcode using <!DOCTYPEhtml> tag element. The <html> tagelement is “the root” element of any HTML page. The<head> elementtag mainly contains metarelated information of the webpageyou are designing. The <title> allowsa person to specify a title for the document they are uploading.The <body> elementcarries the main part or content visible on the web page. </html>marks the end of a web page document. The heading and paragraph of adocument are represented by <h1> and <p> respectively.Tags in HTMLare elements surrounded by opening and closing ‘angle brackets’.
Thecharacter encoding commonly referred to as ‘charset’ is normallydeclared on an html5 coded as “<meta charset="UTF-8">”.Themost interesting part of coding with html5 is that it comes with newelements which were not there in html. The semantinc elements include<header><article><section>and <footer>. New form attributes include date, number, time,range and calendar. <canvas> and <svg> are the newgraphic elements in html5. In addition to these elements, html5introduced the use of multimedia as characterized by <audio>and <video> multimedia elements.
Inaddition to the useof different elements in html5, there aresemantics that arevery useful to both browser and the developer. Semantic itemssuch as <div> and <span> gives no information to theuser. However, semantics such <form> <article> and<table> clearly defines the content in html5 document. It’salso interesting that all these elements are all supported in modernbrowsers.
AdvancedHTML allows for migration of formely elements used in HTML4 to HTML5without destroying original content in HTML4. For example <divid=”header”>element has been migrated to <header> inHTML5. With advanced HTML it’s possible to add a map on a web pageby specifying your div Id to “map” <div id="map">themap is displayed here</div>.Functions can also be added to display a map on a specific location.
Lastlybut not least, with advanced HTML itspossible now to add a YouTube video to your webpagetoa location of your choice. Itis doneby defining an <iframe> element on your webpagecode link the source of your video to the YouTube video URL andfinally using the width and height attributes to define the space tobe occupied by the video. It’s equally important to note the id ofthe video you intend to play.
Insummary,advanceHTML has come with important features characterized by new elementsthat allow the creationof web pages with ease and improved functionality. Below I listscreenshots of sample codes to illustrate these features.
Anexample of HTMLfile:
Howthe data is displayed in the browser:
Turner,T. P., & Brackbill, L. (2011). Risingto the top: evaluating the use of the HTML meta tag to improveretrieval of World Wide Web documents through Internet searchengines. Libraryresources & technical services, 42(4),258-271.