Text markup

Paragraph

The <p> tag is a generic container for grouping small phrase elements, separating them from each other and further styling. By default, a paragraph is a block-level element, i.e. it starts on a new line and has vertical indents, which can be changed in CSS.

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque eligendi, a
  eaque, esse itaque porro non exercitationem odio earum quos perferendis!
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, totam velit
  asperiores non temporibus ut nisi minima?
</p>

It is often necessary to fill a tag with a placeholder text, when the text to be published on the site is not yet available. To do this, use a special placeholder ("dummy") text.

Note

In the VSCode editor, you can type the lorem10 code in your HTML document and then press the Tab key. This will create a 10-word text. Instead of 10, you can put any number.

Headings

The <h1>...<h6> tag group defines the text headings of semantic sections of various levels; they indicate the importance of the content section that follows them. It is a text content structuring tool.

The <h1> tag is most often used only once, as the main heading of the page. The rest of the headings can be used as many times as you want, but do it right and respect the hierarchy.

Note

Search engines pay special attention to headings, so the correct use of this tag group is extremely important. Do not decide on the heading level by the text size. Not all large text is a heading. A heading is what headlines a content section.

Lists

Lists make it possible to organize collections and present them in an intuitive and user-friendly way. A list is a container, and only list items, the <li> tags, can be its children.

The <ol> tag creates a numbered (ordered) list, that is, each list item is numbered. The browser numbers list items in succession, automatically, and if you delete one or more items of such a list, the rest of the numbers will be automatically recalculated. Item numbering can be controlled using special list attributes.

It is used to list actions in a specific order, like in a recipe.

<h1>How to brew tea</h1>
<p>Step-by-step guide for dummies: repeat, and it will work out!</p>

<ol>
  <li>Boil water</li>
  <li>Pour tea into a cup</li>
  <li>Pour boiling water into the cup</li>
  <li>Wait 10 minutes and drink</li>
</ol>

The <ul> tag creates a bulleted (unordered) list, in which each item begins with a small character (bullet). With CSS, the bullet can be removed or replaced.

It is used to list a set in no particular order, e.g. a list of resorts.

<h1>The hottest resorts</h1>
<p>This year, experts recommend the following locations.</p>

<ul>
  <li>Tunisia</li>
  <li>Turkey</li>
  <li>Greece</li>
  <li>Egypt</li>
</ul>

Tip

According to the specification, only list items, the <li> tags, can be nested within the <ul> and <ol> tags. At the same time, other arbitrary tags can be nested inside the <li> tags.

Nested lists

Making a multilevel list is easy: just nest another list into the list item. This is often used to create multilevel menus.

<ul>
  <li>
    Computers and accessories
    <ul>
      <li>Processors</li>
      <li>Monitors</li>
      <li>Video cards</li>
    </ul>
  </li>
  <li>
    Home appliances
    <ul>
      <li>Refrigerators</li>
      <li>TV sets</li>
      <li>Washing machines</li>
    </ul>
  </li>
  <li>
    Household products
    <ul>
      <li>Armchairs</li>
      <li>Mattresses</li>
      <li>Electric fireplaces</li>
    </ul>
  </li>
</ul>

Link

The <a> tag is used to create links or text, clicking on which you go to another page, download a file, etc. The link text is displayed in the browser with an underline; the font color is blue. When you hover over the link, the cursor changes its shape.

The link address must be specified in the required href="address" attribute. The address is URL, which can point to a page, file or any resource.

<a href="https://google.com">Link to Google homepage</a>

Special href values

Links have the ability not only to go to other pages and download files, but also to make phone or Skype calls, or send messages.

<!-- Link to phone number -->
<a href="tel:+14251234563">+1 (425) 123-45-63</a>

<!-- Link to email address  -->
<a href="mailto:example@mail.ru">example@mail.ru</a>

Button

An interactive element activated with JavaScript. For example, a button to open and close a pop-up window, toggle a mobile menu or submit a form. Always explicitly specify the type attribute. Its default value is submit, but most often you will need button. Yes, the button is of the "button" type, just like that.

<button type="button">Open modal window</button>

Note

It is important not to confuse a link with a button. If, when clicking on an interface element, the user goes to a web page, that is, there is href, then this is a link. If, when clicking, something happens without reloading the page or redirecting, this is definitely a button.