SEMANTIC LAYOUT OF SITES. HTML tags and practical examples of semantic layout for beginners
In this video, I will talk about such a phenomenon as the semantic layout of sites. And I will not only tell, but also show everything in practice.
So what is semantics? In general, semantics is the science of the meaning of words and their influence on the perception of speech by other people. It studies the ways in which people understand and use language.
How does semantics work in website development? Probably, many of you believe that semantic layout is a banal presence in the code of a certain set of HTML tags and that's it. Yes, certain tags are indeed used and we, in this video, will study them, but the main point and difficulty is that first you need to correctly define this or that element in the design layout and only then implement it in HTML using the appropriate, as much as possible apt, tags.
Semantic layout helps improve the accessibility and SEO optimization of a website because it allows search engines to easily understand the content of a page and display it in search results. In addition, correct semantic markup allows users with disabilities to use special technologies, such as screen readers, to access site content. Therefore, such concepts as semantic layout and accessibility are inseparable. Although accessibility itself is the topic of a separate video.
Therefore, the main goal of semantic layout is to create an understandable and accessible website.
Lesson materials:
✅ Layout - drive.google.com/file/d/11mCk...
✅ Tags - fls.guru/semantics-tags.html
✅ Code examples - fls.guru/semantics-code.html
Services:
✅ Inclusion validator: caninclude.glitch.me/
✅ HTML validator: validator.w3.org/
00:00 - In class
00:24 - What is semantics?
00:39 - What is semantic layout?
02:12 - Semantic HTML tags
03:06 - Tags H1-H6. Semantic HTML tags for content
04:19 - Tag P. Semantic HTML tags for content
05:14 - Tag A. Semantic HTML tags for content
05:50 - Tags UL LI, OL LI. Semantic HTML tags for content
06:21 - Tags DL, DT, DD. Semantic HTML tags for content
07:00 - Tags IMG, VIDEO, AUDIO. Semantic HTML tags for content
07:20 - Tags FIGURE, FIGCAPTION. Semantic HTML tags for content
08:13 - Tags TABLE, TR, TH, TD. Semantic HTML tags for content
08:48 - Tags Q, BLOCKQUOTE, CITE. Semantic HTML tags for content
09:35 - ADDRESS tag. Semantic HTML tags for content
10:24 - TIME tag. Semantic HTML tags for content
10:52 - Tags DETAILS, SUMMARY. Semantic HTML tags for content
11:59 - Tags MARK, SPAN. Semantic HTML tags for content
13:32 - Tags STRONG, B. Semantic HTML tags for content
14:31 - EM tags, I. Semantic HTML tags for content
15:29 - Tag FORM. Semantic HTML tags of forms
16:12 - Tags INPUT, TEXTAREA, SELECT, OPTION. Semantic HTML tags of forms
17:12 - LABEL tag. Semantic HTML tags of forms
18:00 - Tags FIELDSET, LEGEND. Semantic HTML tags of forms
18:46 - The BUTTON tag. Semantic HTML tags of forms
20:32 - HEADER tag. Semantic HTML tags of constructions
22:03 - Tag FOOTER. Semantic HTML tags of constructions
22:35 - Tag MAIN. Semantic HTML tags of constructions
23:06 - Tag ASIDE. Semantic HTML tags of constructions
23:29 - Tag NAV. Semantic HTML tags of constructions
24:23 - SECTION tag. Semantic HTML tags of constructions
25:08 - ARTICLE tag. Semantic HTML tags of constructions
26:02 - Tag DIV. Semantic HTML tags of constructions
26:37 - Nesting of tags, validation
28:54 - Practical examples of semantic layout
31:56 - Layout analysis and construction of semantic structures
40:42 - Conclusion