homeUsageRules html general rules shields g2. HTML language rules. Use shorthand properties and values
Rules html general rules shields g2. HTML language rules. Use shorthand properties and values
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. learn more
Sharing is caring!
Attribute of what does
do? Was used to specify the display of internal borders between rows and columns. This attribute has been deprecated. Use CSS to style table borders instead.
The Rules Attribute has been Deprecated This attribute has been deprecated and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use CSS to style tables.
The RULES Attribute
RULES , an HTML 4.0 attribute, indicates if there should be internal borders in the table. We"ll go over each of the values of RULES and demonstrate how they are used. RULES and FRAME have an annoying way of changing each other"s defaults. To simplify your life, here"s a rule of thumb: if you use RULES also use FRAME and BORDER . It"s easier to avoid getting confused.
The NONE Value for the RULES Attribute
RULES=NONE means that there are no inside borders. RULES=NONE is the default if you don't use BORDER or set it to zero, but otherwise must be explicitly stated to have no inside borders. Note that currently Netscape does not recognize RULES .
Name
food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
The ALL Value for the RULES Attribute
RULES=ALL indicates that all the internal borders should be visible. RULES=ALL is usually used in conjunction with FRAME=VOID so that there are outer borders but no inner borders.
When applied to a table, that value gives us this result:
Name
food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
The COLS Value for the RULES Attribute
COLS indicates that there should be borders between the columns but not between rows.
When applied to a table, that value gives us this result:
Name
food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
The ROWS Value for the RULES Attribute
RULES=ROWS indicates that there should be borders between rows but not between columns.
When applied to a table, that value gives us this result:
Name
food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
The GROUPS Value for the RULES Attribute
RULES=GROUPS allows you to put borders between groups of table cells. There are two ways cells can be grouped: by row and by column. Let's go over each of them. Note that currently Netscape does not recognize RULES .
Grouping By Row
To group by row use the ,
, tags. indicates the header rows of the table, indicates the main body of the table, and indicates the bottom rows. So, for example, this code creates a table with three groups. Borders appear just between groups:
Name
food
price
Starflower
stir fied tofu
5.95
Miko
vegetable rice soup
4.95
Andy
hummus
3.95
Ping
french toast
5.95
Total
20.80
Here's how that table renders:
Name
food
price
Starflower
stir fied tofu
5.95
Miko
vegetable rice soup
4.95
Andy
hummus
3.95
Ping
french toast
5.95
Total
20.80
Grouping By Column
To group by column use the
tag and its SPAN attribute.
takes a little getting used to because it doesn't actually go around any table cells. It goes at the top of the table code where it sets rules about the table columns including which are grouped together.
to indicates how many columns are in each group. If you leave SPAN out then it is assumed the group has just one column. So, for example, the following code says that the first column is in a group by itself and the three after that are together in a group. Notice that
requires an end tag. Borders will go only between the groups.
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.
HTML document is normal Text Document, can be created as usual 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 according to the instructions included in this file (stylesheets, scripts). If the markup is correct, then the browser window will display an HTML page containing HTML elements - headings, tables, images, and so on.
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 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.
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-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 that is 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 will, if possible, be shown in an additional browser context, and some browsers, when the hyperlink is clicked, will open a window to add 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 - defines 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" .