The Wayback Machine - https://web.archive.org/web/20241123000444/https://www.geeksforgeeks.org/html-examples/
Open In App

HTML Examples

Last Updated : 17 Jun, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

HTML (Hypertext Markup Language) serves as the backbone of web development, allowing us to create web pages and applications. It uses a diverse range of tags and attributes to define the structure and layout of a web page, thereby facilitating the creation of web pages and applications.

This comprehensive guide’ll delve into practical examples, explore best practices, and unlock the secrets of effective HTML usage. From basic tags to advanced techniques, we’ll equip you with the knowledge needed to craft compelling web experiences. Each program example contains multiple approaches to solve the problem.

HTML Examples

Our HTML examples demonstrate fundamental concepts like tags, attributes, forms, tables, lists, images, links, and multimedia embedding. This knowledge help you to master HTML fundamentals, thereby significantly enhancing your web development skills.

Table of Content

HTML Basic Questions

This section, throws some basic HTML questions your way. Brush up on fundamental concepts like creating elements, adding attributes, and structuring your webpage. Dive in and see how well you understand the building blocks of the web!

Sr. No.

Questions

1Difference between HTML and CSS
2What are physical tags in HTML?
3What are Deprecated Tags?
4Container and Empty Tags in HTML
5How to insert HTML Comments?
6How to set background image in HTML?
7How to define a list item in HTML5?
8Difference between semantic and non-semantic elements
9How to use HTML Color Picker?
10What are HTML Hex Color Codes?
11Difference between Block and Inline Elements
12What is the Drag and Drop concept?
13How to set the name for the object in HTML5?
14How to add space between elements?
15How to create a clickable button in HTML?
16How to display incorrect content using HTML5?
17How to create an ordered list using HTML5?
18How to add a parent to several tags in HTML?
19How to specify the alignment of the Horizontal rule using HTML5?
20What’s the difference between element value and data attribute?

HTML Structural Tags

Dive into these HTML structural tags questions! Test your knowledge on elements like headings, paragraphs, lists, and more, and ensure you're constructing well-organized and semantic webpages.

Sr. No.

Questions

1How to escape everything in a block in HTML?
2How to center a div within another div?
3How to rotate an HTML div element 90 degrees?
4How to create a moving div?
5How to stretch div to fit the container?
6Make a div horizontally scrollable using CSS
7How to hide text going beyond DIV element?
8How to set an alternate text for area in HTML5?
9How to read all spans of a div dynamically?
10How to create horizontal scrollable sections using CSS?

In this section we have tailored a series of questions designed to assess your understanding of creating and utilizing hyperlinks in HTML. Sharpen your skills in crafting effective navigation elements and ensure your webpages offer a seamless user experience.

Sr. No.

Questions

1What are HTML Links?
2How to link back out of a folder using the a-href tag?
3What is HTML <a> ping Attribute?
4HTML <link> disabled attribute
5What is the use of “#” symbol in link URL?
6How to create a link with a media attribute in HTML5?
7How to specify the source URL of the quote using HTML5?
8How to specify that the target will be downloaded when a user clicks on the hyperlink in HTML5?
9How to specify the hyperlink target for the area of an image in HTML5?
10How to make a HTML link that forces refresh?
11How to specify the relationship between the current document and the target URL in HTML5?
12How to set the language of text in the linked document in HTML5?
13How to specify what media/device the target URL is optimized for?
14How to specify URL of resource to be used by the object in HTML5?
15How to use Anchor tag as submit button?
16How to set the size of the linked resource in HTML5?
17How to insert a JavaScript variable inside href attribute?

HTML Tables

Need to organize information on your webpage? This section dives into HTML tables! Learn how to create rows, columns, and headers to present data in a clear and structured way, making your webpages easy to understand.

Sr. No.

Questions

1What are HTML Tables?
2What is <td> nowrap Attribute?
3What is tbody charoff Attribute?
4What is <tr> charoff Attribute?
5What is <td> scope Attribute?
6What is <td> rowspan Attribute?
7What is <col> valign Attribute?
8What is <thead> align Attribute?
9What is <thead> valign Attribute?
10How to define whether a header cell is a header for a column, row, or group of columns or rows in HTML 5?
11How to group header content of a table using HTML5?
12How to implement single row select and delete using DataTables plugin?
13How to define one or more header cells a cell is related to in HTML?
14How to set the number of rows a table cell should span in HTML?
15How to create a table with fixed header and scrollable body?
16How to make a Animated Table using HTML and CSS?

HTML Forms

This section dives into the world of HTML forms. Learn how to create forms to collect user input, making your webpages interactive and functional. Get ready to build dynamic web experiences!

Sr. No.

Questions

1Elements of a form Tag
2How to set an alternate text for area in HTML5?
3How to specify one or more forms the object belongs to?
4How to specify one or more forms the keygen element belongs to?
5How to turn on/off form autocompletion in HTML?
6How to customize a “select” HTML form element ?
7How to specify that a group of related form elements should be disabled using HTML?
8How to specify how form-data should be encoded when submitting to server?
9How to specify the URL that will process the data supplied through input(s) when the form is submitted?
10How to specify one or more forms the label belongs to?
11How to specify multiple forms the select field belongs to in HTML?
12How to set an alternate text for area in HTML5?
13How to change the <input> type?
14How to specify which form element a label is bound to?
15How to create a multiline input control text area in HTML5?
16How to define one or more forms the output element belongs to?
17Build a Survey Form using HTML and CSS
18How to create form validation by using only HTML?

HTML Frames

HTML Frames. While not as widely used today, HTML frames can be helpful for understanding older websites and their structure. This section delves into how frames work and how they were used to create webpages in the past.

Sr. No.

Questions

1HTML Iframes
2What is HTML <iframe> referrerpolicy Attribute?
3How to divide an HTML page into four parts using frames?
4How to place a div inside an iframe for IE?
5How to enable extra set of restrictions for content in an iframe element in HTML5?
6How to navigate URL in an iframe with JavaScript?

HTML Media

In this section, we explores how to embed multimedia elements like images, videos, and audio into your HTML code. Learn how to control playback, add captions, and create a richer user experience.

Sr. No.

Questions

1HTML Emojis
2How to set width and height of background image in percent with respect to parent element in CSS?
3How to slice image specified by border-image-source in CSS?
4How to animate a straight line in linear motion?
5How to specify the media type of the script in HTML5?
6How to display video controls in HTML5?
7How to mute video using HTML5?
8How to add controls to an audio in HTML5?
9Create Scanning Animation Loader using HTML & CSS
10How to specify media type of data specified in data attribute in HTML5?
11How to set the height and width of the video player in HTML5?
12How to specify what media/device the target URL is optimized for?
13How to specify the type of the media resource in HTML5?
14How to preload the video when the page loads in HTML5?
15How to check whether an image is loaded or not?
16How to Create Image Hovered Detail using HTML & CSS?
17How to define media type of style tag in HTML5?
18How to set multiple media resources for elements in HTML5?

HTML Questions

This section offers a variety of questions to challenge your understanding of HTML basics and functionalities. Put your skills to the test and solidify your grasp of building webpages using HTML.

Sr. No.

Questions

1How to set a single line break in HTML5?
2How to set two bars with rounded arrows overlapping each other in CSS?
3How to create a progress bar using HTML and CSS?
4How to set the content as a counter?
5How to create Perspective Text using HTML & CSS?
6How to set an alternate text for area in HTML5?
7How to isolate a part of text that may be formatted in a different direction using HTML5?
8Design an Event Webpage using HTML & CSS
9How to create fullscreen search bar using HTML, CSS and JavaScript?
10How to Skew Text on Hover using HTML and CSS?
11Programming a slideshow with HTML and CSS
12How to specify that an option-group should be disabled in HTML5?
13How to specify the name for drop-down list in HTML5?
14How to disable the drop-down list in HTML5?
15How to specify how much work the task requires in total in HTML5?
16How to create Non-Rectangular Header using HTML & CSS?
17How to define scalar measurement within a given range in HTML5?
18How to set the security algorithm of key in HTML5?
19How to set minimum and maximum value of range in HTML5?
20Turn on or off Bulb using HTML & CSS

Important HTML Reference Links


K
kartik
News
Improve
Next Article
Difference between HTML and CSS

Similar Reads

HTML | DOM HTML Object
The HTML Object property in HTML DOM is used to represent or access the HTML <html> element with in the object. The <html> element is used to return the HTML document as an Element Object. Syntax: It is used to access a <html> element.var x = document.getElementsByTagName("HTML")[0]; It can also be used to access a <html> el
3 min read
HTML | <html> xmlns Attribute
The HTML <html> xmlns Attribute is used to specify the xml namespace for a document. Important Note: This attribute is mainly required in XHTML, not valid in HTML 4.01, and optional in HTML 5. Syntax: <html xmlns="http://www.w3.org/1999/xhtml"> Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d
1 min read
Inline HTML Helper - HTML Helpers in ASP.NET MVC
HTML Helpers are methods that returns HTML strings. These are used in the view. In simple terms, these are C# methods that are used to return HTML. Using HTML helpers you can render a text box, an area, image tag, etc. In MVC we have many built-in HTML helpers and we can create custom helpers too. Using HTML helpers a view can show model properties
2 min read
How to return HTML or build HTML using JavaScript ?
JavaScript is very powerful and with it, we can build dynamic web content and add many features to a web application. With HTML, we create the structure of the web page and the same thing can also be done with JavaScript. There are a few JavaScript methods called as createElement(), appendChild() with which we can add nodes to the DOM tree on the f
2 min read
How to convert html.slim to html.erb ?
Introduction to slim and erb: Slim files and tools are used to make the code more light and will help to use it instead of the particular code. erb is also used to do the similar but if you want to make the changes in the code then the user should be familiar with slim/erb respectively. If you have to convert an HTML Document into html.slim file th
1 min read
How to include HTML code snippets in HTML ?
In this article, we will learn how to include HTML snippets in HTML code. We will include the HTML code snippet of "gfg.html" into "index.html". To achieve this task, we are going to write a JavaScript function in "index.html" which traverses the collection of all HTML elements in "gfg.html" and searches for elements with specific attributes. It cr
3 min read
HTML Complete Guide – A to Z HTML Concepts
What is HTML ? HTML stands for Hypertext Markup Language. It is a standard markup language used to design the documents displayed in the browsers as a web page. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readabl
7 min read
HTML Course Basics of HTML
In this article, we will go through all the basic stuff required to write HTML. There are various tags that we must consider and know about while starting to code in HTML. These tags help in the organization and basic formatting of elements in our script or web pages. These step-by-step procedures will guide you through the process of writing HTML.
5 min read
HTML Course Structure of an HTML Document
HTML(Hypertext Markup Language), structures web pages. Unlike programming languages, it isn't compiled or interpreted. Browsers render HTML directly, displaying content without typical errors. It's a markup language, not a programming one, making execution smooth without encountering compilation or interpretation issues. Table of Content HTML Docum
3 min read
What is the difference between <html lang="en'> and <html lang="en-US'> ?
The lang attribute specifies which language is used to write the content of a web page. It is used to set the language for the whole text of the web page. The <html lang="en"> specifies the language of the document as English, while <html lang="en-US"> narrows it down to English as used in the United States. Table of Content The < ht
2 min read
HTML Code to JSON Converter App Using HTML, CSS, and JavaScript
HTML tables are a common way to represent structured data on web pages, but transforming this data into a JSON format can be troublesome. JSON is a lightweight data-interchange format that is easy for humans to read and write and for machines to parse and generate. We will be creating the HTML Code for the JSON Converter tool. The converter is desi
3 min read
HTML <html> Tag
HTML is a language full of diverse elements, and one such element is the <html> tag. This tag, standing for ‘HyperText Markup Language’, is used to define the root of an HTML or XHTML document. It serves as the main container for all other HTML elements, excluding the <!DOCTYPE> declaration. Understanding the <html> TagThe <htm
3 min read
How to Display HTML Tags as Plain Text in HTML?
In HTML, certain characters like <, >, ", and & are reserved for defining HTML elements and attributes. To display these characters as plain text instead of interpreting them as part of the HTML structure, you need to use special codes called HTML entities. HTML Entities for Special CharactersTo show reserved characters as plain text, use
2 min read
JavaScript typedArray.entries() with Examples
The Javascript typedArray.entries() is an inbuilt function in JavaScript that gives a new array iterator object containing the key and value pairs of the given typedArray object. Syntax: typedArray.entries() Parameter: It does not accept any parameters. Return value It returns a new array iterator object containing the key and value pairs of the gi
2 min read
JavaScript typedArray.values() with Examples
The Javascript typedArray.values() is an inbuilt function in JavaScript that is used to get the specified value of the contents of the typedArray(). Syntax: typedArray.values() Parameters It does not accept any parameters. Return value: It returns the specified value of the given typedArray object. JavaScript examples to show the working of this fu
2 min read
jQuery | Hide/Show, Toggle and Fading methods with Examples
jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. jQuery hide() and show() jQuery hide() : Hides the Syntax or the element of html that you want to hide.$(selector).hide(speed, callback); jQuery show() : Shows the synta
3 min read
JavaScript typedArray.toString() with Examples
The Javascript typedArray.toString() is an inbuilt function in JavaScript that is used to convert the contents of the tyepdArray into a string. Syntax: typedarray.toString() Parameters: This function does not accept any parameter. Return value: It returns a string that represents the elements of the typedArray. JavaScript examples to show the worki
1 min read
JavaScript typedArray.every() with Examples
The Javascript typedArray.every() function is an inbuilt function in JavaScript that is used to test whether the elements present in the typedArray satisfy the condition provided by a function. Syntax: typedarray.every(callback) Parameters: It takes the callback function as a parameter. The callback is a function for testing the elements of the typ
2 min read
JavaScript typedArray.copyWithin() with Examples
The Javascript typedArray.copyWithin() is an inbuilt function in JavaScript that is used to copy some elements of a typedArray at the specified location in the same typedArray. Syntax: typedArray.copyWithin(target, start, end) Parameters: It accepts three parameters that are specified below- target: It is the start index position from where to copy
2 min read
Javascript Error and Exceptional Handling With Examples
An error is an action that is inaccurate or incorrect. There are three types of errors in programming which are discussed below: Syntax errorLogical errorRuntime error Syntax error: According to computer science, a syntax error is an error in the syntax of a sequence of characters or tokens that is intended to be written in a particular programming
3 min read
jQuery | data() with Examples
The data() is an inbuilt method in jQuery which is used to attach data or get data for the selected elements. Syntax: $(selector).data(para1); Parameter : It accepts an optional parameter "para1" which specifies the name of the data to retrieve for the selected element. Return Value: It returns the retrieved data for the selected element.jQuery cod
2 min read
jQuery serialize() with Examples
The serialize() method is an inbuilt method in jQuery that is used to create a text string in standard URL-encoded notation. This method can act on a jQuery object that has selected individual form controls, such as input, textarea etc. Syntax: $(selector).serialize()Parameters: This method does not contain any parameter. Return Value: This method
1 min read
jQuery | size() with Examples
The size() is an inbuilt method in jQuery used to find the number of elements matched by the given selector. This method is removed in jQuery 3.0 instead of this length() has been introduced. Syntax: $(selector).size() Parameter: It does not accept any parameters. Return Value: It returns the number of elements matched by the selected elements. jQu
1 min read
jQuery serializeArray() with Examples
The serializeArray() is an inbuilt method in jQuery that is used to create a JavaScript array of objects that is ready to be encoded as a JSON string. It operates on a jQuery collection of forms and/or form controls. The controls can be of several types. JSON string is a text and can convert any JavaScript object into JSON, and send JSON to the ser
1 min read
Visibility of elements in bootstrap with Examples
There are some situations where it is needed to hide some content on a webpage without affecting the layout of the page. Bootstrap uses the CSS visibility property and provide two classes visible and invisible to control the visibility of an element on a web page.These classes do not affect the layout i.e. invisible elements will still take up spac
3 min read
Vertical alignment in Bootstrap with Examples
Vertical Alignment in bootstrap changes the alignment of elements vertically with the help vertical-alignment utilities. The vertical-align utilities only affects inline(Present in one Line), inline-block(Present as blocks in one line), inline-table, and table cell(Elements in a cell of a table) elements.Various classes available in bootstrap libra
2 min read
List group in bootstrap with examples
List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way. Below is a basic List Group created using unordered_lists in HTML, and appropriate Bootstrap classes: C/C++ Code <!DOCTYPE html> <html
4 min read
Bootstrap | Close Icon for dismissing content with Examples
The close icon in bootstrap is a utility that is used to dismiss any content (e.g., Alerts, Modals, Popovers). It is represented by a generic cross/close icon.Below is a sample HTML code including a close icon for dismissing content in bootstrap: C/C++ Code <!doctype html> <html> <head> <!-- Bootstrap CSS --> <link rel=
2 min read
Bootstrap | figure class with Examples
A figure is used when one needs to display a piece of content, generally images with an optional caption. The figure class in Bootstrap is used to add styling to the default figure elements. The base .figure class is used to indicate a figure element. The .figure-img is used to indicate the image used in the figure element. The .figure-caption may
1 min read
BootStrap | Positioning an element with Examples
The Bootstrap framework provides us with a series of classes that allows us to change the position of an element. It provides us with five classes that are common in function with the CSS position property. In addition, it provides three additional classes for controlling the position of an element. Common Classes: position-static: It works the sam
6 min read
Article Tags :
three90RightbarBannerImg
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox