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>,
,
<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.