TML: Web page skeleton

Содержание и основные понятия

Back to the table of contents
Alterna · Chapter 8 · page 8.1
TML: Web page skeleton
HTML (HyperText Markup Language) is a mark-up language that defines the structure and content of each web page.
HTML
- It's not a programming language.
markings
: You turn the text into a tag so that the browser knows how to project it.
Every web page you see, from Yandex to Wikipedia, is built on HTML. CSS adds styles, JavaScript is interactive, but the skeleton is always HTML.
GEF · Basic
PLF · Infred
01
HTML document structure
Anatomy of any web page: DOCTYPE, Head, Body
Minimum page
Each HTML file starts with the same skeleton:
<!DOCTYPE html>
<html
lang
=
"ru"
>
<head>
<meta
charset
=
"UTF-8"
>
<title>
My page.
</title>
</head>
<body>
...the contents...
</body>
</html>
What every element does
Element
Appointment
<!DOCTYPE html>
The declaration of document type (HTML5) is not a tag, but an instruction to the browser.
<html>
The root element.
lang
indicates the language for searchers and screenriders.
<head>
Metadata: tab title, coding, styles, scripts.
I can't see.
See page.
<meta charset>
Codes of symbols.
UTF-8
- supports all the languages of the world.
<title>
It's important for SEO.
<body>
All visible contents: text, pictures, buttons, shapes.
Analogies
TML document = book.
<head>
- Cover and list (for librarian).
<body>
— The text itself (for the reader).
02
Text tags
Headings, paragraphs, selections, links, images
Headings h1 - h6
Six levels of headlines.
<h1>
— The most important (one per page),
<h6>
- the smallest.
Absats and transfers
<p>
- Paragraph (blocked text with derogations).
<br>
- Forced transfer of the line.
<hr>
- A horizontal separation line.
Selection of text
Tag
Effect
When to use
<b>
Fat
Visual selection without a meaningful accent
<strong>
Fat + important
Smooth focus (important information)
<i>
Course
Visual italics
<em>
Curve + impact
Logical impact in the sentence
<code>
Моноширинный
Code fragments, commands
<mark>
Illumination
Selection of found text
<del>
Deleted
Deleted/old text
References
<a href="URL">текст</a>
- hyperlink.
href
- address (URL or
#якорь
)
target="_blank"
- Open in a new tab
title
- A pop-up clue
Images
<img src="путь" alt="описание">
- a self-closing tag.
src
- the path to the file (relationship or UrL)
alt
- a description for the scanners and for loading error
width
/
height
- Dimensions in pixels
Important
Always point.
alt
It's for accessibility (blind users), SEO, and when the image hasn't downloaded.
03
Lists and tables
Structure data: marked, numbered lists and tables
Lists
Type
Tags
Example
Marked
<ul> → <li>
• Item 1 • Item 2
Numbered
<ol> → <li>
1. Item 1 2.
Definitions
<dl> → <dt> + <dd>
Definition
Lists are available
Investment
:
<li>
may contain an input
<ul>
or
<ol>
.
Tables
<table>
<thead>
♪ The hat
<tr>
♪ line
<th>
First name
</th>
:: Heading
<th>
Age
</th>
</tr>
</thead>
<tbody>
Body
<tr>
<td>
Anya.
</td>
:: Normal units
<td>
15
</td>
</tr>
</tbody>
</table>
Council
Tables are for table data only! Do not use tables for modeling; for this there are CSS Flexbox and Grid (chapter 8.2).
04
Forms
Fields of entry, buttons, checkboxes -- everything the user interacts with.
Element formula
<form action="/submit" method="POST">
- a field-entry container.
action
- where to send the data,
method
- GET or POST.
Input types
type
View
Application
text
Single-line text field
Name, search
email
Email Field (checking @)
Sign up
password
Hidden input ()
Passwords
number
Numerical field(s)
Number, age
checkbox
Flag
Consent, multiple choice
radio
Switch
One of several
date
Selection of date (calendar)
Date of birth
range
Slider
Volume, brightness
file
Uploading File
Avatar, document
submit
Send button
Send Form
Other elements of forms
<textarea>
- Multiline Text Field
<select>
+
<option>
- falling list
<label>
- signature to the field
for="id"
)
<button>
- Universal button
Relationship to Chapter 4
Remember the forms in Chapter 4 (security)? Now you know how they're made from the inside.
required
Makes the field compulsory,
pattern
- checking the format with a regular expression.
05
Semantic elements
Themes that explain the meaning of the contents, not just its kind
Why Semantics?
You can make the whole page out of
<div>
and
<span>
But semantic tags:
Helping
search engines
understand structure (SEA)
Helping
Screenriders
(accessible to the blind)
Make Code
Read
For developers
Main semantic tags
<header>
<nav>
<main>
<article>
<section>
<section>
<aside>
<footer>
Figure 1.
Semantic Page Structure
Tag
Appointment
<header>
Page or section hat (logotype, navigation)
<nav>
Navigation menu
<main>
Main content (one per page)
<article>
Self-contained unit (article, post, goods)
<section>
Content cluster
<aside>
Side panel, additional information
<footer>
Basement (copirite, links, contacts)
<figure>
Signed example (<figcaption>)
<details>
Opening block (FAQ)
📖
HTML-Teg Handbook
50+ tag · filtering by category
Interactor
Click on the filtering category. click on the tag to see the code example.
✏️
Living XML Editor
Write the code to the left · see the result to the right
Interactor
Edit the XML -- the playback is updated instantly. Use the presets to start quickly.
localhost/preview