HTML Palpable Elements
HTML
Non-empty element with any flow content or phrasing content.
HTML Palpable elements
Element with any flow content or phrasing content and its content has at least one node in its contents that is palpable content and that does not have the hidden attribute specified.
Palpable content makes an element non-empty.
Interactive elements are
<a>,
<abbr>,
<address>,
<article>,
<aside>,
<audio>,
<b>,
<bdi>,
<bdo>,
<blockquote>,
<button>,
<canvas>,
<cite>,
<code>,
<data>,
<details>,
<dfn>,
<div>,
<dl>,
<em>,
<embed>,
<fieldset>,
<figure>,
<footer>,
<form>,
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>,
<header>,
<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<label>,
<main>,
<map>,
<mark>,
MathML <math>,
<menu>,
<meter>,
<nav>,
<object>,
<ol>,
<output>,
<p>,
<pre>,
<progress>,
<q>,
<ruby>,
<s>,
<samp>,
<section>,
<select>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
SVG <svg>,
<table>,
<textarea>,
<time>,
<u>,
<ul>,
<var>,
<video>.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Example</title>
<meta charset="utf-8" />
<style>
button{
width: 150px;
height: 50px;
background-color: cornflowerblue;
font-size: 14pt;
color: white;
border-radius: 10px;
}
button:hover{
background-color: rgb(17, 87, 218);
color: white;
}
</style>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "w3context JavaScript Tutorials";
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "18pt";
}
</script>
</head>
<body>
<h2>HTML Example</h2>
<p>Click this button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Magazzini Alimentari Moctezuma</td>
<td>Yoshi Chang</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Futterkiste</td>
<td>Giovanni Anders</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Trading</td>
<td>Bennett Roland</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Handel</td>
<td>Mendel Helen</td>
<td>UK</td>
</tr>
<tr>
<td>Centro comercial Riuniti</td>
<td>Maria Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Winecellars </td>
<td>Francisco Tannamuri</td>
<td>Canada</td>
</tr>
</table>
</body>
</html>Click on the "Try it Now" button to see how it works.