01 - HTML syntax

01 - HTML syntax

HTML is not a programming language, but can still be considered the most basic building block of the web. It defines the meaning and structure of the content you visually see on a website by using elements that can be applied to different areas of your site. These elements can do many things:

  • Provide different meaning to text in a document such as defining a paragraph, bulleted list, or part of a table
  • Create structure within a document by forming logical, semantic sections such as a header, article, or a navigation bar
  • Embed content such as images and videos into a page

HTML elements are created with tags. It is important to note that elements and tags are not the same things. Elements are part of the Document Object Model (DOM) which is how pages are displayed in the browser, whereas tags begin and end an element written in the source code.

Anatomy of an element

 <tagName>Some Content</tagName>

<p>I am content within an opening 'p' tag and a closing 'p' tag. 
In this example, the name of the element is <p> (paragraph element).</p>

Elements can also be nested within other elements. When nesting it's important that you pay close attention to the order with which you close each element. In the below example, the opening <p> tag begins the <p> element and there is a <strong> element nested inside. It's important that the <strong> element is closed before the closing </p> tag, otherwise the browser may not read the code properly.

<p>I'm having a <strong>great</strong> day!</p>

Glossary of terms

  • Element - typically comprised of an opening tag, content, and a closing tag
  • Tag - used to create an HTML element
  • Opening tag - states where the element starts to take effect
  • Closing tag - states where the element ends
  • Content - content of the element
  • Empty or void elements - do not have a closing tag