HTML

Table of contents

1. Tutorials
2. Introductory Examples and Resources
   1. Tags
   2. Conventions

HTML is the markup language of websites and web applications. It’s the way that content (text, graphics, and other media) is defined and organized on a web page. HTML by itself does not look fantastic. To style the content defined by HTML (add fonts, colors, layouts, etc. to your web pages), you need to learn CSS.
It is highly recommended that you learn HTML and CSS at the same time.

Tutorials

The best websites to learn HTML are the following:

1. w3schools
   A full HTML course for those who are new to web development looking for simple answers
   The simplest tutorial site for an introduction to HTML and other languages. Has examples, code sandboxes, and practice questions, and is rather comprehensive. Highly recommended for beginners.
2. MDN
   For those who are experienced coders looking for the right answers
   MDN (Mozilla Developer Network) is the standard documentation and examples for professional developers. Provides more detailed and accurate explanations than w3schools.
3. codecademy
   For those who want to get a brief overview and learn by doing
   Codecademy has a great free mini course for learning HTML. It does require an account but teaches the basics quickly and effectively.
4. CodeHS
   For those who want a comprehensive web design course
   Click the link above to enroll in Merit Academy’s complete web design course which covers HTML, CSS, Bootstrap, and other skills related to making web sites. The course code (if you need it upon signing up) is F5D0E.

Introductory Examples and Resources

There are a few things to know that are essential for coding HTML:

Tags

Tags define the content on the page. There are distinct tags for headings (titles), paragraphs, images, links, etc. Most HTML elements have an opening and closing tag because they encapsulate text or other content. Fewer elements are singleton tags, like images.

<h1>Heading 1</h1>
<p>Paragraph</p>
<img src="link-to-image.jpg">
<a href="link-to-page.html">Link</a>

Attributes are options that further define the content. For example, an image tag has a source attribute (src) that references the image file to be displayed (<img src="filename.jpg">).

Conventions

If you’re unconvinced that following convention is important, visit this page.

Tags should always be lowercase (<h1> not <H1>).

Attributes should be lowercase and values should always be in quotes (width="200px" not WIDTH=200px).

When multiple elements are nested inside one another, it is good practice to match the indentation (horizontal spacing) of the elements.

<main>
    <section>
        <p>Some text</p>
    </section>
</main>

File names should be kebab case (lowercase with dashes instead of spaces; file-name.html) or snake case (lowercase with underscores; file_name.html). Be consistent, pick either kebab case or snake case for your files and stick to it.