What is New in Tech World: 1 - HTML5 Features Explained With Examples

What is HTML?

HTML stands for HyperText Markup Language. It is a markup language for structuring and presenting content in a web browser for the World Wide Web, and is a core technology of the Internet. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

HTML documents are read in a web browser (Chrome, Firefox, Microsoft Edge etc.) which is responsible to organize these documents into visible or audible web pages. The browser uses the HTML tags to interpret the content of the page. Web browsers can also refer to Cascading Style Sheets (CSS) to define the appearance and layout of text and other material.

HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a resource to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behavior of HTML web pages.

HTML5 is the fifth revision of the HTML standard and is focused in this book. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices. HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.

HTML5 is an attempt to define a single markup language. It includes detailed processing models to encourage more interoperable implementations and introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons, HTML5 is also a potential candidate for cross- platform mobile applications.

Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. In particular, HTML5 adds many new syntactical features. These include <video>, <audio> and <canvas> elements, as well as the integration of scalable vector graphics (SVG) content that replaces the uses of generic <object> tags and MathML for mathematical formulas. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs. Other new elements, such as <section>, <article>, <header>, <footer> and <nav>, are designed to enrich the semantic content of documents.

New attributes have been introduced for the same purpose, while some elements and attributes have been removed. Some elements, such as <a>, <cite> and <menu> have been changed, redefined or standardized. The APIs and document object model (DOM) are no longer afterthoughts, but are fundamental parts of the HTML5 specification. HTML5 also defines in some detail the required processing for invalid documents so that syntax errors will be treated uniformly by all conforming browsers and other user agents.

DOCTYPE DECLARATION

Each web page begins with a DOCTYPE declaration which informs the browser about the HTML version the page is using. Although this declaration is not mandatory, it helps browsers to correctly render a page. Due to various flavors of HTML, this declaration also varies as shown in the following table.

Your First HTML Web Page

Open Notepad or any other text editor and type the following code:

Save the file as MyWebPage.html on your desktop or any other location you prefer. The icon of the saved file would change to the icon of your default browser. Double click the file to see your first web page in the browser as shown in the following figure.

Let’s go through the details of the above code.

Elements in HTML

Elements define an HTML document. Elements are usually made up of two tags: an opening tag (start tag) and a closing tag (end tag). Some HTML elements, such as <br>, are called empty elements. These elements are without a closing tag and are closed in the start tag. The first line in this example <!DOCTYPE html> defines the document type and is a declaration for the latest HTML5 generation. The text between <html> and </html> describes the web page. The <body></body> tags hold the visible page content. Only the content you provide in the <body> section is rendered in a browser, as illustrated in the previous output. Page heading is enclosed in the <h1></h1> tags whereas a paragraph is displayed within the <p></p> tags.

The following elements can go inside an HTML file:

The <html> element: It defines the whole HTML document. It has a start tag <html> and an end tag </html>. Each HTML element contains some content that sits between its opening and closing tags and tells the browser something about the information. This one contains two other HTML elements - <head> and <body>.

The <head> element: The <head> element is a container for all the head elements. The <head> element must include a title for the document, and can include scripts, styles, meta information, and more.

<title> It defines a title (see A in Figure 2-1) for your HTML document and is a required element in the head section. When defined, the page title is shown in the browser’s title bar and displayed in search engine results.

<style> It specifies how HTML elements will be rendered in a browser. The required type attribute defines the content of the <style> element. The only possible value is "text/css".

<link> Links to an external style sheet.

<script> It is used to define a client-side script, such as a JavaScript. The <script> element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

The <body> element: This element defines the body of the HTML document. It starts with the tag <body> and ends with </body>. In the current example, it is holding two other HTML elements – a heading <h1> element and a paragraph <p> element.

The <h1> element: You can use <h1> to <h6> tags to define HTML headings where <h1> is the most important heading and <h6> is the least one. Its content in the above example is: Grow your Business with us (B Figure 2-1).

The <p> element: Paragraphs in an HTML document are defined using the <p> element which has a start tag <p> and an end tag </p>. The element’s content in the above example is: This is a paragraph. Here you write your content (C Figure 2-1).

Usage Recommendations

Keep the following recommendations in mind while using elements in HTML documents:

Always put the end tags to avoid unexpected results and/or errors.
Although HTML tags are not case sensitive, it is recommended to use lowercase.

Learn the HTML5 language in this tutorial series. These tutorials are designed for new programmers to provide them thorough knowledge of full stack web development.

Watch Full Playlist Here

Watch Complete One Video Here