Wpis o JSie przyjął się bardzo ciepło, a nawet niektórzy pisali, że przydał im się na rozmowie 🙂 Bardzo się cieszę, dokładnie o to mi chodziło 😀 Teraz nadszedł czas na kolejną część, tym razem czterdzieści i cztery pytania z HTML. Zaczynamy!


Jest to dziewiąta część serii „Rozmowa Kwalifikacyjna”. Zapraszam do pozostałych artykułów:
Rozmowa kwalifikacyjna #01 – Wstęp
Rozmowa kwalifikacyjna #02 – Przygotowanie się do rozmowy
Rozmowa kwalifikacyjna #03 – Początek rozmowy, część miękka i porady ogólne
Rozmowa kwalifikacyjna #04 – Ogólna rozmowa techniczna
Rozmowa kwalifikacyjna #05 – Pytania do firmy
Rozmowa kwalifikacyjna #06 – Kontakt i feedback
Rozmowa kwalifikacyjna #07 – Podpisanie umowy
Rozmowa kwalifikacyjna #08 – Pytania – JavaScript


Spis treści

1. Czym jest HTML? Rozwiń skrót HTML

HTML (Hyper Text Markup Language, hipertekstowy język znaczników) jest to język wykorzystywany do tworzenia stron internetowych, a dokładniej do tworzenia dokumentów hipertekstowych (czyli dokumentów połączonych hiperłączami). Pozwala on na określenie tego, jak strona będzie wyglądała w przeglądarce. Obecnie jest podstawą internetu. Przeglądarki czytają plik HTML, interpretują go po swojemu i wyświetlają nam treść w formacie strony internetowej, a nie czystego tekstu czy pliku do ściągnięcia.

2. Co to jest DOM?

DOM (Document Object Model) to wieloplatformowy, niezależny od języka interfejs, który traktuje HTML, XHTML oraz XML jak strukturę drzewiastą. Każdy węzeł drzewa jest obiektem reprezentującym część dokumentu.

Źródło – Wikipedia

3. Co to jest Tag (Znacznik)?

Tag (Znacznik) to konkretny znak lub słowo, określające konkretny element na stronie. Tagi nie są wyświetlane jako tekst, a są interpretowane przez przeglądarkę w określony przez specyfikację sposób. Inaczej mówiąc, tag to element, który mówi przeglądarce jak ma wyrenderować zawartość tagu. Przykład tagu:

<tag> zawartość </tag>

Jak widać, poprawny tag składa się z tagu otwierającego w nawiasach ostrych – <tag>, zawartości tagu oraz tagu zamykającego poprzedzonego ukośnikiem w nawiasach ostrych – </tag>.

4. Czy wszystkie tagi (znaczniki) w HTML wymagają tagu zamykającego?

Nie, nie wszystkie, na przykład tagi <image> czy <br> nie potrzebują zamknięcia.

5. Czym są atrybuty tagu?

Atrybuty to specjalne słowa w tagu pozwalające na kontrolowanie jego zachowania oraz czasami dostarczają nam dodatkowych informacji na temat tagu. Przykład:

<input class="textInput" maxlength="2048">

6. Czym jest ID?

ID jest specjalnym atrybutem, który nadaje tagowi unikalną na całą stronę nazwę (ID). W przeciwieństwie do klas (class), jedno id powinno być nadane tylko jednemu elementowi na stronie. Więcej elementów z jednym ID prowadzi do błędów i nieprzewidzianych zachowań. Przykład:

<h1 id="naglowek">Naglowek</h1>

7. Jak dodać CSS do strony?

Można to zrobić na 3 sposoby:

  • Można umieścić CSS w oddzielnym pliku, który załadujemy na stronę:
<link rel="stylesheet" type="text/css" href="style.css">
  • Można umieścić CSS w nagłówku strony w tagach <style>:
<style>
body {
  background-color: red;
}
</style>
  • Można umieścić CSS bezpośrednio w tagu:
<h1 style="color:blue;">Naglowek</h1>

8. Jak dodać JS do strony?

Podobnie jak w przypadku CSS, JS można dodać na 3 sposoby:

  • Można umieścić JS w oddzielnym pliku, który załadujemy na stronę:
<script src="plik.js"></script>
  • Można umieścić JS w nagłówku strony w tagach <script>:
<script>
/* Tutaj umieść kod javascript. */
</script>

  • W niektórych przypadkach można umieścić JS bezpośrednio w tagu:
<a href="#" onclick="console.log('Witaj!');">click</a>

9. Jaka jest różnica między <script> , <script async> oraz <script defer>?

<script> blokuje renderowanie strony, ściąga skrypt i go uruchamia, dopiero wznawia renderowanie.

<script async> nie blokuje renderowania do czasu ściągnięcia, po ściągnięciu skryptu blokuje renderowanie i wykonuje skrypt.

<script defer> nie blokuje renderowania do czasu ściągnięcia, po ściągnięciu skryptu czeka, aż renderowanie się zakończy, i dopiero wtedy wykonuje skrypt.

10. Gdzie powinno się umieszczać <link> od CSS i <script> od JS? Dlaczego? Są jakieś wyjątki?

<link> powinno się umieszczać na samym końcu tagu <head>, ponieważ wtedy style strony będą załadowane, zanim strona się wyświetli w pełni, dzięki czemu unikniemy skakania zawartości w miarę doczytywania kolejnych rzeczy, oraz użytkownik będzie miał wrażenie działającej strony jeszcze w czasie wczytywania.

<script> za to powinno się umieszczać na samym końcu tagu <body>, ponieważ wtedy cała strona poprawnie się wy renderuje, i dopiero wtedy skrypty są ładowane i wykonywane, nie blokując renderowania strony. Dzięki temu unikniemy tego, że na początku strony przez np. 2 sekundy jest cała biała strona, dopiero później nagle wszystko się pojawia.

Jest wyjątek od reguły z JSem. Możemy umieszczać JS w <head> pod warunkiem, że jest to JS, bez którego żaden frontend się nie pojawi mimo wczytania plików CSS, lub inaczej, jeżeli cała strona zależy od tego skryptu.

11. Czym jest i co robi doctype?

Element doctype mówi przeglądarce, aby wyrenderowała stronę w trybie standardów. Dzięki temu można uniknąć wielu błędów. Przykład:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Tytul</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    Hello World
  </body>
</html>

12. Czym się różni tryb standardów od trybu osobliwości?

Przeglądarki mają 3 tryby interpretowania stron. Różnią się one implementacją standardów HTML i CSS.

Tryb Standardów (standards mode) – Jest to domyślny tryb. Implementuje najnowsze standardy HTML i CSS, dzięki czemu wszystko działa tak, jak powinno. Większość stron z niego korzysta.

Tryb Osobliwości (quirks mode) – Jest to tryb wykorzystywany do renderowania starszych stron, stworzonych, zanim standardy zostały ostatecznie ustalone. Tryb ten pozwala w pewnym sensie emulować stare przeglądarki, takie jak IE5 czy Navigator 4, dzięki czemu strony tworzone za tych przeglądarek działają tak, jak powinny.
Główną różnica między trybem osobliwości a trybem standardów jest błędna implementacja modelu pudełkowego CSS w wersjach Internet Explorera poniżej 6. Inną różnicą jest wyrównanie w pionie elementów typu inline.

Tryb Prawie Standardów (almost standards mode) – Jest to tryb spotykany w przeglądarkach na silniku Gecko od wersji 1.0.1 (np. Firefox, Safari czy Opera). Charakteryzuje się tym, że działają jak tryb Standardów poza jednym małym wyjątkiem – zmiana pionowych rozmiarów komórek table jest niezgodna ze specyfikacją CSS2. Poza tą jedną rzeczą wszystko jest normalnie jak w trybie Standardów.

13. Czym jest i co robi charset?

Charset jest nowym atrybutem tagu metadanych, który konfiguruje zestaw znaków (charset), którego będzie używała strona. Przykład:

<meta charset=”UTF-8″>

14. Jaka jest różnica między HTML i XHTML?

XHTML jest to przedstawienie HTMLa za pomocą XML. Istnieje również parę różnic w regułach między HTML i XHTML:

HTMLXHTML
Typ wartości to text/htmlTyp wartości to application/xhtml+xml
Nie ma znaczenia wielkość liter w tagach, np.
<div> i <DIV> działa tak samo.
Ma znaczenie wielkość liter, wszystkie nazwy tagów i atrybutów muszą być pisane małymi literami.
Niektóre elementy są zawsze puste, np.
<img>, <br> czy <input>
Puste elementy powstają tylko poprzez:
<element/> lub <element></element>
Czasami HTML automatycznie wstawia elementy np. <tbody>DOM będzie zawierał tylko te elementy, które zostały napisane, nic nie jest dodawane automatycznie.
Dopuszczane są skrócone atrybuty, np.
<input checked>
Atrybuty zawsze muszą mieć wartość, np.
<input checked=”checked”>
Niezgodna z XML składnia.Składnia zgodna XML oraz ma swoją przestrzeń nazw.
Przeglądarki ignorują niepoprawny HTML.XHTML wymaga bezwzględnie poprawności składni.

15. Czy jest jakiś problem z serwowaniem stron jako application/xhtml+xml ?

Tak, przeglądarki poniżej IE8 będą wyświetlały możliwość ściągnięcia strony zamiast ją wyrenderować.

16. Jak stworzyć stronę z zawartością w wielu językach?

Można użyć:

  • lang lub xml:lang w tagach
  • meta danych

Nagłówek HTTP Content-Language nie ustawia języka, a tylko wskazuje dla użytkowników jakiego języka jest treść.

17. Co musisz mieć na uwadze, tworząc wielojęzykową stronę?

  • atrybut hreflang w linku
  • atrybut dir wskazujący na kierunek tekstu (rtl – right-to-left lub ltr – left-to-right)
<html dir="rtl">
  • <meta charset=’UTF-8’>
  • ustalając font-size dla różnych języków, czyli używając selektora CSS – :lang({lang_code})

18. Do czego się przydaje atrybut data-?

Do przechowywania lub przekazywania dodatkowych informacji do elementu, np.

<div data-zawartosc="jakas_zawartosc"></div>

19. Czym się różni cookie, localstorage oraz sessionstorage?

Cookie:

  • Przetrzymuje dane, które są wysyłane również na serwer przy każdym zapytaniu HTTP.
  • Czas ważności cookie jest różny i można go dowolnie ustawić.
  • Mogą być czytane po stronie serwera, jak i przeglądarki.
  • Maksymalny rozmiar to 4 KB.

LocalStorage:

  • Przetrzymuje dane lokalnie, na dysku odbiorcy. Dane nie są automatycznie wysyłane na serwer przy każdym zapytaniu HTTP.
  • Nie ma daty ważności, można wyczyścić przez JavaScript.
  • Mogą być czytane tylko po stronie przeglądarki.
  • Maksymalny rozmiar to domyślnie 5 MB.

SessionStorage:

  • Przetrzymuje dane lokalnie, na dysku odbiorcy. Dane nie są automatycznie wysyłane na serwer przy każdym zapytaniu HTTP.
  • Mogą być czytane tylko po stronie przeglądarki.
  • Maksymalny rozmiar to domyślnie 5 MB.
  • Jest ważny tylko w czasie trwania obecnej sesji. Po skończeniu sesji (zamknięciu okna przeglądarki) dane są czyszczone.

20. Czym sa języki szablonów HTML (HTML templating languages)?

Silniki szablonów to programy, które pozwalają w HTMLu pisać z użyciem jakiegoś języka programowania, po czym silnik interpretuje stworzony kod i podmienia go wygenerowanym kodem HTML. W efekcie, na końcu mamy czysty plik HTML, bez dodatków innych języków, za to większy niż pierwotny.

Przykład silnika szablonów – Jinja2 dla Django. Przykładowy kod w Jinja2:

<ul>
{% for user in users %}
  <li>{{ user.username }}</li>
{% endfor %}
</ul>

Po zamianie otrzymujemy przykładowo:

<ul>
  <li>User1</li>
  <li>User2</li>
  <li>User3</li>
  <li>User4</li>
</ul>

21. Czym jest renderowanie progresywne (progresive rendering)?

Jest to technika używana do renderowania zawartości strony najszybciej jak to możliwe. Polega to na tym, że przeglądarka opóźnia ściągnięcie niepotrzebnych w tym momencie plików, i pobiera je, wtedy kiedy ich potrzebuje. Zamiast załadować wszystkie pliki od razu, ładuje tylko te potrzebne w danym momencie do wyświetlenia strony.

22. Dlaczego się używa atrybutu srcset w tagu image ?

Srcset używa się, aby ładować różne obrazki zależnie od rozdzielczości. Przykład:

<img srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
             src="image-800w.jpg" alt="Zdjecie">

Przeglądarka sama sobie wybiera, który obrazek załadować. W przypadku nieobsługiwania atrybutu srcset (np. IE) brana jest wartość atrybutu src.

23. Jakie nowe tagi HTML5 dodało dla formularzy?

  • <datalist> – opisuje listę opcji dla inputa.
  • <output> – definiuje wynik wyrażenia.

24. Jakie nowe tagi HTML5 dodało dla zarządzania mediami?

  • <audio> – zawartość dźwiękowa, np. muzyka.
  • <video> – zawartość wideo.
  • <source> – opisuje link do źródła dźwięku lub wideo.
  • <embed> – kontener dla zewnętrznych aplikacji.
  • <track> – definiuje napisy do dźwięku lub wideo.

25. Jakie tagi HTML5 pomagają w lepszej strukturze strony?

  • <article> – pozwala na stworzenie artykułu.
  • <aside> – pozwala na tworzenie kontentu z boku innego kontentu.
  • <bdi> – część tekstu jest formatowana w innym kierunku niż reszta.
  • <details> – Dodaje dodatkowe szczegóły, które użytkownik może ukryć.
  • <dialog> – Uruchamia okno popup albo dialog.
  • <figure> – Grupa treści multimedialnych z podpisem, np ilustracja, zdjęcie, diagram itp.
  • <figcaption> – Dodaje podpis elementowi w <figure>.
  • <footer> – Stopka sekcji, chociaż zwykle całej używane jako stopka całej strony.
  • <header> – Nagłówek sekcji, chociaż zwykle używane jako nagłówek całej strony.

26. Co to jest SVG? Czy powinniśmy go używać?

SVG to akronim od Scalable Vector Graphic. Jest wspierane przez W3C, więc powinniśmy go używać. Zalety SVG:

  • Pozwala wyświetlić grafiki wektorowe na stronie.
  • Grafika SVG używa formatu XML.
  • Obraz SVG zwykle ma większą jakość niż zwykły, a do tego nie traci jej po zmianie rozmiaru.
  • Wszystkie elementy SVG wspierają animacje.

27. Co to jest Canvas?

Canvas to element HTML5, który może rysować grafikę w locie przy pomocy JavaScriptu. Element ten może w sobie zawierać tylko grafikę. Wspiera rysowanie takich elementów jak path, boxes, circle, text i image.

28. Jaka jest różnica między Canvas i SVG?

  • Canvas jest zależny od rozdzielczości, podczas gdy SVG nie.
  • Canvas nie pozwala na nasłuchiwanie na eventy, a SVg wspiera to i pozwala nasłuchwać na eventy.
  • Canvas jest dobry do gier opartych na grafice, podczas gdy SVG nie.
  • Canvas jest wydajniejszy przy małych renderowanych obszarach, podczas gdy SVG jest wydajniejsze przy dużych obszarach renderowania (np. Google Maps).

29. Czy HTML5 wspiera drag and drop? Jeżeli tak, to jak ustawić element jako draggable?

HTML5 wspiera drag nad drop. Aby ustawić element jako draggable, należy dodać atrybut draggable=”true”. Przykład:

<p draggable="true">Paragraf do przeciągania.</p>

Zdjęcia i linki są domyślnie draggable.

30. Czym jest semantyka tagów? Jak wygląda poprawny semantycznie kod?

Semantyka tagów to wykorzystanie tagów semantycznych zgodnie z ich znaczeniem. Poprawny semantycznie kod to taki, który wykorzystuje odpowiednie tagi do tworzenia odpowiadających im elementów na stronie, np. zamiast wszystko robić na <div> należy użyć <header>, <footer> czy <aside>

31. Do czego są używane tagi header i footer?

Tagi header i footer używane są, aby zachować poprawny semantycznie kod.

  • header określa nagłówek sekcji, chociaż zwykle używa się go, aby oznaczyć nagłówek strony, gdzie zwykle umieszcza się logo i menu strony.
  • footer określa sekcji, chociaż zwykle używa się go, aby oznaczyć stopkę strony.

32. Jaka jest różnica między tagiem SPAN i DIV ?

Obydwa tagi są wbudowanymi kontenerami.

  • DIV jest blokiem, więc semantycznie powinien mieć w sobie sekcje dokumentu.
  • SPAN jest wyświetlany w jednej linii z resztą zawartości (inline) i semantycznie powinien mieć w sobie tylko małe kawałki tekstu, zdjęcia itp., którym chce się nadać inny styl.

33. Jak otworzyć link w nowym oknie ?

Należy dodać target=”_blank”. Przykład:

<a href=”www.devkozak.com” target=”_blank”>Witaj na devkozak.com</a>

34. Czym jest iframe?

Jest to element HTML, który pozwala zawrzeć dokument HTML w innym dokumencie HTML.

35. Czym jest atrybut require?

Jest to atrybut tagów formularza, który nakazuje wypełnienie tagu wartością, zanim formularz zostanie wysłany. Nie można zaakceptować formularza, w którym jest tag z atrybutem required i ma pusta wartość. Przykład:

Imie: <input type="text" name="imie" required>

36. Ile jest typów tagu nagłówka i czym się różnią?

HTML daje nam do dyspozycji 6 tagów nagłówkowych, od <h1> to <h6>. Każdy z nich różni się ważnością. <h1> jest najważniejszy, <h6> najmniej ważny.

37. Jakich tagów używamy do wyświetlenia tabeli?

  • <table> – Definiuje tablicę.
  • <tr> – Definiuje wiersz w tablicy.
  • <th> – Definiuje komórkę nagłówka w tablicy.
  • <td> – Definiuje komórkę w tablicy.
  • <caption> – Definiuje podpis tabeli.
  • <colgroup> – Definiuje grupę jednej lub więcej kolumn w tablicy.
  • <col> – Definiuje kolumnę w <colgroup>.
  • <tbody> – Grupuje zawartość tablicy.
  • <thead> Grupuje zawartość nagłówka tablicy.
  • <tfoot> – Grupuje zawartość stopki tablicy.

38. Jakie znasz listy używane w HTML5?

Ordered list – Lista uporządkowana, inaczej numerowana, to lista, w której elementy mają swoje numery. Tworzy się ją tagiem <ol>

<ol>
  <li>element listy 1</li>
  <li>element listy 2</li>
</ol>

Unordered list – Lista nieuporządkowana, inaczej wypunktowana. Elementy nie są numerowane a po prostu wymienione po myślnikach. Tworzy się ją tagiem <ul>

<ul>
  <li>element listy 1</li>
  <li>element listy 2</li>
</ul>

Definition list – Lista opisowa. Wyświetla dane w postaci opisów, jeden pod drugim. Tworzy się ją tagami <dl>, <dt> and <dd>.

<dl>
 <dt>Tytul 1</dt>
 <dd>Opis 1</dd>
 <dt>Tytul 2</dt>
 <dd>Opis 2</dd>
</dl>

39. Co to jest marquee ?

Znacznik <marquee>…</marquee> wykorzystywany jest do przewijanego tekstu wewnątrz pola tekstowego.

40. Do czego użyjesz tagu span?

Span jest wbudowanym kontenerem. Sam nie przedstawia sobą niczego, a zwłaszcza nic semantycznego, ale można go użyć do pogrupowania treści, którym chce się nadać inny styl poprzez class czy id. Przykład:

<p>Jakis zwykly, czarny tekst <span class=”redText”>czerwony tekst</span> dalej czarny tekst</p>

41. Do czego jest używany tag head?

Tag dostarcza ogólnych informacji o stronie, takich jak metadane, tytuł, arkusze styli czy skrypty. Przykład:

<html>
  <head>
    <title>Tytuł</title>
  </head>
</html>

42. Czym są web workers?

Web Workers to nowe API, które pozwala uruchomić część logiki w oddzielnym wątku. Dzięki temu część UI nie jest blokowana podczas wykonania skryptu. Przykład:

var worker = new Worker('background.js');
worker.postMessage();
worker.terminate();

W pierwszej linii tworzymy Web Worker. Jako parametr przekazujemy adres (link) skryptu, który mamy wykonać w wątku. W drugiej linii uruchamiamy wątek, używając funkcji postMessage(), a w trzeciej linii kończymy wątek, używając funkcji terminate().

43. Czym są server-sent events ?

Server-sent Events to technika umożliwiająca strumieniowanie danych lub aktualizacji w czasie rzeczywistym z serwera do strony. Strona automatycznie dostaje nowe dane z serwera i coś z nimi robi po ich otrzymaniu. Przykład:

var source = new EventSource("sse");
source.onmessage = function(event) {
  console.log(event);
};

W pierwszej linii tworzymy nowy obiekt EventSource, który odpowiada właśnie za komunikację. Jako parametr przekazujemy źródło naszych aktualizacji. W drugiej linii dodajemy, co ma się dziać po otrzymaniu nowych danych.
Server-sent messages nie są wspierane przez IE oraz Edge.

44. Czym jest Web API?

Web API to ogólna nazwa na wiele interfejsów działających na stronie, na przykład API do modyfikowania strony przez DOM, API pozwalające na dostęp do różnego hardware (np. geolokacja) czy API pozwalające wykonywać zapytania HTTP.

Podsumowanie

Cieszę się, że dotrwałeś do końca. Dobra robota. Całkowicie przypadkowo znowu wyszły 44 pytania 🙂 Wygląda na to, że kolejne pytania z CSS, które pojawią się za tydzień, również będą miały ich 44. Jeżeli coś jest niejasne lub masz jakieś dodatkowe pytania, nie krępuj się i pisz w komentarzach. Na pewno odpowiem 🙂

Chciałbym również podziękować dla Pana użytkownika Comandeer ze strony https://www.comandeer.pl/ za wyłapanie błędów. Nikt nie spodziewał się webowej inkwizycji 😀

Jeżeli mi się udało, jeżeli ten wpis Ci pomógł – daj znać. Będzie mi bardzo miło, wiedząc, że komuś pomogłem 🙂



5 KOMENTARZE

  1. Bardzo fajny artykuł, sporo przydatnego info. Niemniej wkradło się kilka nieścisłości.

    > na przykład tagi `<image>` czy `<br>` nie potrzebują zamknięcia

    Akurat `image` potrzebuje, bo to znacznik z SVG, nie HTML 😛 W HTML-u był, ale usunięto go eony temu.

    > Element **doctype** mówi przeglądarce, jaki standard znaczników jest używany.

    To jest bardzo często powtarzany mit. `DOCTYPE` ma zupełnie inną rolę: wymusza renderowanie w trybie standardów, a nie quirks. I to wszystko co robi. Jest to zaznaczone w specyfikacji (https://html.spec.whatwg.org/multipage/syntax.html#the-doctype ):

    > `DOCTYPE`s are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.

    Nagłówek HTTP `Content-Language` nie służy do wskazywania języka treści strony, a – preferowanej grupy użytkowników. Za RFC (https://tools.ietf.org/html/rfc7231#section-3.1.3.2 ):

    > „`
    > The „Content-Language” header field describes the natural language(s) of the intended audience for the representation. Note that this might not be equivalent to all the languages used within the representation.
    > „`

    > – atrybut dir wskazujący na folder z tłumaczeniami

    Atrybut `[dir]` służy oznaczeniu kierunku tekstu (LTR lub RTL). Nie wiem, skąd się wziął folder z tłumaczeniami? Możliwe, że pomyliłeś atrybut z usuniętym znacznikiem `dir`, który był de facto zawsze synonimem listy → https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dir

    > `<keygen>` – generuje zaszyfrowany klucz

    Ten znacznik usunięto kilka lat temu.

    > – `<command>` – Polecenie wykonywane przez użytkownika.

    Ten znacznik usunięto kilka lat temu. Został następnie zastąpiony przez `menuitem`, które ostatecznie też zostało usunięte.

    > – `<hgroup>` – Nagłówek sekcji z wieloma śródtytułami.

    Ten znacznik nie działa, bo nie działa cały algorytm outline’u → https://developer.paciellogroup.com/blog/2013/10/html5-document-outline/

    Dodatkowo `header, footer` są na poziomie sekcji (zatem nagłówek sekcji i stopka sekcji), niekoniecznie całej strony. Warto też wspomnieć o `nav`.

    W HTML 5 nie ma tagów formatujących, wszystkie tagi są semantyczne. `b` służy oznaczaniu fragmentów tekstu bez dodawania im ważności, `i` służy do oznaczania terminów technicznych, nazw statków, terminów obcojęzycznych itd., `u` jest do oznaczania błędów w pisowni lub innych nietekstowych adnotacji, a `s` oznacza fragmenty tekstu, które nie są już dłużej prawdziwe w danym kontekście.

    Typy nagłówków różnią się rangą, nie rozmiarem tekstu. Rozmiar tekstu to warstwa prezentacji, a zatem – niezależna od CSS-a.

    > – `<caption>` – Definiuje podpis komórki.

    Definiuje podpis tabeli.

    > – `<tfooter>` – Grupuje zawartość stopki tablicy.

    Takiego znacznika nie ma, jest `tfoot`.

    > Definition list – Lista definicji. Wyświetla dane w postaci definicji jedno pod drugim.

    Nie ma już listy definicji, jest lista opisowa (wg HTML 5.x → http://w3c.github.io/html/grouping-content.html#the-dl-element ) lub lista klucz-wartość (wg HTML LS → https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element ).

    > Web Workers to nowe, dostępne od HTML5 API

    Web Workers nie są częścią HTML 5.x, są częścią HTML LS. W3C z kolei uważa je za osobny standard.

    > WebApi to interfejs komunikacyjny pozwalający na komunikację między użytkownikiem (zwykle przeglądarką) i serwerem. Korzysta z protokołu HTML i formatu JSON lub XML.

    Web API to ogólna nazwa każdego API sieciowego → https://developer.mozilla.org/en-US/docs/Web/Reference/API

  2. Fajny artykuł ale wiele pytań wydaje mi się trochę takich bez sensu… nie wyobrażam sobie aby ktoś miał pytać na rozmowie czym jest ID czy jak dodać JS do strony 🙂 Jest tu wiele pytań aż nadto oczywistych, że osoba kandydująca na front-end developera musi je znać. Zresztą jak czasami rozmawiam z ludźmi o rozmowach rekrutacyjnych to w 90% przyznają oni, że raczej rozmowy prowadzone są w kierunku ogólnego sprawdzenia poziomu wiedzy i myślenia kandydata. Wg tych pytań można by skreślić kogoś, kto np. dostanie pytanie co to czy marquee i nie będzie tego wiedział, bo może po prostu pracował nawet kilka lat z aplikacjami, gdzie po prostu tego nie używał. Ja przyznam, że też nigdy nie użyłem marquee i nie wiedziałem o nim, ale jeśli zaszłaby taka potrzeba to kwestia paru minut poczytania w dokumentacji i jedziesz…
    Zresztą od kilku osób, które uczestniczą w rekrutacjach też słyszałem, że bzdurą jest pytać np. co robi Array.prototype.every bo nawet jeśli człowiek tego nie wie, to doczyta w 2 minuty w dokumentacji… ale warto już np. porozmawiać o ogólnej koncepcji trzymania stanu aplikacji, o podejściu do problemu cachowania requestów itp. itd., coś o wzorach projektowych itp. itd.

    • Ogólnie – zgadzam się. Również uważam, że odpowiedź „znajdę to w 2 minuty w dokumentacji” jest poprawna, jednak na jakiejś bazie musisz ocenić kandydata. Kiedy zadasz 5 czy 10 pytań o JS/HTML/CSS/cokolwiek i usłyszysz „Przecież to 2 minuty szukania” i nic więcej – coś jest nie tak. Chciałbym, aby ten wpis był pomocą i źródłem nauki dla początkujących i szybkim przypomnieniem dla zaawansowanych frontendowców, ale tylko z HTML. Rzeczy w stylu cacheowanie stron, KISS, DRY itp. to rzeczy ważne, które pojawią się w innym wpisie. Nie jest ich miejsce we wpisie o HTML 😀
      Spotkałem się również z ludźmi, którzy na rekrutacji mylili podstawowe pojęcia z HTMLa lub w ogóle ich nie znali. Tutaj znajda pomoc i przypomnienie, więc uważam, że pytań prostych nie należy pomijać. A jakby chcieć tylko pisać o zaawansowanych rzeczach, to w sumie ciężko trafić w klucz „zaawansowane”. Dla jednej osoby połowa tego wpisu to zaawansowane rzeczy, innej jedno pytanie, trzeciemu czterdzieści pytań. Nigdy się nie trafi tak, żeby zadowolić wszystkich.
      Co do Marquee – jest po prostu ciekawym słowem, które oznaczać może cokolwiek, więc niektórzy używają tego jako podchwytliwego pytania 😀

ZOSTAW ODPOWIEDŹ

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.