HTML tags are usually both opening and closing tags. These two tags form an element, and between them is some text. It turns out that the element of HTML is the whole code, from the opening tag to close.
Important! Hypertext elements with no content are called empty. Such elements in addition to everything else missing and closing tag. Among these elements is the tag indicating the transition to a new line – br.
Embedding HTML elements one inside the other
Hypertext elements may well be within other HTML elements. This practice is so common that absolutely all web pages consist of HTML elements that contain other elements inside them.
The html tag is the container for all hypertext markup. It has both an opening html tag and a closing /html tag. Every web page has at least two elements which always have some content inside: the header and the body. The first tag contains data about the page, which are used by search engines during indexing. In it, the developers prescribe tags such as meta and title. The end user from seeing the information prescribed in them can not. Content visible to the visitor to the website is placed in the body element.
This HTML tag contains the so-called “body” of the page. It also has an opening body tag and a closing /body tag. Inside the body is also an h1 element, which wraps the title of the main content and p – article.
The h1 tag contains the title. It has an opening and closing tags, just like the previous elements.
The element p stands for the main content of the page – the content for which the user actually goes to the page.
However, some elements of hypertext markup, the browser can interpret correctly, even if they do not have a closing tag. Do not think that this is true absolutely always. If you never put a closing tag, you can get the most unpredictable and surprising results.
Markup elements that do not contain content
There can be elements in HTML that have absolutely no content. In this case, they are called empty tags. As an example of an empty tag, we can take the element br. It has no end tag, it just breaks up the text string. Sometimes they are written directly as a closing tag, such as /br.
The HTML Version 5 specifications do not specify that an empty tag must be closed. However, in cases where the developer wants to achieve a stricter validation, or to make it easier for XML parsers to analyze it, all hypertext markup tags must be properly closed.
What case do I need to use for tags in HTML version 5?
All hypertext markup code can be written in whatever case it is convenient for developers. For example, tag p will be read by the browser in the same way as tag P. The HTML Version 5 specification does not require developers to write lower case, but the W3C handbook advises to use lower case, and requires more restrictive standards (such as XHTML) to use lower case letters only.
Important! W3C advises that you write tags in lower case (lower case).
HTML5 Parameters
Parameters give you more information about markup elements:
- absolutely any markup element can have certain parameters;
- parameters give the browser additional information about the tag;
- parameters are absolutely always written at the beginning of the opening element tag;
- parameters are usually a name/value pair, for example parameter_name=”value”.
Parameter href
Hyperlinks in the markup are specified by the a tag; the url itself is written as the href parameter value.
It is also possible to navigate to a page by setting the href attribute values by specifying the location of the href link via the name parameter:
<body>
<p><a href="#1">Paragraph 1</a></p>
<p><a href="#2">Paragraph 2</a></p>
<a name="1"></a>
<h3>Parameter href</h3>
Applying the href parameter to navigate the page
<a name="2"></a>
<h3>Parameter src</h3>
Paragraph text
<p><a href="https://domhtml.ru/">Hyperlink</a></p>
</body>
Parameter src
Images in the HTML markup are wrapped in an img element. The name of the file from which the browser will take the image is given as the value of the src parameter.
Parameters that specify width and height: as a rule, images in the HTML markup have parameters that determine the size, namely the height and width of the image:
<img src=" image.png " width="480" height="240">
These image parameters are specified in pixels. width=”480″ means that the width of the image will be 480 pixels. Correspondingly, height=”240″ sets the height to 240 pixels.
Parameter alt
This attribute specifies some text that the site visitor will see if you can not show the picture (for example, if there is no picture). The value of the alt parameter can be considered as text. For example, visually impaired or even blind people “listen” to HTML-document, using a speech synthesizer. If a picture has an alt attribute, he will be able to understand what was depicted in this illustration.
<img src="image.png" alt="Car">
Besides, the alt parameter is useful if there is no file where the picture is stored – in its place the user will see the text prescribed in the alt parameter.
Parameter style
This attribute is used when you want to set the style of the content wrapped in a tag. The style parameter can be used to set the text color, font size, etc.
<p style="color:red">This content is red</p>
In order to highlight areas of focus, it is recommended to write the style parameter.
Parameter lang
The language in which the web page content is written is most often declared in the opening html tag. For this purpose, the lang parameter is used. Prescribe the language needed if the page will be “listened to” by visually impaired people with special programs. It also simplifies the search algorithms, and as a consequence serves internal search engine optimization.
<!DOCTYPE html>
<html lang="en-US">
<body>Contents of a web document</body>
</html>
As seen in this example, the language is coded with two lowercase letters. If a dialect is to be coded, an additional two letters representing the country are added.
Parameter title
This refers to the parameter appended to tag p. If you put the cursor over such a paragraph, a tooltip with the value of the title attribute will appear.
Important! Do not confuse this parameter with the tag from the head, section, which contains the title of the page.
Using the title parameter to make a tooltip: place the cursor on the first paragraph and the text from the title parameter will appear as a tooltip. Note, however, that this parameter will not work on touchscreens.
<head>
<title>Parameter title</title>
</head>
<body>
<p title="Important information">An example of a tooltip</p>
</body>
How to fill in the parameters
Use lower case letters when entering attribute values: the HTML fifth version specifications do not say that only lower case letters should be used. Any attribute can be written in whatever case you like. However, the W3C advises using lower case and requires it when it comes to XHTML. The W3C itself always writes parameter names in lower case.
Put the parameter value in quotes: s with lower case, there is no requirement to use quotes in the HTML version 5 specifications. For example it’s OK to write href this way:
<a href=https://domhtml.ru/tag-a-v-html/>Tag a in HTML</a>
The W3C treats this like everything else: Preferably in HTML and preferably in XHTML. This is needed because quotes are sometimes needed – e.g. for the title attribute:
<p title=Important information>An example of tooltip</p>
Here the tooltip will not be correctly displayed because the title contains a value with a space. When using such code the user will only see “About” in the tooltip.
Important! Most often quotation marks are placed, because errors may occur without them. W3C always puts parameter values in quotes.
Single or double: more often developers put double quotes, but nobody forbids to use single quotes. Well, if the value is text in double quotes, the entire value is placed in single quotes.
<p title="John Shorty Nelson">
The opposite example.
<p title="John 'Shorty' Nelson">
So, what have we learned about attributes (parameters)?
- Any tag in hypertext markup code can have an attribute;
- title gives more information about the visible object on the page;
- an href tells us the URL of a link;
- width and height give the size of the picture;
- alt gives the text to be read on the screen;
- W3C always write parameter names in lower case and put their meaning in double quotes.
Basic elements in HTML5
Headings in HTML5
These elements are defined by tags of type hN. In this case, the main header, which will be assigned the largest font, is specified by the tag h1, while the least important (and therefore written in the smallest font) – h6.
<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>
<h4>Header4</h4>
<h5>Header5</h5>
<h6>Header6</h6>
All browsers indent the line before and after absolutely any header.
Importance of headings: search algorithms such as Google or Yandex focus on headings when they index a page. Visitors browse web documents by headings. Headings allow text to be structured and provide structure data to search engines. The h1 header is used to indicate the main content on the page, while the others mark subsections in order of importance. Title tags should be wrapped around headings only. If you need to make the text a larger font or bold, style sheets are used.
Large headings: absolutely all of the headings in HTML have a default size. But developers have the ability to set the size he likes, using the parameter style:
<h1 style="font-size:50px;">Header</h1>
Horizontal separators
There is a tag hr (horizontal rule – horizontal separator, a strip), which is put in order to thematically separate one part of the page from another. This tag is also put by creators of sites to separate the modified portion of the Web document from the original.
The hr element is used for a thematic break between paragraph level elements.
<p>Text above the line</p>
<hr>
<p>Text below the line</p>
Paragraphs or Paragraphs in HTML
There is a certain element that wraps paragraphs: the р tag. All browsers make a vertical indent before and after a paragraph.
How can I control how the web document appears on different screens? It is not possible to control this completely. The result will vary from display to display. Unfortunately, extra spaces or empty lines are automatically removed by the browser.
<p> This paragraph has a
many lines in the source code,
but the browser does not see them.</p>
<p>This paragraph
has many spaces
in the source code,
but the browser can't see them.</p>
Change to a new line
The br tag is used for this. Importantly, it does not create a new paragraph.
<p>This<br>paragraph<br>with line jump, no vertical indentation.</p>
This element is a single line jump element and does not require an end tag.
Tag pre
This element wraps the reformatted text. If you wrap a verse in it, all spaces and line breaks are preserved. Unfortunately, if you just start typing from a new line, the whole text will be displayed by the browser on one line. In other words, how many characters were in a line, that’s how many the browser will show the user.
<p>Semantic markup of site pages</p>
<p>In addition to the logical structure of the pages of the site in the specifications of the fifth version of HTML there is semantic markup.</p>
This is the easiest method of writing text in verse form. However, it has pitfalls – this text does not adjust for size, therefore, with a different resolution may appear scroll bars horizontally. Much more often poems are written by putting a br at the end of each line.
<h3>Verse</h3>
<p>First line<br>
Second line<br>
Third line<br>
Fourth line</p>
Element pre is more often used when you want to insert the source code.
<!DOCTYPE HTML>
<html>
<head>
<head>
<meta charset="utf-8">
<title>HTML Tags</title>
</head>
<body>
<header>Header and logo</header>
<h1>Header</h1>
<main>Content</main>
<footer>Footer</footer>
</body>
</html>
Let’s see the source HTML code of a web document
Many novice website developers would like to know: how did the creators of this or that resource achieve some effects? To see the fruit of their work, click on the page in your browser and choose “View Page Code” from the dropdown menu. This will bring up a new tab with the source code. Many browsers also have a developer mode. To do this, click on an element or blank space on the site (the body element, by the way), and click “Explore Element”. You’ll immediately get a list of elements, showing both HTML and CSS code. Using the developer panel, you can modify this code immediately, and see what happens.
Most browsers will correctly accept HTML code that is missing 1-2 close tags. However, you need to get used to the order, as the result of such a skin is not always predictable. If you do not put the closing text – get ready for errors and surrealism.