10 metod wprowadzonych w HTML5, które radykalnie poprawiły doświadczenie użytkownika
Pomagamy A SaaS firmie w optymalizacji platformy pod kątem wyszukiwania organicznego (SEO)… a kiedy przejrzeliśmy kod ich szablonów wyjściowych, od razu zauważyliśmy, że nigdy nie stosowali metod HTML5 w wynikach swoich stron.
HTML5 był znaczącym krokiem naprzód w zakresie doświadczenia użytkownika (UX) w tworzeniu stron internetowych. Wprowadzono kilka nowych metod i znaczników, które zwiększyły możliwości stron internetowych. Oto wypunktowana lista dziesięciu kluczowych metod i tagów HTML5 z objaśnieniami i przykładami kodu:
- Elementy semantyczne: W HTML5 wprowadzono elementy semantyczne, które zapewniają bardziej znaczącą strukturę treści internetowych, poprawiając dostępność i 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>
- Audio Video: Wprowadzono HTML5
<video>
i<audio>
elementów, co ułatwia osadzanie treści multimedialnych bez konieczności korzystania z wtyczek innych firm.
<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>
- Brezentowy: the
<canvas>
element pozwala na dynamiczną grafikę i animacje poprzez JavaScript, ulepszając funkcje interaktywne.
<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>
- Udoskonalenia formularza: HTML5 dodał nowe typy danych wejściowych (np. e-mail, URL) i atrybuty (np.
required
,pattern
) w celu poprawy sprawdzania poprawności formularzy i komfortu użytkownika.
<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>
- Geolokalizacja: HTML5 umożliwia stronom internetowym dostęp do lokalizacji geograficznej użytkownika, otwierając możliwości dla usług opartych na lokalizacji.
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.
});
}
- Przechowywanie lokalne: Wprowadzono HTML5
localStorage
do przechowywania po stronie klienta, umożliwiając stronom internetowym przechowywanie danych lokalnie bez polegania na plikach cookie.
// Storing data in local storage
localStorage.setItem('username', 'JohnDoe');
// Retrieving data from local storage
const username = localStorage.getItem('username');
- Pamięć sieciowa: Wzdłuż
localStorage
, wprowadzono HTML5sessionStorage
do przechowywania danych specyficznych dla sesji, które są usuwane po zakończeniu sesji.
// Storing session-specific data
sessionStorage.setItem('theme', 'dark');
// Retrieving session-specific data
const theme = sessionStorage.getItem('theme');
- Przeciągnij i upuść : HTML5 zapewnia natywną obsługę interakcji typu „przeciągnij i upuść”, ułatwiając wdrażanie intuicyjnych interfejsów.
<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>
- Responsywne obrazy: HTML5 wprowadził
<picture>
element isrcset
atrybut umożliwiający dostarczanie odpowiednich obrazów w zależności od rozmiaru i rozdzielczości ekranu.
<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>
- Szczegóły i podsumowanie: the
<details>
i<summary>
elementy umożliwiają tworzenie rozszerzalnych sekcji treści, poprawiając organizację dokumentów.
<details>
<summary>Click to expand</summary>
<p>Additional content goes here...</p>
</details>
Te dodatkowe funkcje HTML5 jeszcze bardziej poprawiły możliwości tworzenia stron internetowych, zapewniając programistom narzędzia do tworzenia bardziej interaktywnych i przyjaznych dla użytkownika witryn internetowych.