Simple introduction to HTML for absolutely beginner

Series

Goals

The following article will guide you through some basic concept about HTML. We'll look into below HTML code and try to understand what each line of code does, and how can we expand it for our personal use case.

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <span>hello world</span>
  </body>
</html>

HTML?

HTML (HyperText Markup Language) is a descriptive language that specifies webpage structure.

HTML is a series of elements, which you use to enclose, wrap, markup, ... different parts of the content in a certain way. It can be simple or complicated as the web developer wants it to be.

For example: if we want some part of text to stand by itself, we can enclose it inside paragraph element <p> , and if we want some other part of text to be bold, we can use <strong> element.

<p>
  the <strong>quick</strong> brown fox jumps over the <strong>lazy</strong> dog
</p>

will output:

the quick brown fox jumps over the lazy dog

Why we need HTML again?

TLDR

  • HTML is building block of FrontEnd Web Development
  • We need it to create basic layout, that include: image, text, video player, audio player, ...
  • You can jump into this summary to review what HTML look like and move on

Explain

Comparing to the creation of a book, HTML provides the essential tools to construct the different components that make up the book.

For example, in a book, chapters are essential for organizing content and providing a logical flow. Similarly, HTML offers structural elements like <div>, <section>, and <article> to divide the webpage into meaningful sections.

In a book, paragraphs are used to present information in a coherent manner. HTML's <p> tag serves a similar purpose by defining paragraphs of text on a webpage.

HTML allows frontend developers to assemble elements like paragraphs, headings, images, and links to build a well-structured webpage. However, HTML alone doesn't determine the visual appearance or styling of these components; that's where CSS comes in. CSS adds aesthetics and design elements to enhance the webpage, similar to how book covers and typography enhance the reading experience. Together, HTML and CSS enable developers to create engaging and visually appealing webpages.

HTML element

  • Tags: are used to delimit the start and end of elements in the markup. In <span></span>, <span> is start tag and </span> is end tag

  • Element: is a part of a webpage. In XML and HTML, an element may contain a data item or a chunk of text or an image, or perhaps nothing. A typical element includes an opening tag with some attributes, enclosed text content, and a closing tag.

    There's are 6 kind of HTML elements, which is:

    1. void (empty) elements: only have a start tag, end tags must not be specified for void elements. area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr

    Note: end tags must not be specified for void elements

<img
  src="workplace.jpg"
  alt="Workplace"
  usemap="#workmap"
  width="400"
  height="379"
/>
 
<map name="workmap">
  <area
    shape="rect"
    coords="34,44,270,350"
    alt="Computer"
    href="computer.htm"
  />
  <area
    shape="rect"
    coords="290,172,333,250"
    alt="Phone"
    href="phone.htm"
  />
  <area
    shape="circle"
    coords="337,300,44"
    alt="Cup of coffee"
    href="coffee.htm"
  />
</map>
  1. template elements: template
<template id="row">
  <tr>
    <td>content</td>
  </tr>
</template>
  1. raw text elements: style, script
<style>
  body {
    background-color: grey;
  }
</style>
<script>
  document.body.style.backgroundColor = "grey";
</script>
  1. escapable raw text elements: textarea, title

It's called escapable raw text elements because their contents are treated as plain text and can contain special characters or entities that need to be escaped.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>this's browser tab title</title>
  </head>
  <body>
    <textarea>place some content here</textarea>
  </body>
</html>

Result:

  1. foreign elements: math
<math>
    <mrow>
        <mrow>
            <msup>
                <mi>x</mi>
                <mn>2</mn>
            </msup>
            <mo>+</mo>
            <msup>
                <mi>y</mi>
                <mn>2</mn>
            </msup>
        </mrow>
        <mo>=</mo>
        <msup>
            <mi>z</mi>
            <mn>2</mn>
        </msup>
    </mrow>
</math>

will render as:

x2+y2=z2
  1. normal elements: all other HTML element
  • anatomy:
  start tag
      |                                    
-----------|                                         end tag
|          |                                             |
<p attribute>the quick brown fox jumps over the lazy dog</p>
|          |                                             |  |
|          |                                             |  |
|          |---------------------------- content --------|  |
|------------------------------------- element -------------|

Note: The start and end tags of certain normal elements can be omitted

<p attribute/>

Omitting an element's start tag in the situations described below does not mean the element is not present; it is implied, but it is still there. For example, an HTML document always has a root html element, even if the string <html> doesn't appear anywhere in the markup.

<!DOCTYPE HTML>
 
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

will render same as

<!DOCTYPE HTML>
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    <p>Welcome to this example.</p>
  </body>
</html>

  • start tag: marks where the elements begin to take effect. This consists of the name of elements and its attribute (optional).

    Eg: <p> is start tag

<p style="color: red; text-transform: capitalize"></p>

Read more about start tag format here

  • tag attribute: attributes has a name and a value. Attribute names must consist of more than one character and attribute value is mixture of text and character reference;

    Eg: style is attribute name of element <p> and "color: red; text-transform: capitalize" is its double-quoted value

<p style="color: red; text-transform: capitalize"></p>

  • content: this's content of element. It could contains some other tag inside of it but in this case, it contains text.

    Eg: the quick brown fox jumps over the lazy dog is content of <p>

<p>the quick brown fox jumps over the lazy dog</p>

  • end tag: this marks where elements ends. Not include, fail to provide ending tags at right position might produce strange, unexpected behavior.

    Eg: </p> is start tag

<p style="color: red; text-transform: capitalize"></p>

Read more about end tag format here

Doctype

DOCTYPEs (<!doctype html>) are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications.

Html

Also referred to as the root element is the root (top-level element) of an HTML document, all other elements must be descendant of this element.


the <head> element is the part of HTML document that does not display through web page. It primarily holds:

  • website's metadata - machine readable information:
    • data of author
    • browser tab title
    • website's important description, keywords for other people to lookup using google, bing, duckduckgo,...)
    • information for machine processing
  • external link to CSS
  • internal css style
  • web browsers might also use metadata provided in <head> to render HTML documents correctly.
  • ...

HTML5-compliant browsers automatically create a <head> element if its tags are omitted in the markup


Body

This's where all fun begin. The <body> element represent the content of HTML document and there's only one <body> element in document.

It's hard to tell what to do with <body> cause it's really depend on the design and layout of the website, but we have some option for basic use case:

  • media element: <img>, <figure>, <source>, <video>, <audio>, ...
  • paragraph: <p>, <blockquote>, <strong>, <em>, <b>, <i>, <u>, ...
  • heading: <h1>, <h2>, ..., <h6>
  • table: <table>, <thead>, <tbody>, <th>, <tr>
  • list: <ol>, <ul>, <li>
  • content division: <br>, <hr>, <div>
  • general inline container: <span>
  • menu: <select>, <option>
  • hyperlink: <a>
  • user input: <input>, <textarea>, <div contenteditable></div>
  • .....

You can find much more of HTML elements and its feature here. We have a lot of tags but in real world using, div, span, img, a, video, audio, input, textarea,... are the lost using tag. Most of the time, we can replace most of the other tag using div


Summary

  • Basic format of a HTML file:
<!DOCTYPE html> <!-- you don't really need to worry about this tag -->
<html lang="en"> <!-- and this tag -->
  <head>
    <!-- website's metadata, external content -->
  </head>
  <body>
    <!-- this's where we create website content -->
  </body>
</html>
  • Syntax to write a HTML tag:
<!-- normal elements -->
<element attribute="value" ...>element content</element>
 
<!-- no-ending elements -->
<element attribute="value" ... />
 
<!-- void elements (tags that cannot have any child nodes) -->
<!--   -->
<element attribute="value" ...></element>