What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to tell the browser what each part of the content is: a heading, a paragraph, an image, a link and so on.

<h1>Hello, World!</h1>
<p>This is a paragraph.</p>

HTML gives the structure, CSS gives the style and JavaScript gives the behaviour. HTML is a markup language, not a programming language. Learn more in HTML Introduction.

What is the difference between HTML tags and elements?

A tag is only the label written in angle brackets, like <p> and </p>. An element is the complete thing: the opening tag, the content and the closing tag together.

Empty elements like <br> have only one tag. In daily talk people use both words for the same thing. See HTML Elements and Tags.

What is the HTML page structure? Explain with example

Every HTML page has the same basic structure: a DOCTYPE, then the html element, which has a head (information about the page) and a body (the visible content).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>Page content.</p>
</body>
</html>

• <!DOCTYPE html> tells the browser it is HTML5.
• <head> has the title, charset, styles and scripts. It is not shown on the page.
• <body> has everything the visitor sees.

More in HTML Page Structure.

What is an attribute in HTML?

An attribute gives extra information about an HTML element. It is written inside the opening tag as name="value".

<a href="https://example.com" target="_blank">Visit</a>
<img src="photo.jpg" alt="A photo" width="200">

Here href, target, src, alt and width are attributes. Some common ones are id, class, style and title. Boolean attributes like disabled and required have no value. See HTML Attributes.

What is the difference between DIV, SPAN and paragraph tag in HTML?

All three are used to hold content, but they are different.

<div class="card">
  <p>My favourite colour is <span style="color:red">red</span>.</p>
</div>

div and span have no meaning of their own, while p tells that the text is a paragraph. See HTML Div and Span.

How to create a link to jump to a specific part of a page in HTML?

Give the target element an id, and put #id in the link. This works for the same page and for another page.

<!-- same page -->
<a href="#pricing">See pricing</a>
<h2 id="pricing">Pricing</h2>

<!-- another page -->
<a href="plans.html#pricing">Pricing on the plans page</a>

For a smooth scroll instead of a sudden jump, add this CSS.

<style>
  html { scroll-behavior: smooth; }
</style>

See also links to sections within the same page and HTML class and id.

What are different tags to list items in HTML?

HTML has three kinds of lists.

<ul>
  <li>Apple</li>
  <li>Mango</li>
</ul>

<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>Structure of a page</dd>
</dl>

Lists can be nested. See HTML Lists.

How do you insert an image into HTML?

Use the <img> tag. It is an empty element, so it has no closing tag. Two attributes are needed: src (the path of the image) and alt (a short text description).

<img src="images/photo.jpg" alt="A boy playing cricket" width="300" height="200">

• src can be a relative path like images/photo.jpg or a full URL.
• alt is shown when the image cannot load, and read by screen readers.
• width and height set the size in pixels.

See HTML Images.

What is the difference between inline and block elements in HTML?

A block element starts on a new line and takes the full width. An inline element stays in the same line and takes only as much width as its content.

<p>Block one</p>
<p>Block two</p>
<span>Inline one</span> <span>Inline two</span>

See HTML Block and Inline Elements.

How do you insert a video in HTML?

Use the <video> tag for a video file, with the controls attribute to show the play button.

<video width="480" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

For a YouTube video, use the embed code in an <iframe>.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="Video" allowfullscreen></iframe>

See HTML5 Video and HTML Iframes.

What are void (empty) elements in HTML?

Void elements (also called empty elements) are HTML elements that have no content, so they have no closing tag. They only have attributes.

<br>
<hr>
<img src="photo.jpg" alt="Photo">
<input type="text" name="name">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">

Common void elements are br, hr, img, input, meta, link, source and col. In HTML5 you write them without the slash. In XHTML they were written as <br />. See HTML Elements and Tags.

What is the difference between HTML and HTML5?

HTML5 is the latest major version of HTML. It added new elements and features, so many things that needed plugins can now be done with plain HTML.

Read HTML5 Introduction.

What are semantic elements in HTML5? Give examples

Semantic elements are tags whose name tells what the content is. For example <nav> holds navigation links and <footer> is the bottom part of a page. A <div> tells nothing.

• header, nav, main, footer
• section, article, aside
• figure, figcaption, time

<header>Site title</header>
<nav>Menu</nav>
<main>
  <article>Blog post</article>
  <aside>Related links</aside>
</main>
<footer>Copyright</footer>

They help SEO, accessibility and make the code easy to read. See HTML Semantic Elements.

What is the difference between id and class in HTML?

An id must be unique, so it identifies only one element on the page. A class can be used on many elements, and one element can have many classes.

<style>
  #title { color: navy; }
  .note  { background: #fff3cd; }
</style>

<h1 id="title">Heading</h1>
<p class="note">Note one</p>
<p class="note">Note two</p>

An id is also used as the target of a link (#id). See HTML Class and ID.

What is the alt attribute in HTML and why is it important?

The alt attribute of the <img> tag gives a short text description of the image.

<img src="bike.jpg" alt="Red bicycle near a wall">

• It is shown when the image cannot load.
• Screen readers read it, so blind visitors know what the image is.
• Search engines use it to understand the image, so it helps SEO.

Write what the image shows, in a few words, and do not start with “image of”. For decorative images use an empty alt="". See HTML Images.

How do you create a table in HTML?

Use the <table> tag. Inside it, each row is a <tr>, header cells are <th> and data cells are <td>.

<table>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Robin</td>
    <td>85</td>
  </tr>
</table>

Add borders with CSS. See HTML Tables.

What is the difference between GET and POST methods in an HTML form?

Both are values of the method attribute of a form.

<form action="search.php" method="get">...</form>
<form action="login.php" method="post">...</form>

Never send a password with GET, because it stays in the URL and the browser history. See HTML Forms.

What is the viewport meta tag in HTML?

The viewport meta tag tells a mobile browser how to size the page. Without it, phones pretend the screen is about 980 pixels wide and show a tiny zoomed-out page.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width uses the real width of the device.
• initial-scale=1.0 starts with no zoom.

Add it in the head of every page. It is the first step of responsive design.

What is the difference between canvas and SVG in HTML5?

Canvas draws pixels using JavaScript. SVG describes shapes as XML elements.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="orange" />
</svg>

See HTML5 Canvas.

How do you make a web page responsive using HTML and CSS?

Do these four things.

• Add the viewport meta tag in the head.
• Make images flexible with max-width: 100%; height: auto;.
• Use relative units like % and rem, not fixed pixels.
• Use media queries to change the layout on small screens.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  img { max-width: 100%; height: auto; }
  .column { width: 50%; float: left; }
  @media (max-width: 600px) {
    .column { width: 100%; float: none; }
  }
</style>

See HTML Responsive Design.