Basic HTML tags
In the last lesson, Introduction to HTML and your first website , we showed how the structure of an HTML page looks like and we created the first page with two paragraphs of text. However, this is not enough for us, so we will introduce basic HTML tags in this HTML tutorial.
Paragraphs
We have already mentioned a paragraph in the previous episode, to repeat, the text can not just float in HTML, but is divided into paragraphs <p>. <p> Tag is paired and thus encapsulates the text to be inside the paragraph. Before the text we write <p> , after the text we close the paragraph </p> .
Sample:
<p>This is the first paragraph.</p>
<p>This is the first sentence of the second paragraph.
This is the second sentence of the second paragraph.</p>Full code looks:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My First web page</title>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the first sentence of the second paragraph.
This is the second sentence of the second paragraph.</p>
</body>
</html>Result:
Note that there is no line feed at all in HTML. The second paragraph is written on 2 lines, but it appears as one line. This is because the browser only displays the transition to a new line on the page as a space. If for any reason we want to line a paragraph, we will use an unpaired tag <br /> . It would look something like this:
<p>This is the first paragraph.</p>
<p>This is the first sentence of the second paragraph.<br />
This is the second sentence of the second paragraph.</p>Result:
Highlight text
When a piece of text is important, we'll tell the browser using highlighting tags. These are mainly paired tags <strong> and <em>.
Italics and bold text
The text in <em> (emphasis) appears as italic, but that's not all. We thought that HTML was mainly used to define meaning. The text in them is considered important, and Internet search engines (eg Google) are more interested in it than other text. Similarly, the text in <strong> is perceived as strong emphasis, meaning even more important. The browser displays it as bold.
In old materials, you may come across the <b> and <i> tags. But the text only rendered in a different style and its meaning has not changed at all. Therefore, they are no longer used for highlighting.
We can try the highlighting, highlighting the important fact:
<p>Cut the <strong>red</strong> wire to destroy the explosive, the blue wire may cause an explosion.</p>
<p>Start the registry editor with <em>regedit.exe</em>. <strong>I am not liable for any damages!</strong></p>Result:
Of course, we can combine tags, such as <strong> <em> This text will be both italic and bold </em> </strong>. Be sure to end tags in the correct order.
Underline
There is a <u> tag to underline the text. However, it is not very used because people are accustomed to underlined links. However, let's try it for completeness, even if you shouldn't use it on the web:
<p>I often see writing <u>comming soon</u>, even if it is not grammatically correct </p>Result:
Strikethrough
The strikethrough text is marked with a paired <s> tag (as strike = strikethrough). This is a text that is no longer up-to-date or correct (eg the past price of the goods or emphasizing an incorrect claim / procedure).
Sample:
<p>The internet is getting cheaper. One hour of connection cost
<s>1 $</s> 2 $</p>Result:
Optical highlighting
Lastly, let's mention the new <mark>tag, which is used to optically highlight some of the text. This text is not important for search engines (like strong), but for users. We can highlight the important fact in the text, the browser renders this text with a yellow background:
<p>Phpweb.org traffic <mark>increased by 300%</mark>over the year.</p>Result:
If the above mentioned tags reminded you of buttons in MS Word, you are right, this is the basic typography that is present in most text editors.
Highlighting tags are called phrase tags. There are still a few, but they are no longer necessary for our needs. In most cases, you will use mainly strong, as the search engine then notices this text.
Titles
Headings are considered the most striking text. They are written with a paired <h1> tag (as a header). HTML provides 6 levels of headings, where <h1>is the top-level heading and <h6> is the lowest-level heading. The <h1> heading should be the very first thing on the page and should contain the page title. Next, the <h2> headings should be added, dividing the page into other subsections. Other headings are rarely used, especially to break down the text in an article.
Let's start working on a simple personal website that we will gradually expand and improve over the course of the series, until we finally upload it to the Internet. For example, a site with headlines might look like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>My First web page</title>
</head>
<body>
<h1>My first site</h1>
<p>Welcome to my first site, Im still learning to code, but I think I can do it .</p>
<h2>About me</h2>
<p>My name is Jim and Im 15 years old. Im student at IT College in London.</p>
<p>I like reading and sometimes (especially in summer) sports.</p>
<p>My main hobby (and I hope to work once) is <strong>programming</strong>!</p>
<h2>Skills</h2>
<p>I started my school year with C+ programming language. I searched the Internet for some better languages and happened to come across phpweb.org, where i now learn <strong>HTML</strong> a <strong>PHP</strong>. I know the bacics of these languages.</p>
</body>
</html>Result:
You can download the resulting code below again. In the next lesson, Images and links in HTML, it will be about images and links.
Download index.html (In Zip format)