What is Elements in HTML5? HTML Elements in HTML5: Elements in HTML are individual components of a web document. It is a collection of the start tag, its attributes, the closing tag and the content that is held in between. In some cases, elements contain attributes that define additional formatting properties of the content that is displayed through it. Below is an example of an element that defines the attributes of a paragraph. <p class=”foo”> This is a paragraph. </p> Notice the start tag, the end tag, and the section that defines the elements formatting properties. There are some elements…
Author: Terry White
Terry White
Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him
How to use HTML entities Character entities allow users to include characters that cannot be entered using a keyboard or those that are reserved in the HTML language. The table below shows commonly used entities and the characters they represent. Result Description Entity Name Numerical reference non-breaking space   < less than < < > greater than > > & ampersand & & ” quotation mark " " ‘ apostrophe ' ' ? cent ¢ ¢ ? pound £ £ ? yen ¥ ¥ ? euro € € ? copyright © © ? registered trademark ® ® ? trademark…
How to create form in HTML: HTML forms are essential for collecting data from user input. These data could be anything from contact information or a user?s log in details for a website. Apart from textboxes which are a common feature in most forms, HTML5 provides several other special elements that enhance the functionality of a form. These include input boxes, radio-buttons, checkboxes, submit buttons and many more. A good form should be self-explanatory so that users can easily to input necessary details and submit them to the web server for processing. Below are a few key elements that are…
How to define Head in HTML? Head elements are containers for elements that define a page’s style, metadata, and references to external resources like the Cascading Style Sheet (CSS) files with additional styling properties that you might want to apply to your web pages. Some of the tags that a developer might want to include in the head section of his document are <tittle>, <base>, <style>, <link>, <meta>, <script>, and <nonscript>. Tittle Element: Defines the title of a document. It is a mandatory requirement for all HTML documents. Some of its uses include displaying a title in a browser’s title…
How to define heading in html? HTML defines six levels of headings. A heading element implies all the font changes, paragraph breaks before and after, and any white space necessary to render the heading. The heading elements are H1, H2, H3, H4, H5, and H6 with H1 being the highest (or most important) level and H6 the least. Headings in a HTML document help the developer to outlay its structure. There are six levels of HTML tags that begin with <h1> to <h6>. H1 Headings are of greater importance than level two headings and the rest that come after it.…
How to Display a Web Page inside HTML iFrame HTML Iframes An Iframe comes in handy when a developer needs to display a webpage in another webpage. The syntax for an Iframe is: <iframe src=”URL”> alternative content for browsers which do not support iframe. </iframe> The size of an Iframe can be reset in the same way as an image. Use the width and height attributes to customize the size of an Iframe ? note that dimensions are measured in pixels by default. The frameboarder attribute tells the browser whether or not to include a boarder around an iFrame. If…
Learn how to insert images in HTML?: Images improve the aesthetic appeal of a webpage while illustrating the concepts in its textual content. Use the <img> element to include new images in your document. This is a void element that only contains attributes. Here is its syntax <img src = ?url? alt= ?text? > Definitions of code attributes Note that src stands for source. This attribute tells the browser where it will find the image that you intend to display. The alt attribute is an alternative value that is displayed if a browser cannot display the image you selected correctly.…
How to make HTML Website Layout? A well-structured website layout improves its user-friendliness by making it easy for visitors to read and navigate through its content. The majority of developers use columns and rows to structure their websites in a way that is similar to newspapers and magazines. <table>, <div>, and <span> are some of the elements that are used to structure the layout of websites. There are three major ways of dividing a webpage into columns and rows. Each one of them will be reviewed separately. Website layout using tables This is perhaps, the simplest way of creating a…
How to Add a Link HTML? A link connects one web resource with another. For instance, a user might want to view a video that is on a different webpage from the one that he is currently viewing? if a link to it is available on his current page, he can use it to connect directly without copying and pasting the video URL on his address bar. A link’s major properties are two anchors and their direction. The source anchor is represented by the webpage from which a link originates. It points to the destination anchor or the webpage where…
How to add ordered list in html? There are three types of lists in HTML namely? unordered lists, ordered lists, and description lists. A description list has a different structure compared to its counterparts. Unordered and ordered lists are similar only that the in the former, data is presented randomly in a disorganized way. HTML5 Elements Unordered, ordered, and Description Lists An unordered list is initiated using the <ul> tag, where each item is enclosed by the tags in the <li> element. Ordered lists are created in the same way as unordered lists although they are initiated using the <ol>…
How to insert Meta Element in HTML5? The <meta> element is one of those that are included in the head section of a document. It is a container for holding semantic information about a document and could include such details as a document’s author, date of modification, a short description, and its keywords. Use the name attribute to assign property names and the content attribute for their corresponding values. Note that the content attribute is not a container for HTML 5 tags. Additionally, metadata is not displayed on a webpage although search engines will read it and use it to…
What are the new HTML5 Input Types? The newest version of the HTML language comes with new input types like date, color, time, and range that aim at improving the user experience by making the forms on a webpage more interactive. To avoid conflict, browsers that do not recognize these new input types will regard them as normal text boxes. Below are a few commonly used input types and their definitions. HTML5 Elements Input type color: Allows a user to select a color from a drop-down menu and returns its hexadecimal value. <form> <label> Select Color: <input type=”color” name=”mycolor”> </label>…
HTML Paragraph In HTML, paragraphs are defined using the <p> tag. This is perhaps the most basic tag and the first one you will need to publish while creating a new web document. Here is an example of a paragraph tag. <p> This is a paragraph. </p> The built in style sheets of a browser will automatically create spaces between paragraphs although these default settings can be overridden using cascading sheet styles. Note that even if you forgot the closing tag of a paragraph tag, most browsers will display the code correctly. However, it is recommendable for developers to include…
How to add Script in HTML? Javascript is used by web developers to make web pages interactive and to enhance their functionality. The <script> tag which should be included in the head section of a document enables you to include javascript code in your document. You can also write the javascript code on a separate document and then call it using the src attribute. This method is efficient in situations where you intend to use the same script for several documents on your website. Just like attaching external CSS files, this method save you time that you would otherwise have…
In this article, you learn how to add stylesheet in HTML. In HTML, style refers to how documents are presented on a web browser. The language has limited features for styling documents because it was originally created for presenting textual information. Cascading Style Sheets (CSS), which was introduced by the W3C in 1996, offers better methods and features for enhancing web pages. Using CSS, developers can easily specify the color of text and page background, the style and size of fonts, change the amount of space between elements, and add outlines or borders. Style information of a webpage can either…
Learn how to addd SVG image in HTML: Scalable Vector Graphics (SVG) is an XML-based image format that is used to display 2D vector graphics on webpages. The major benefit of using this image format while displaying images on the web is that images created using it can be scaled up or down without distorting their quality because they are composed using vector shapes instead of pixels. Additional benefits of SVG images include:- An ability to be searched and indexed by search engines. They can contain hyperlinks to other documents Users can print them in high quality at any resolution.…
How to make Table in HTML – To insert a table into your HTML document, use the <table> element. The <tr> tag divides a table into rows which are further divided into data cells using the <td> tag. <tr> is an abbreviation for table row while td stands for table data. Below is an example of html code that displays a table with headers and a few records. <table border=”1″> <thead> <tr> <th>No.</th> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Carter</td> <td>johncarter@mail.com</td> </tr> <tr> <td>2</td> <td>Peter Parker</td> <td>peterparker@mail.com</td> </tr> <tr> <td>3</td> <td>John Rambo</td> <td>johnrambo@mail.com</td> </tr> </tbody> </table> What is…
HTML Text Formatting Text formatting tags in html are used to enhance the appearance of text in a web document. Below is a table that shows common formatting tags and definitions of how they are applied. Tag Description <b> Bolds text <del> Shows deleted text <em> Emphasized text <i> Italic text <ins> Inserted Text <mark> Highlighted Text <small> Small text <strong> Strongly emphasized text <sub> Subscripted text <sup> Superscripted text <abbr> Abbreviated text <address> Defines the author?s ?contact <blockqoute> Long quotation <cite> Citation <q> Short quotation Below is an example showing how the <b> tag is used to bold text.…
The conventions of RFC 3986 specify the range of characters that are acceptable for use with URLs. These are the characters in the US-ASCII set ? those that are not included in this range must first be converted to valid US-ASCII characters for compatibility with major browser software packages that are in use around the world. URL encoding or percent encoding is the process through which special characters are transformed into a format that is acceptable by the transfer protocols on the Internet. There are two major steps in the process of URL encoding. In the first step, the URL…
URL is an abbreviation for Universal Resource Locator. Its purpose is to identify the location of a document or another resource and define a mechanism for accessing it through a client?s web browser. Various components of the URL syntax Scheme Name: Describes the protocol that a web browser will use to access a particular resource on the World Wide Web. Scheme names are immediately followed by three character that are namely, a colon and two slashes. Host Name: designates the location of a resource. Port Number: This is used to make a request to a server by specifying the kind…
HTML Validation The purpose of a HTML validation exercise is to ensure that there are no mistakes in your code that would lead to incorrect display of your pages. W3C, the organization that maintain the HTML language has a number of tools that developers can use to check for errors in their code. W3C recommends validation because it helps developers create websites that compatible across various browsers and platforms. In addition, validated websites are easily visible by search spiders and also have improved user experience and accessibility. Tools for validation can be accessed online or as standalone versions that run…
In the past, embedding a video in a HTML webpage was not an easy task because just like in the case of audio files, there were no standard methods of attaching media files to web documents. You can use the new HTML 5 <video> element to attach video files as shown in the example below. Other methods of attaching media files are still available to developers, but they are not as reliable as using the <video> element. Embedding YouTube videos There are many developers who prefer uploading their videos to YouTube first before attaching them to their documents using code.…
An HTML Web Workers, as defined by the World Wide Web Consortium and the Web Hypertext Application Technology Working Group, is a JavaScript script executed from an HTML page that runs in the background, independently of scripts that may also have been executed from the same HTML page. Web Workers allow for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions and allow long tasks to be executed without yielding to keep the page responsive. The Web Workers specification defines an API for spawning background scripts in your web application. Web Workers allow you to do…
HTML Application Cache Conventionally, web based applications only work when a computer has an active connection to the Internet. The new application cache feature in HTML 5 enables a browser to save all of a websites resources so that it can display correctly even when the computer is not connected to the Internet. Apart from enabling offline browsing, using the HTML 5 application cache feature improves performance by eliminating the need to load resources from the web server each time the user on the client computer makes a request to access cached pages. It also reduces server load in that…