https://github.com/webbestmaster/semantic-html

https://github.com/webbestmaster/semantic-html

Last synced: 28 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/webbestmaster/semantic-html
• Owner: webbestmaster
• License: mit
• Created: 2022-01-31T17:58:18.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-01T19:16:02.000Z (about 3 years ago)
• Last Synced: 2024-11-14T22:34:36.680Z (3 months ago)
• Language: HTML
• Size: 8.79 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Semantic-HTML

Цель: сделать примеры семантической вёрстки (далее СВ) с описанием и объяснением происходящего в них, то есть нужно постараться ответить на два вопроса "как делать СВ?" и "зачем делать СВ?"

Доклад по семантике от Макеева - https://www.youtube.com/watch?v=W5DgVWtitjQ&list=PLMBnwIwFEFHeD-j52BjuO2HMMw63fnBav&index=9

## План\содержание:

1 - каркас страницы, то есть тэги html, body, main, section и т.д.

1.1 - атрибуты по типу ltr\rtl и lang="en"

2 - как правильно расставить h1-h6

3 - правильно сверстать картинку - тег пиктуре и имаге - https://www.youtube.com/watch?v=7EhpWOkNfZg - вот тут доклад Макеева про пиктуре

4 - как правильно сверстать форму, тэги инпут тайп емаил, тел и т.д.

5 - role and ARIA, role="button" aria-label="open popup"

6 - figure, figcaption - тоже добавить

7 - обязательно упомянуть тэги списка, цитаты

8 - обязательно упоменять микро разметку\опен граф\вот это всё и что бы можно было указать например автора, и когда статься была написана

9 - как мне кажется хороший пример семантики каркаса - https://medium.com/@stasonmars/%D1%81%D0%B5%D0%BA%D1%80%D0%B5%D1%82%D1%8B-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D1%81%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B8%CC%86-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B8-%D0%B2-html5-c7cd5e6f1ebb

## Дополительно

аттрибует hidden который без всяких css стилей скрывает элемент, это работает за счёт встроенный стилей браузера