Witaj,
Na sam początek odpowiedzmy na pytane czym jest semantyka. Najprościej mówiąc jest to używanie znaczników zgodnie z ich przeznaczeniem, można wyróżnić 2 poziomy semantyki. Pierwszy z nich to semantyka w kontekście przeglądarek lub programów, których zadaniem jest pomoc osobą z niepełnosprawnościami w poruszaniu się po internecie. Jako drugi poziom można wyróżnić semantyke dla zwykłego użytkownika, wyobraź sobie, że jedynym znacznikiem jakiego używasz jest <div>. Odpowiednio ostylowany <div> może wyglądać jak np <h1>, ale załóżmy, że z jakiś przyczyn css nam się nie wczyta, jeżeli zastosowaliśmy <h1>, to użytkownik nadal będzie mógł się domyślić(po domyślnym wyglądzie), że to h1 - patrz tu.
Przejdźmy do sedna, ogólnie dobrze zauważyłeś, że elementy nawigacji mają ułożenie przypominające listę, dlatego użycie <ul> jest zasadne. Nawigacja jak sama nazwa wskazuje jest komponentem nawigacyjnym, czyli powinna znajdować się w znaczniku <header> zgodnie z jego definicją. Ogólnie podstawowy schemat głównego menu powinien wyglądać mniej więcej tak: header->nav->ul->li->a
Co do modelu pudełkowego to nie ma on nic wspólnego z semantyką, ponieważ dotyczy on css'a - zerknij tu.
Podsumowując, semantyka to używanie znaczników zgodnie z ich przeznaczeniem, schemat menu głównego przedstawiłem powyżej, warto zaznaczyć, że istnieje jeszcze coś takiego jak ARIA - zostawiam do samodzielnego zapoznania się. To z jakiej metody skorzystasz do ostylowania i zapewnienia RWD menu to już sprawa css'a.
Polecam również zapoznać się z wpisami comandeer'a