HTML: the structure of websites

Source: W3C’s HTML5 logo

Basic Concepts of HTML

HTML is the code used to structure a web page and its content. Web content could be structured within a list of bulleted points, a set of titles and text paragraphs, or using images and data tables.

What is HTML?

HTML is not a programming language; it is a markup language that defines the structure of your web content. It consists of a series of elements, that help parts of the content to act in a certain way.

WordProcessors & Text syntax

When writing HTML, you type out words and structure your document. You decide where to put your headings and paragraphs and add pictures or other text features, just like you use a word processor, like Microsoft Word or Google Docs document. Yet, HTML comes without a graphical interface to decide where these text elements go. Instead, to make HTML visible, we need special syntax, called tags, that the web browser translates into a visible text.

HTML Elements

Elements are the main building block of HTML. They consist of tags:

  • <> an “opening” tag
  • content text inside the element.
  • </> closing tag.

1. Headers

A header tag consists of the letter, followed by a number (header’s size). Headers range in size from 1 (largest) to 6 (smallest). Most HTML elements do not have different sizes to choose from. Headers are unique in that sense.

<h1>The biggest headline</h1>
<h2>A bigger headline</h2>
<h3>A big headline</h3>
<h4>A small headline</h4>
<h5>A smaller headline</h5>
<h6>The smallest headline</h6>

2. Paragraph

A paragraph element contains a paragraph of text. Browsers render paragraphs with normal text size and space (“padding”) above and below.

<p> This is a paragraph.</p>

3. Parent-child elements

HTML elements can contain other HTML elements inside of them. This is called a tree. The outside element is called a parent element, and the elements nested inside it are called child elements. By convention, child elements are indented 2 spaces inside their parent for readability.

<div>
<h3>This is a parent element.</h3>
<p>This is a child element.</p>
<p>This is a child element.</p>
</div>

4. List

Lists are often used. In HTML two main kinds of lists exist:

  • <ul>unordered list: A bulleted list.
  • <ol>ordered list: A numbered list.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

5. Body

All major HTML elements need to be inside an <body> element. The tag encloses all of the elements inside it.

<body>
<h1>The biggest title. Body is parent tag.</h1>
<p> Paragraph tag. Body is parent tag.</p>
<ul>
<li>list item tag. Parent is ul tag. Grandparent is body.</li>
<li></li>
</ul>
</body>

6. Comments

A code comment is a “grayed-out” text in code: it starts with a <!-- and end with -->. Code comments are used for several cases:

  • Documentation: to explain how bits of code work.
  • Troubleshooting: temporarily disabling some lines of code from executing. “commenting out” code
<!-- This Comment will not be displayed in the HTML document. -->
<!-- 
A multiline comment.
To explain a specific part of the code in more detail.
-->

7. Block and Inline Elements

Block and Inline Elements show how HTML affects text positioning.

<p>Hello world</p><p>Hello world</p>
<span>Hello world</span>
<span>Hello world</span>

8. Div and Span

Div and Span are specific inline elements that show how HTML affects text positioning. They don’t affect the appearance of the text inside.

<div>text division 1</div>
<div>text division 2</div>
<span>Span 1</span>
<span>Span 2</span>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</body>

HTML Tags

  1. <img>(image) tag is an empty tag, that is self-closing. It needs an attribute to display an image.
  2. <a> (anchor) tags specify the part of the website the link will go to on the same page.
<img src="images/firefox-icon.png" alt="My test image">
<div id="container">
<p class="title">Contents</p>
<ul class="list">
<li><a href="#First_Point_Header">1 First Point Header</a>
<ul>
<li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
<li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
</ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

HTML Attributes

Attributes contain invisible (“metadata”) information about the element: it gives the element an identifier to target the element with style.

<p class="note">text</p>
  1. A space between it and the element name or previous attribute.
  2. The attribute name followed by an equal sign.
  3. The attribute value wrapped by opening and closing quotation marks.
  1. id (identifier)descriptive attribute; explains the purpose of the different code sections. Helpful to identify specific elements in a code document.
  2. src (source) attribute: explains which <img>(image) tag to display.
  3. href (hyperlink reference) attribute: <a>(anchor, hyperlink) tag to display. The hyperlink reference is the URL of the website to link to. This is what makes the World Wide Web an actual web. Without the attribute, the text inside doesn’t link anywhere.
  4. target(target) attribute: specifies if the website will open or not in a new browser tab.
<p id="menu">text</p>
<img src="icon.jpg" id="icon-image" />
<a href="https://www.medium.com/">Visit Medium Homepage</a>
<a href="https://www.medium.com/" target="_blank"> Read Medium </a>

Basic HTML Document

With the above HTML elements, tags, and attributes explained, you are now able to write your first basic HTML document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
  • <!DOCTYPE html> — it makes sure the document behaves correctly.
  • <html></html> — the <html> (root) element wraps all the page content.
  • <head></head> — the <head> element acts as a container for all metadata. For example keywords, page description, CSS to style content, character set declaration.
  • <meta charset="utf-8"> — it sets the character set of the document to UTF-8, which includes most characters from the vast majority of written languages. It can now handle any textual content.
  • <title></title> — the <title> element sets the page title, the title that appears in the browser tab when the page loads. And it is also used as a page description to bookmark it.
  • <body></body> — the <body> element contains all content to show to web users when visiting the web (text, images, videos, games, audio).

Debug HTML

It is very important to pay attention to detail when writing HTML, as it is very easy to make mistakes. Yet a web browser will not warn you that your HTML is wrong or you made a mistake. Instead, it will render the way it thinks you wanted it to look. The result won´t look right, but you have to figure out for yourself what the problem is.

Common HTML mistakes

The most common HTML mistakes web developers make, are:

  • Forget to close a tag. Result: mix-up in the parent-child relationships between elements.
<p> "</p" should be </p>.
  • Typos. Result: very hard to figure out the error. So, double-check your spelling.
<H1> </h2>.
  • Improper indentation. Result: indentation doesn’t have any impact on the way your browser makes your HTML look. Yet, it makes code extremely hard to read for humans and it makes it harder to understand the parent-child relationships between elements.
<div>
<p></p>
</div>
  • Not using extra spaces Result: Using extra spaces between different code sections, make the code not only easy to read, but it also helps to distinguish the different coding sections visually.
<div>
<!-- section one -->
</div>
<div>
<!-- section two -->
</div>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Diana Vilé

Diana Vilé

A passionate Digital Communication Professional from Barcelona, Spain. Experience: Content, UX-design, Frontend. https://dianavile.github.io/AllDigitalAgency/