HTML Questions and Answers

HTML Questions and Answers

How to add space between text in html?

You can use special character   to add space. Alternatively, you can use css rules like padding/margin etc.

How to add link in html?

You can use below syntax to add link in html.


<a href='https://www.softpost.org'>softpost</a>

Explain important attributes of a tag excluding href

download - linked document will be downloaded
referrerpolicy - what info to be sent in header - no-referrer|origin|same-origin
rel - relationship between current document and linked document - author|tag|license|help|external|noreferrer
target - _self(default-same frame), _blank(new window/tab), _parent(parent frame), _top(full body), framename

So open link in new tab or new window in html, you need to use target=_blank.

What are the global attributes

Attributes that can be applied to any html element are called as global attributes. Here is the list of global attributes.

accesskey - shortcut key to access html element
class - class name for element
contenteditable - can we edit content?
data- - used in java script
dir - text direction
draggable - Can element be dragged
id - id attribute of an element
lang - language used in an element
spellcheck - spelling and grammar check is turned on for an element?
style - inline style of an element
tabindex - tabbing order of an element
title - title of an element
translate - element content should be translated?

What are event attributes in html?

When user interacts with html page, different types of events (mouse, keyboard, clipboard, form) occur. Some of the events are listed below.

DOMContentLoaded - after DOM is loaded. Does not wait for images+css+js etc
onload - after document (DOM+images+css+js) is loaded
onbeforeunload - before document is unloaded
onfocus - fires when element gets focus
onblur - fires when element loses focus
oninput, onchange - fires when something changes.
onselect - fires when text is selected in input or textarea element
onreset - fires when form is reset
onsubmit - fires when form is submitted

Difference between oninput and onchange events

oninput fires when value of an input or textarea element is changed. onchange fires when value of an input or textarea element is changed but only after element loses focus. In addition to this, onchange event works withselect elements as well.

How to add background image in html

You can use below css to add background image.


<style>
body {
  background-image: url('softpost.jpg');
  background-repeat: no-repeat;
}
</style>

What is background-size and background-attachment properties

background-size property sets the size of background image and background-attachment property sets whether background image position is fixed in a viewport or scrolls.

How to add a border in html

You can use below css to add border


<style>
div {
  border: solid 1px red;
}
</style>

How to add, reference or link css file in html

CSS stands for cascaded style sheets. CSS can be imported or included in 3 ways.

inline


<html>
<body style='color:red'>

</body>
</html>

internal - using style element


<html>
<head>
<style>
body {
  background-color: yellow;
}
</style>
</head>
</html>

external css file


<html>
<head>
<link rel="stylesheet" href="softpost-styles.css">
</head>
</html>

To override css style, you can use !important value.

How to add a favicon in html

Create an image and use link tag as shown below.


 <!DOCTYPE html>
 <html>
 <head>
   <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 </html>

How to add a search bar in html

You can use input element along with ajax to create search bar.

How to bold text in html

We can use strong tag Or we can use font-weight css


 <!DOCTYPE html>
 <html>
 <body>
 We can use  <strong>strong tag</strong>
 Or we can use <span style='font-weight:bold'>font-weight</span> css
 </body>
 </html>

This is how you can bold 1 word in html.

How to break a line in html

You can use any block type element. or you can use <br/> You can also start/add a new line in html by using block element like p or div tag. This is how you go to or enter next line in html.

How to bullet point in html

Brisbane
Mumbai

How to number list in html

Brisbane
Mumbai


 <!DOCTYPE html>
 <html>
 <body>
 <ul>
                        <li>Brisbane</li>
                        <li>Mumbai</li>
                    </ul>

                    <ol>
                        <li>Brisbane</li>
                        <li>Mumbai</li>
                    </ol>
 </body>
 </html>

How to build a website in html

We can follow below steps to build website.

Find requirements of website
Choose js and css framework
Develop html pages
Choose domain
Deploy on heroku or other hosting provider

How to bring element to front in html

You can use z-index css property to bring the element to front. When 2 elements overlap, you can increase z-index of the element which needs to be brought to the front. z-index property works only on elements for which position is not static. But z-index works for flex childrens even though position is not static.

How to background color in html

You can use background-color css property.

How to underline in html

You can use text-decoration css property. It can have below values.

underline: line under the text
line-through: line through the text
overline: line above the text

How to blur background in html

css filter property can be used to apply effects like blur, contrast, grayscale, hue-rotate, drop-shadow etc.

How to change image size in html

How to change font in html

How to comment in html


 <!DOCTYPE html>
 <html>
 <body>
 <!--
 You can comment like this
 -->
 </body>
 </html>
This is how you write comments in html.

How to change text color in html

You can use color css property. This is how you set text color in html.

How to create a table in html

Using table, tr, td, th, thead, tbody tags.

How to disable a button in html

You can use disabled attribute.


 <!DOCTYPE html>
 <html>
 <body>
 <button disabled>Click Me</button>

 </body>
 </html>

Graphics and Canvas

hr tag can be used to draw horizontal line. We can draw a line using canvas.

How to download file in html

Add download attribute to anchor tag.

Layouts in HTML

You can divide a page into sections using layout concept.

How to display an image in html

Use img tag

How to display text in html

Use p or spantag

How to disable input in html

Add disabled attribute.


 <!DOCTYPE html>
 <html>
 <body>
 <input placeholder='Enter name' disabled></input>

 </body>
 </html>

How to disable a link in html

Click Me!


 <!DOCTYPE html>
 <html>
 <body>
 <a href='/' style='pointer-events: none;'>Click Me!</a>

 </body>
 </html>

How to display variable value in html

You can do this by using JavaScript.


 <!DOCTYPE html>
 <html>

 <body>
 <h1>Id is <span id="num"></span></h1>

 <script>
 let number = 12
 document.getElementById("num").innerHTML = number;

 </script>

 </body>
 </html>

How to escape characters in html


< - use &lt;
> - use &gt;
" - use &quot;
' - use &#39;
& - use &amp;

How to edit image size in html

You can specify the image size using height and width properties.

How to edit text in html

Just add contenteditable attribute to the element.

How to enable scroll in html

You can use animation libraries like AOS(Animate on Scroll) to add scrolling effect in html.

How to format text in html

You can use below tags to format text.

strong - make the text bold
i - make the text italic - You can italicize text
em - Emphasized text
mark - Marked text
ins - Inserted text
sub - Subscript text
sup - Superscript text

You can also use css to format text using font (font-style, font-variant, font-weight, font-size, line-height, font-family) and text-decoration (text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness ) properties. You can increase font size using font-size css property.

Table Questions

How to fix table column width in html
How to make a table in html
How to freeze table header in html

How to find coordinates in html

You can use java script to get the co-ordinates.


 
                        function getCoordinates(event) {
                            let points =
                            "X: " + event.clientX +
                            " - Y: " + event.clientY;
                            console.log("Co-ordinates -> ", points)
                        }
                        
                        document.addEventListener("click", getCoordinates);

How to set font size in html

You can use font-size css property to set font size.

How to get input value in html

You can use JavaScript to get input value.



    function getValue(event) {
        var x = document.getElementById("myInputBox").value;
    }

How to group radio buttons in html

How to get user input in html

You can use prompt function in JavaScript to get user input.



    function getUserInput(event) {
        let name = prompt("Your city?","Brisbane");

    }

How to go back a folder in html

How to give space in html



                    You can use &nbsp; to add a space in html.

How to go to a specific part of a page in html

How to get current date in html

You can use Date function to get current date.



                        Console.log("Current date in GMT format ",  new Date())
                        //to get current year in html
                        Console.log("To get year ",  new Date().getFullYear())

How to hide div in html

You can hide div in 2 ways - display:none or visibility:hidden In same way, you can hide text and button as well.

How to highlight text in html

You can use mark tag. By default, Mark tag highlights text in yellow color. Alternatively you can apply background-color css property.

How to hide password in html

You can change the type attribute of input element to "password"

How to hide scrollbar in html

To hide scrollbars, Set the overflow css property to hidden. But this will also remove scrolling functionality.



  /* Hide scrollbar for Chrome, Safari, Opera */
.myelement::-webkit-scrollbar {
    display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
  .myelement {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

How to indent text in html

Use text-indent css property.This is how you can indent paragraphs as well.

How to justify text in html

How to jump to part of page in html

You can use href="#id1" This is how you navigate within a page in html and link to section of page in html.

JavaScript Questions

How to link javascript in html
How to call javascript function in html
How to add javascript in html
How to use jquery in html
How to add javascript file in html
How to run javascript in html

How to display json in html

You can use innerHTML to set the data.

How to keep text on same line in html

How to keep footer at bottom in html

How to know which button was pressed in html

Use event object to get the target element.

How to keep header fixed in html

Use position fixed and sticky.

How to know if a checkbox is checked in html

Use JS to find out the input element property.

How to access key in html

How to link to another page in html

How to hyperlink in html
How to go to another page in html
How to navigate to another page in html

How to link email in html

you can use mailto: in href.

How to make a navigation bar in html

How to move text down in html

How to make a button in html

You can use button tag. You can name a button by adding text within tags.

How to name classes in html

How to not underline links in html

You can use text-decoration:none css to remove underlines from links.

How to name a div in html

How to outline text in html

How to overlap elements in html

You can use position css property.

How to output text in html

How to work with images

How to position images in html
How to overlap images in html
How to make image fit screen in html and How to fit background image in html
How to link(hyperlink) an image in html
How to keep image aspect ratio in html
How to insert image in html
How to get image from folder in html
How to flip an image in html
How to fit image in div in html
How to move image in html
How to put images side by side in html
How to put text next to image in html
How to overlay text on an image in html
How to insert background image in html
How to have text next to image in html
How to put text over an image in html
How to rotate an image in html
How to use svg in html

How to put footer at bottom of page in html

How to print in html

How to quote in html

How to quote code in html

How to make quiz in html

How to escape quotes in html

How to create and read QR code in html

How to make QR code converter in html

How to use quill delta in html

What are non printable characters in html

How to use QML in html ?

How to remove underline from link in html

How to redirect to another page in html

How to remove space between lines in html

How to remove bullets from a ul in html

How to remove scrollbar in html

How to refresh page in html

How to set background color in html

How to space out text in html

How to skip a line in html

How to separate paragraphs in html

How to scroll to section in html

How to tab in html

How to type in html

How to take input in html

How to table in html

How to turn text into a link in html

How to truncate text in html

How to underline in html

How to use div in html

How to use unicode in html

How to unbold text in html

How to use google fonts in html

How to use custom font in html

How to validate input in html

How to validate email in html

Alignment

How to align and center in html
How to align vertically text in html
How to align horizontally in html
How to vertically center text in html
How to right align text in html
How to put text in the middle in html
How to center a table in html
How to center text in html
How to align images in html
How to position text in html

How to validate form in html

How to know viewport in html

How to tell if mobile device in html

How to get value from input in html

How to wrap text in html

How to wrap text around an image in html

How to write a paragraph in html

How to write text on image in html

How to write tags in text in html

How to write notes in html

How to write special characters in html

Tools

yaml to html converter and vice versa

xml to html converter and vice versa

xls to html converter and vice versa

Embed stuff

How to Embed music in html page
How to Embed youtube video in html page
How to center a youtube video in html
How to embed custom video in html
How to embed an image in html
How to embed a link in html
How to insert video in html

Basics

Advanced

Miscellaneous