Basics of html for beginners in a clear language. HTML Basics for Beginners HTML Programming for Beginners
HTML stands for H yper T ext M arkup L angle, i.e. Hypertext Markup Language is the basic building block of web pages and is used to create and visualize web pages.
The HTML language adds markup to plain text. Hypertext contains various links through which web pages are linked to each other. With HTML, anyone can create both static and dynamic websites. HTML is a language that describes the structure and semantics of the content of a web document. Web page content is marked up with tags that represent HTML elements. Examples of such elements are , ,
and so on. These elements form the building blocks for any website.
HTML was invented in 1991 by a scientist, Tim Berners-Lee, and was originally intended for the exchange of documents between scientists from different universities. With his invention, Tim Burns-Lee laid the foundation for the modern Internet.
There are several versions of HTML. The language standard is continuously updated and supplemented, the consequence of this is that a new version of HTML is released almost every year. Version "HTML 2.0" was the first standard HTML specification, which was published in 1995. HTML 4.01 is the major version of HTML that was published in late 1999 and is widely used today. Today, the most popular version is HTML-5, which is an extension of HTML 4.01 and was published in 2012.
An HTML document or web page is a simple text document containing tags (which are plain text enclosed in angle brackets<имя тэга>). A web page can be typed both in a regular text editor (Notepad, WordPad, Word, etc.) and in a specialized one with code highlighting (Notepad++, Sublime Text, etc.). HTML documents are stored as .htm or .html files.
Online examples in every lesson
During the course of the presentation, each lesson will provide examples that will help you understand each code in detail and, through practice, enjoy learning. With our online HTML editor, you can edit an HTML document and then click the editor's orange "Run" button above the left editor window to see the result. If you use a specialized HTML editor, then you can copy the example and view the results of your work in the browser installed on your computer.
HTML example:
Try it yourself
Page Title
This is the title
This is a paragraph.
Online HTML Examples
The HTML Tutorial has over 100 online examples for you to easily master the markup language. Better to see once than hear a hundred times! Theory plus practice is the key to your success in mastering HTML.
HTML Basics contain the basic rules of the HTML language, a description of the structure of an HTML page, relationships in the structure of an HTML document between HTML elements.
An HTML document is a plain text document, it can be created in the same way as in a regular text editor. (Notebook), and in a specialized one, with code highlighting (Notepad++, Visual Studio Code, etc.). An HTML document has the .html extension.
An HTML document consists of a tree of HTML elements and text. Each element is identified in the source document by a start (opening) and an end (closing) tag (with rare exceptions).
Start tag shows where the element starts, end - where it ends. Closing tag formed by adding a slash / before the tag name:<имя тега> … имя тега>. Between the start and end tags is the content of the tag - content.
Single tags cannot store content directly, it is written as an attribute value, for example, a tag will create a button with text Button inside.
Tags can be nested within each other, for example,
Text
. When investing, you must follow the order of their closing (principle of "matryoshka"), for example, the following entry would be incorrect:
Text
.
HTML elements can have attributes (global, applied to all HTML elements, and their own). Attributes are written in the opening tag of an element and contain a name and value specified in the format attribute name="value" . Attributes allow you to change the properties and behavior of the element for which they are set.
Each element can have multiple class values and only one id value. Multiple class values are written with a space,
. The class and id values must contain only letters, numbers, hyphens, and underscores, and must begin with letters or numbers only.
The browser views (interprets) an HTML document, building its structure (DOM) and displaying it in accordance with the instructions included in this file (style sheets, scripts). If the markup is correct, then an HTML page containing HTML elements - headings, tables, images, etc. will be displayed in the browser window.
Interpretation process (parsing) starts before the web page is fully loaded into the browser. Browsers process HTML documents sequentially from the very beginning, while processing CSS and relating style sheets to page elements.
An HTML document consists of two sections - the heading - between the tags
… and content - between tags … .
Web page structure
1. The structure of the HTML document
The HTML language follows the rules contained in the document type declaration file. (Document Type Definition, or DTD). A DTD is an XML document that defines which tags, attributes, and their values are valid for a particular HTML type. Each version of HTML has its own DTD.
DOCTYPE responsible for the correct display of the web page by the browser. DOCTYPE defines not only the HTML version (e.g. html), but also the corresponding DTD file on the web.
...
Elements within a tag , form a document tree, the so-called document object model, DOM (document object model). At the same time, the element is the root element.
Rice. 1. The simplest structure of a web page
To understand the interaction of the elements of a web page, it is necessary to consider the so-called "family relationship" between elements. Relationships between multiple nested elements are classified into parent, child, and sibling relationships.
Ancestor An element that contains other elements. In Figure 1, the ancestor for all elements is . At the same time, the element
is the ancestor of all the tags it contains:
,
, ,
Descendant- an element located inside one or more types of elements. For example,
is a descendant , and the element
Is a child of both
and .
parent element- an element associated with other elements of a lower level, and located on the tree above them. Figure 1
and . Tag
Is parent only to .
child element- an element directly subordinate to another element of a higher level. In figure 1, only elements
,
,
And
sister element- an element that has a common parent element with the element under consideration, the so-called elements of the same level. Figure 1
and - elements of the same level, as well as elements
,
and
They are sisterly to each other.
1.1. Element
1.2. Element
Chapter
... contains technical information about the page: title, description, keywords for search engines, encoding, etc. The information entered in it is not displayed in the browser window, but contains data that tells the browser how to process the page.
1.2.1. Element
Required section tag
is the tag . The text placed inside this tag is displayed in the title bar of the web browser. The length of the title should be no more than 60 characters in order to completely fit in the title. The title text should contain the most complete description of the content of the web page.
1.2.2. Element
Optional section tag
is a single tag . With it, you can set a description of the page content and keywords for search engines, the author of the HTML document, and other metadata properties. Element can contain multiple elements , because depending on the attributes used, they carry different information.
Description of the page content and keywords can be specified simultaneously in several languages, for example, in Russian and English:
With a tag you can disable or allow indexing of a web page by search engines:
To automatically reload the page after a specified period of time, you need to use the refresh value:
The page will reload in 30 seconds. To redirect the visitor to another page, you need to specify the URL in the url parameter:
Table 2. Tag attributes
Attribute
charset
Specifies the character encoding for the current HTML document:
content
Contains arbitrary text that specifies the value associated with the http-equiv or name attribute, depending on their value.
http-equiv
Controls browser actions on this web page (equivalent to HTTP headers). When displaying the page, the browser will follow the instructions given in the attribute: default-style specifies the preferred style to use on the page. The content attribute must contain the id of the element , which refers to a CSS style sheet, or an element ID
using element . The element does not require a closing tag. This element defines the relationship between the current page and other documents. There can be several such elements on a page. The entry will look like this:
Table 4. Tag attributes
Attribute
Description, accepted value
crossorigin
Specifies whether CORS (a browser technology that allows a web page to access resources from a different domain) should be used when fetching an image from a site. anonymous - in a cross-domain request, the browser automatically adds an Origin header containing the name of the domain from which the request was made. If the server does not respond with a CORS header Access-Control-Allow-Origin: * (or a domain name instead of an asterisk), then the image will be blocked from loading. use-credentials - if the server does not provide credentials with Access-Control-Allow-Credentials: true , then the image will be blocked from loading.
href
The main attribute of the tag, the value is the path to the file with styles.
hreflang
Specifies the language of the text in the linked document.
media
Specifies the type of device to which the link resource is to be applied.
nonce
A server-side randomly generated string variable that sets the rules for using inline styles to protect content. The value of the attribute is a string of text.
rel
The attribute defines the relationship between the current document and the referenced document. alternate - a link to the same document but in a different format (for example, printable pages, translation, mirror, RSS or Atom feed),
.
archives indicates that the linked document is of historical interest. The link can point to a collection of records, documents, and other materials. author link to the page about the author of the document or to the page with the author's contact details. bookmark A reference to the closest ancestor of the article that is the link, or to the section of the article most closely related to the element if there is no ancestor. external is used to indicate that the linked page is not part of this site. first specifies a link to the first document in a sequence of documents. help link to a help document. icon specifies the path to the icon to be used for the current document. last specifies a link to the last document in a sequence of documents. license A link to the copyright information for the document. next indicates that this document is part of a series, and that the link points to the next document in the series.
nofollow indicates that the link is not approved by the author of the page, or that the link is commercial. noreferrer specifies that the client request header containing the request source url should not be passed when following the link. pingback specifies the address of the pingback server, which allows the blog to automatically notify sites linking to it. prefetch specifies that the referenced file should be cached beforehand. prev indicates that this document is part of a series and that the link points to the previous document in the series.
search indicates that the referenced document contains a search interface and related resources. sidebar indicates that the linked document, if possible, will be shown in an additional browser context, and some browsers, when the hyperlink is clicked, will open a window for adding the link to the bookmarks bar. stylesheet is a reference to an external file that will be used as the style sheet for this document. tag indicates that the tag to which the hyperlink leads belongs to this document. up indicates that the page is part of a hierarchical structure, and that the hyperlink leads to a higher level resource in the structure.
sizes
Specifies the size of icons for visual display. The sizes attribute is only used in conjunction with rel="icon" , and can take the following values: widths height - specifies a list of sizes separated by spaces, each size must be in the format - widths height (icon sizes are specified in pixels), for example:
; any - the icon can be scaled to any size.
title
Specifies the title of the link or the name of the set of alternative style sheets. The attribute value is text.
type
Specifies the MIME type of the document being linked to. In this case, it takes the value "text/css" .
1.2.5. Element
Таблица 5. Атрибуты тега
Document Body
Note that HTML documents have the extension .html.
So, in order from the example.
- document type (doctype)
This construction is always indicated at the beginning of the document so that the browser correctly "understands" which version of HTML is used when building the document.
Due to the fact that HTML is constantly evolving, it has several versions, like any software product. The current HTML version is the fifth and given in the example doctype is up to date.
In principle, there is no point in delving into the study of document types, because with the release of HTML5, this design has become a standard. Just paste it at the beginning of the document every time you start laying out the layout of the site.
- the beginning of the document
The first tag we see after the doctype is .
HTML tag- structural unit of markup of an HTML document. HTML code is made up of building blocks called tags. Each tag has its own function, and learning the HTML markup language is ultimately about learning the tags and their properties in the document.
I would like to note that learning HTML is not such a difficult task as it might seem at first glance. Learning the tags used in document markup is not such a big load on the brain.
So, the document markup starts with the tag and ends with a closing tag. Each tag that contains other tags or elements must be closed closing tag. For example, , ,
, etc.
Tag is required because it contains the entire structure of the document and wraps the rest of the elements.
Tag
Next, we see tag
, which contains other elements that are not yet clear to us. Contains other elements - this means that the elements or tags are between the opening and closing tags of the construct:
<тег>content or other tagsтег>
Tag
is designed to store the meta-information of an HTML document, that is, information that is not displayed in the document itself, but is important and largely determines how the document will look and behave. This tag is required in the document.
Tag - title of the document
header
header
is required tag A that contains textual meta-information that is displayed in the title of the browser or tab. Tag must be in the tag . Also, the content of this tag is used by search engines to display the document in the search results.
Meta tag
Meta tag- a specialized tag designed to provide structured data about a page. Meta tags are most often used in a tag
. Meta tags are optional in structure HTML document.
Favicon (favicon)
Attaches a file with a favicon image to the document. Favicon (favicon)- a miniature icon displayed next to the document name in the browser tab. A favicon is a 16 x 16 (or 32 x 32) pixel graphic file that can be in various formats such as png, jpg, ico, gif. The ico format is traditionally used. Animated favicons are gif files containing animation. You can watch an animated favicon, for example, on VKontakte when a new message arrives.
CSS document styles
Attaches an HTML styling file to a CSS document.
css - cascading styling of the HTML document. Each tag that is in the tag
, there is a set of properties, such as - color, width, height, position relative to other elements. All these properties are CSS styles that can be taken out to an external file. Design connects external files to the HTML document, including CSS styles.
Note: property href designs specifies the location of the external file. In our example, the file style.css and favicon.ico, are in the same folder as the file index.html. does not have a closing tag.