Mekhoa e 10 e Hlahisitsoeng ho HTML5 E Ntlafetseng Haholo Boiphihlelo ba Basebelisi
Re thusa a SaaS k'hamphani ho ntlafatsa sethala sa bona sa lipatlisiso tsa manyolo (SEO)… mme ha re hlahloba khoutu bakeng sa litempele tsa bona tsa tlhahiso, hang-hang re ile ra hlokomela hore ha ho mohla ba kileng ba kenyelletsa mekhoa ea HTML5 bakeng sa liphetho tsa bona tsa maqephe.
HTML5 e bile tlholisano e kholo bakeng sa boiphihlelo ba basebelisi (UX) ntshetsopeleng ya webo. E hlahisitse mekhoa le li-tag tse 'maloa tse ntlafatsang bokhoni ba maqephe a webo. Mona ke lenane le nang le lintlha tsa mekhoa e leshome ea bohlokoa ea HTML5 le li-tag tse nang le litlhaloso le lisampole tsa khoutu:
- Lintlha tsa Semantic: HTML5 e hlahisitse likarolo tsa semantic tse fanang ka sebopeho se nang le moelelo haholoanyane ho litaba tsa marang-rang, ho ntlafatsa phihlello le SEO.
<header>
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<article>
<h2>Article Title</h2>
<p>Article content goes here...</p>
</article>
<footer>
<p>© 2023 WebsiteName</p>
</footer>
- Video le Audio: HTML5 e hlahisitsoe
<video>
'me<audio>
likarolo, ho etsa hore ho be bonolo ho kenya litaba tsa multimedia ntle le ho itšetleha ka li-plugins tsa mokha oa boraro.
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
- Letlalo: The
<canvas>
element e lumella lits'oants'o tse matla le litšoantšo ka JavaScript, e ntlafatsa likarolo tse sebetsanang.
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
// Draw shapes and animations here using JavaScript.
</script>
- Lintlafatso tsa Foromo: HTML5 e kentse mefuta e mecha ea ho kenya (mohlala, lengolo-tsoibila, URL) le litšobotsi (mohlala,
required
,pattern
) bakeng sa netefatso ea foromo e ntlafalitsoeng le boiphihlelo ba mosebelisi.
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit" value="Submit">
</form>
- Geolocation: HTML5 e thusa liwebsaete ho fihlella sebaka sa mosebelisi, ho bula menyetla ea lits'ebeletso tse thehiloeng sebakeng.
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
// Use latitude and longitude data here.
});
}
- Polokelo ea Lehae: HTML5 e hlahisitsoe
localStorage
bakeng sa polokelo ea lehlakore la bareki, e nolofalletsang marang-rang ho boloka data sebakeng sa heno ntle le ho itšetleha ka li-cookies.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Setsi sa polokelo ea hau: Haufi
localStorage
, HTML5 e hlahisitsoesessionStorage
bakeng sa ho boloka lintlha tse khethehileng tsa seshene, tse hlakoloang ha seboka se fela.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Hula le lerotholi : HTML5 e fana ka ts'ehetso ea tlhaho bakeng sa litšebelisano tsa ho hula le ho theola, e nolofaletsa ho kenya tšebetsong likhokahano tse hlakileng.
<div id="dragTarget" draggable="true">Drag me!</div>
<div id="dropTarget">Drop here!</div>
<script>
const dragTarget = document.getElementById('dragTarget');
const dropTarget = document.getElementById('dropTarget');
dragTarget.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Dragged item');
});
dropTarget.addEventListener('dragover', function(event) {
event.preventDefault();
});
dropTarget.addEventListener('drop', function(event) {
event.preventDefault();
const data = event.dataTransfer.getData('text');
// Handle the dropped item here.
});
</script>
- Litšoantšo tse Arabang: HTML5 e hlahisitse
<picture>
element lesrcset
tšobotsi bakeng sa ho fana ka litšoantšo tse nepahetseng ho ipapisitsoe le boholo ba skrine le qeto.
<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 768px)">
<img src="image-small.jpg" alt="Responsive Image">
</picture>
- Lintlha le Kakaretso: The
<details>
'me<summary>
likarolo li u lumella ho theha likarolo tse atolositsoeng tsa litaba, ho ntlafatsa tlhophiso ea litokomane.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Likarolo tsena tse ling tsa HTML5 li ntlafalitse le ho feta bokhoni ba nts'etsopele ea webo, ho fa ba ntlafatsang lisebelisoa tsa ho theha liwebosaete tse sebelisanang le basebelisi habonolo.