Intro to HTML — Modern layout fundamentals

• What is HTML?
• Tags in HTML
• Attributes
• General HTML tag format
• Do it yourself

What is HTML?

HTML (Hypertext Markup Language) is a language for marking up hypertext, it's a set of rules by which the browser distinguishes headings from lists, tables from pictures, and so on. HTML appeared in 1993 and was intended to standardize the rules for displaying text within web pages.

Take a good look at the page you're on now. All of it, regardless of appearance, is written using HTML. It does a good job of showing that no matter how complicated the page is, the whole essence of it has remained the same for more than 20 years.

The word "language" in HTML should be taken to mean rule. HTML by itself only marks up the data; it doesn't interact with it in any way and does nothing with it visually. All the work of displaying text data and markup is done by the browser.

You can try to open the markup of this page using Ctrl + U (Cmd + Option + U on macOS).

Don't be intimidated by all the stuff you can see there. In time, this will stop looking like gibberish, and you'll easily navigate HTML markup.

Let's take a look at a small example of HTML:

<section>
  <h1>Layout fundamentals at Hexlet</h1>

  <p>At our "HTML\CSS Developer" profession you'll learn many popular techniques that are used in layout creation.</p>

  <p>You'll learn about CSS, preprocessors, and a little bit of programming. Study Bootstrap and learn how to test your code using special utilities.</p>
</section>

Right now, it may seem unclear what section, h1, and p mean. But now the most important thing is that behind all these constructions is the text content.

Always put content before visual appearance. The courses will give you many different block styling techniques, but don't get carried away. If the text on the page is hard to read, the page will have almost no value.

Tags in HTML

But what did the mysterious section, h1, and p mean? In markup language, they're called tags. It's the tags that wrap our content and ultimately get processed by browsers.

One of the tags it's important to learn about is a paragraph. Paragraph, like paragraphs in real life, allows you to separate sections of text by meaning. Visually, this is usually done using indentation. There are many paragraphs on this page, and you can easily distinguish them from each other by the spacing between them.

In order to insert a paragraph into a page, you need to specify a special construction, <p> and </p>, with a paragraph of text between them.

<p>At our "HTML\CSS Developer" profession you'll learn many popular techniques that are used in layout creation.</p>

<p>You'll learn about CSS, preprocessors, and a little bit of programming. Study Bootstrap and learn how to test your code using special utilities.</p>

As you'll have noticed, we may have more than one paragraph. Almost all HTML tags can be used multiple times on one page.

The paragraph tag has an opening <p> and a closing </p>. It is because of this that the browser understands where the paragraph begins and where it ends. These tags are called paired tags.

You may imagine that if there are paired tags, then there'll also be unpaired tags. And you're not wrong! In the process of working with layout design, you'll learn about these tags and how they're used Take your time :)

Another key concept that goes alongside tags is nesting. Look again at the example markup:

<section>
  <h1>Layout fundamentals at Hexlet</h1>

  <p>At our "HTML\CSS Developer" profession you'll learn many popular techniques that are used in layout creation.</p>

  <p>You'll learn about CSS, preprocessors, and a little bit of programming. Study Bootstrap and learn how to test your code using special utilities.</p>
</section>

In this example, we have a paired section tag, and inside it there are other tags and text inside them. This concept is an important one that allows you to build large systems.

Sometimes, nesting is a necessary part of text markup. For example, lists cannot be made without using nesting.

<ul>
  <li>The first list item</li>
  <li>The second list item</li>
</ul>

The browser will output this HTML markup as follows:

• The first list item
• The second list item

Without li tags, the browser cannot distinguish between plain text and list items.

Attributes

Another important concept in HTML is attributes and what they mean. Attributes are just additional information for the browser.

In HTML, you can use links to navigate the web. It's not enough to just provide a link tag (<a></a>) and the text inside.

<a>Go and study programming</a>

Browsers, unfortunately, can't read our thoughts and redirect the user where we want :(

To redirect the user, we have to help the browser and tell it where the user will go after clicking on the link. This requires the href attribute, the value of which is the desired link.

<a href="https://hexlet.io">Go and study programming</a>

Now, when the user clicks on the link, they'll be successfully redirected to the address we specified inside the href attribute.

General HTML tag format

Do it yourself

Use any online service that can convert HTML markup. For example, https://htmlcodeeditor.com/.

Insert the following markup in the left part:

<h1>Good Books</h1>

<p>I recommend reading these books:</p>

<ol>
  <li>
    <b>Code: The Hidden Language of Computer Hardware and Software</b> <i>(Charles Petzold)</i>
  </li>

  <li>
    <b>Don't Make Me Think: A Common Sense Approach to Web Usability</b> <i>(<a href="https://en.wikipedia.org/wiki/Steve_Krug">Steve Krug</a>)</i>
  </li>

  <li>
    <b>The Design of Everyday Things</b> <i>(Donald Norman)</i>
  </li>
</ol>

Look at the final result. Try deleting different tags and changing them. Experiment, it won't bite :)