HTML – HTML Tags and Attributes

The Structure of HTML Tags and Attributes

HTML Tags and Attributes– The site page is a plain text file with the .html extension . Inside this file, the text of the HTML page is stored along with tags. This file must have the following tags: the tag , which must contain the text of the entire site (everything written outside this tag will be ignored by the browser), and inside it there must be two more tags: the tag for the service page content and the tag – for the body text, which is visible on the browser screen.

HTML Tags and Attributes

The content inside the  tag includes many different things, but for now we only need two of them. This is the 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		This is the content of the page content..
	</body>
</html>

Now that we have learned how to create the simplest pages, we will move on to exploring the useful tags to use inside the tag . These will be tags for paragraphs, headings, lists, links, and other useful things. So let’s get started.

Paragraphs

One of the main elements of a page is paragraphs . They can be compared to paragraphs in a book – each paragraph starts on a new line and has a so-called red line (this is when the first line of the text of the paragraph is slightly indented to the right). There is no red line by default, but it is easy to do (more on that later).

A paragraph is created using the <p> tag like this:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
                <title> This is the title of the title </title>
	</head>
	<body>
		<p>
			This is a paragraph.
		</p>

		<p>
		     This is another paragraph.
		</p>

 		<p>
             And one more paragraph.
		</p>
	</body>
</html>

This is how the code will look in the browser:

This is a paragraph.

This is another paragraph.

And one more paragraph.

Headings h1, h2, h3, h4, h5, h6

In addition to paragraphs, headings are important on a page . They can also be compared to titles from a book – each chapter has its own title (the title of this chapter) and is divided into paragraphs, which also have their own titles. Well, the main text of the page is in paragraphs.

Headings are created using the tags <h1> , <h2> , <h3> , <h4> , <h5> , <h6> . They have varying degrees of importance. The heading h1 should contain the name of the entire HTML page , in h2 – the name of the page blocks , in h3 – the name of the sub-blocks, and so on.

All headings are bold by default and have different sizes (this can be changed through CSS, but more on that later). See example:

<! DOCTYPE html>
<html>
<head>
         <meta charset = "utf-8">
         <title> This is the title of the title </title>
</head>
  <body>
      <h1> Heading h1 </h1>
      <h2> Heading h2 </h2>
      <h3> Heading h3 </h3>
      <h4> Heading h4 </h4>
      <h5> Heading h5 </h5>
      <h6> Heading h6 </h6>
      <p> This is the first paragraph. </p>
      <p> This is the second paragraph. </p>
      <p> This is the third paragraph. </p>
  </body>
</html>

This is how the code will look in the browser:

H1 heading

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

This is the first paragraph.

This is the second paragraph.

This is the third paragraph.

Fatty

You already know that headers are bold by default . However, you can also make plain text bold – just put it in the <b> tag . See example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> This is the title of the title </title>
	</head>
	<body>
		<p>
		This is plain text and this is <b> bold </b> text.
		</p>
	</body>
</html>

This is how the code will look in the browser:

This is plain text and this is bold text.

Note that the  tag should be used inside some other tag, such as a paragraph. In this case, paragraphs create the overall structure of the page (paragraphs and headings), and the b tag makes individual pieces of text bold.

Italics

In addition to bold, you can also make italic using the <i> tag :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
            <title> This is the title of the title </title>
	</head>
	<body>
		<p>
          This is normal text, and this is <i> italic </i> text.
		</p>
	</body>
</html>

This is how the code will look in the browser:

This is plain text and this is italic text.

Lists

Along with paragraphs and headings, there is another important element of the page – lists . Such elements are probably familiar to all Internet users. They are a listing of something (a list) point by point. Each list item usually has a filled circle next to it (called a list marker ).

Lists are created using the <ul> tag , inside which there must be <li> tags . The ul tag defines the list itself, and the li tags should contain list items (that is, one li corresponds to one list marker). Note that you cannot use li tags alone. See example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> This is the title of the title </title>
	</head>
	<body>
		<ul>
			<li> First item in the list. </li>
            <li> The second item in the list. </li>
            <li> The third item on the list. </li>
		</ul>
	</body>
</html>

This is how the code will look in the browser:

  • The first item on the list.
  • The second item on the list.
  • The third item on the list.

Lists created via the ul tag are called unordered lists. This name is given to them because there are also ordered lists, which instead of bullets-points will have bullets-numbers. Such lists instead of the ul tag have the <ol> tag , and the items of such lists are also created through the li tags .

Let’s make an ordered list using the ol tag :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
             <title> This is the title of the title </title>
	</head>
	<body>
		<ol>
		   <li> First item in the list. </li>
           <li> The second item in the list. </li>
           <li> The third item on the list. </li>
		</ol>
	</body>
</html>

This is how the code will look in the browser:

  1. The first item on the list.
  2. The second item on the list.
  3. The third item on the list.

The convenience of ordered lists is that I can insert a new list item anywhere – and the numbering itself will be rearranged (that is, I do not have to follow it in case of any changes, as I would if I arranged it manually ).

Links

Links are the elements that make the internet out of the internet. By clicking on the links, we can go from one page of the site to another. If they did not exist, the Internet would be just a collection of pages that are in no way connected with each other.

The link is created using the <a> tag , while it must have a mandatory href attribute , which stores the address of the page to which the link leads. See example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		<a href="http://phphtml.net"> Link to phphtml.net.</a>
	</body>
</html>

This is how the code will look in the browser:

Links can be absolute and relative , in addition, they can lead to both your site and someone else’s. It is better to show these difficult moments, rather than describe them in text, so I made the following video for you. Take a look at it and only then move on to further reading:

There will soon be a video about links absolute and relative

Images

Let’s now figure out how to place an image on your website page. To do this, use the <img> tag , which has the required src attribute , which stores the path to the image file.

How it works, let’s see the following example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		<img src="smile.png">
	</body>
</html>

This is how the code will look in the browser:

HTML - Working with HTML Tags and Attributes

Please note that the  tag does not require an end tag.

Links in the form of pictures

A link can be not only a text, but also a picture – for this it is enough to attach the  tag to the  tag , as is done in the following example. Click on the picture – and you will follow the link to the phphtml.net website (to later go back to the book – press the “back” button in the browser):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		<a href="http://phphtml.net"><img src="smile.png"></a>
	</body>
</html>

This is how the code will look in the browser:

HTML - Working with HTML Tags and Attributes

Line break

Remember what happens if you make, for example, two paragraphs side by side – in this case, the text that lies in each of them will start on a new line.

Let’s see this with the following example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		<p>This is the first paragraph.</p>
		<p>This is the second paragraph.</p>
	</body>
</html>

This is how the code will look in the browser:

This is the first paragraph.

This is the second paragraph.

There are, however, situations where we would like to have one paragraph, but some text in it begins on a new line. Why might this be needed? For example, I want to type a poem, but I don’t want to break each line of it into a separate paragraph, since that would not be very logical.

To do this, write the <br> tag where the line break should be . Note that this tag is special and does not have an end tag.

Let’s see how it works with the following example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		<p>This is the first line of text,<br>and this is the second.</p>
	</body>
</html>

This is how the code will look in the browser:

This is the first line of text,
and this is the second.

HTML comments

Almost all programming languages have such a concept as “comments”. Comments are text that will be ignored by the browser – it will not be visible on the screen, but will remain in the source code of the page.

What are comments for? First , in order to leave notes in the source code for yourself or the person who will edit your code after you. Secondly , with the help of comments, you can remove some things that you would like to delete now, but then, maybe, you want to return. They can simply be temporarily commented out and then commented out as needed.

HTML comments are formatted as follows: corner first, sign! and two hyphens – <! – , then the text of the comment, and then two hyphens and a corner – -> . See example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>This is the title of the title</title>
	</head>
	<body>
		<! -
              This is the HTML comment -
              it is not displayed on the site page.
              ->

             This is the main content of the page.
	</body>
</html>