HTML Phrasing Elements
HTML
Phrasing content is the text elements in the documents.
HTML Phrasing elements
➔ Phrasing content is the text of the document, as well as the elements that mark the text in the paragraph.
Phrasing elements are
<a>,
<abbr>,
<area>,
<audio>,
<b>,
<bdi>,
<bdo>,
<br>,
<button>,
<canvas>,
<cite>,
<code>,
<data>,
<datalist>,
<del>,
<dfn>,
<em>,
<embed>,
<i>,
<iframe>,
<img>,
<input>,
<ins>,
<kbd>,
<label>,
<link>,
<map>,
<mark>,
<math>,
<meta>,
<meter>,
<noscript>,
<object>,
<output>,
<picture>,
<progress>,
<q>,
<ruby>,
<s>,
<samp>,
<script>,
<select>,
<slot>,
<small>,
<span>,
<strong>,
<sub>,
<sup>,
<svg>,
<template>,
<textarea>,
<time>,
<u>,
<var>,
<video>,
<wbr>.
Example <samll>, <big>, <i>, <b>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<title>HTML b tag example</title>
<style>
.light {
background-color: #d1f1f1;
}
button {
padding: 10px;
}
</style>
</head>
<body>
<p><i>This is italic text</i></p>
<p><b>This is bold text</b></p>
<p><small>This is small text</small></p>
<p><big>This is big text.</big></p>
<button onclick="myfunc()">Toggle Style</button>
<script>
let elements = document.querySelectorAll("p");
let flag = false;
function myfunc() {
if (flag) {
removestyle();
} else {
addstyle();
}
}
function addstyle() {
elements.forEach(el => {
el.classList.add('light');
});
flag = true;
}
function removestyle() {
elements.forEach(el => {
el.classList.remove('light');
});
flag = false;
}
</script>
</body>
</html>
Copy code and click on the "Try it Now" button to see how it works.