HTML and CSS course Β· Module 2: The Web and HTML Elements

Where to Look for Information About HTML?

4 min read
In this lesson7

A week from now you'll forget the name of the attribute that opens a link in a new tab - and that's completely normal. Even experienced programmers don't remember every tag. What sets them apart from beginners is that they know where to check and how to do it quickly.

Learning HTML is a process that requires not only acquiring knowledge but also developing the ability to search for information. In the age of the internet, we have access to an enormous number of sources that can help us in this process. Here are some recommended places where it's worth looking for information about HTML.

MDN Web Docs - The Documentation Library

MDN Web Docs (Mozilla Developer Network) is one of the most comprehensive sources of knowledge about web technologies, including HTML, CSS, JavaScript, and more. It contains guides, tutorials, code examples, and much more. It's a place definitely worth visiting if you want to deepen your knowledge of HTML - a Library of Alexandria of the web.

Every page about a tag on MDN has a similar layout: a description, a list of attributes, examples, and at the end a browser compatibility table (Browser compatibility). You'll get to the right page fastest by typing the word mdn and the element name into a search engine, e.g. mdn img.

W3Schools - First Steps

W3Schools is an educational website offering courses and guides for both beginner and advanced web developers. This resource is widely recognized as very beginner-friendly, with easy-to-understand guides and examples you can run with the "Try it Yourself" button. Treat it as a quick cheat sheet, and when you need details, check them on MDN.

HTMLreference.io - Tag Examples

HTMLreference.io is a resource that focuses on providing specific examples of usage for all available HTML tags. It's an excellent place when you're looking for information about a specific HTML element.

YouTube - Knowledge in Video Form

YouTube is a treasure trove of knowledge in video form that can help you understand and learn HTML. You can find many educational channels there offering HTML tutorials. Example channels include: Traversy Media, The Net Ninja, Academind, and Google Chrome Developers. Pay attention to the recording date - HTML changes slowly, but a video from ten years ago may show practices that are no longer used.

How to Search Effectively?

Instead of asking in general terms, describe the problem in a few words, preferably in English, because most materials are created in this language. Turn the question "how do I open a link in a new tab" into html link new tab, open the MDN result and test the solution you found:

1<a href="https://developer.mozilla.org" target="_blank">MDN documentation</a>

The target="_blank" attribute opens the link in a new tab - that's exactly what you'll find on the MDN page about the <a> element. The address and the link text stayed the same; only the place where the link opens has changed. When you get stuck on an error message, paste it into a search engine - on forums like Stack Overflow, someone has usually had the same problem. You can also ask the AI assistant in the bottom right corner of the screen. My advice: check every answer, including one from AI, in the documentation and in the editor before you treat it as certain.

Exercise: Audio and Video in the Documentation

Try these skills right away. In the lesson on video and audio files, you learned the <video> and <audio> elements. Find the MDN page for the <video> element and look for the answers to two questions: what does the muted attribute do, and why do browsers often block automatic playback of a video with sound? This is exactly the kind of searching that will come in handy in every following module.

What's Next with HTML?

Remember that learning programming is a continuous process. Don't be afraid to ask questions, experiment with code, and make mistakes - it's all part of the learning path. The key to success is patience, practice, and willingness to learn.

HTML will certainly appear in the following modules of this training, so don't worry if not everything is clear to you. Everything will become clear in its own time - in the very next module you'll start giving your pages a look with CSS.

In the editor below you'll find a list of sources with links and tips. Add your own favorite pages to it and check that every link works:

Code for this lesson: index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Sources of HTML Knowledge</title>
6</head>
7<body>
8    <h1>Where to find information about HTML?</h1>
9
10    <h2>Best sources of knowledge</h2>
11    <ol>
12        <li>
13            <strong>MDN Web Docs</strong>
14            <p>The best compendium of HTML, CSS, and JS knowledge.</p>
15            <a href="https://developer.mozilla.org" target="_blank">developer.mozilla.org</a>
16        </li>
17        <li>
18            <strong>W3Schools</strong>
19            <p>Tutorials with interactive examples.</p>
20            <a href="https://www.w3schools.com" target="_blank">w3schools.com</a>
21        </li>
22        <li>
23            <strong>Stack Overflow</strong>
24            <p>Questions and answers from the developer community.</p>
25            <a href="https://stackoverflow.com" target="_blank">stackoverflow.com</a>
26        </li>
27        <li>
28            <strong>CSS-Tricks</strong>
29            <p>Articles and guides about CSS and HTML.</p>
30            <a href="https://css-tricks.com" target="_blank">css-tricks.com</a>
31        </li>
32    </ol>
33
34    <h2>Tips</h2>
35    <ul>
36        <li>Practice regularly - write code every day</li>
37        <li>Read MDN documentation</li>
38        <li>Build your own projects</li>
39        <li>Use DevTools in your browser (F12)</li>
40    </ul>
41</body>
42</html>

Remember: a scribe didn't carry all of Egypt's knowledge in his head - he knew which scroll of the Library of Alexandria to look in, and that's exactly what you're learning now.

Spotted a mistake in this lesson?

Check yourself

Answer the questions from this lesson. Pick an answer to see right away whether it is correct.

  1. 1. Which website is considered one of the most comprehensive sources of knowledge about HTML, CSS, and JavaScript?

  2. 2. Which of the following websites is a popular educational resource friendly to beginner programmers?

  3. 3. What is the key to effective programming learning?

Useful articles