HTML: the structure of websites
HTML (“HyperText Markup Language”) is the language that gives web pages form and structure. This article sums up the basic building blocks of HTML (HTML Elements & Attributes).
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.
All together they form the element.
Tags are the text content of the element that goes between the opening and closing tag. The tag names determine to what the text content looks like. For example; “p” for the paragraph, “h1” for the header. The text in a “paragraph” element will look normal-sized, whereas the text in an “h1” tag will look big and bold like a headline.
Empty tags -no content inside-, like images, are self-closing. They use attributes to tell what image to show.
The way the browser renders your text depends on the HTML, not how you write in your text editor. This is an important difference between writing HTML and using conventional WYSIWYG text editors.
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.
A header element looks like this:
<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.
A paragraph tag looks like this:
<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.
<li>Each of these lists contains a series of “list items”, which contain the bulleted or numbered point.
An unordered list tag looks like this:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>And an ordered list tag looks like this:
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>The li elements are child elements of their parent ul/ol. Child elements should be indented with a consistent number of spaces inside their parent.
5. Body
All major HTML elements need to be inside an <body> element. The tag encloses all of the elements inside it.
A body element tag looks like this:
<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
A <!-- -->single comment in HTML:
<!-- This Comment will not be displayed in the HTML document. -->A <!--
-->multiline comment in HTML:
<!--
A multiline comment.
To explain a specific part of the code in more detail.
-->The above elements show HTML affects the text size and shape.
7. Block and Inline Elements
Block and Inline Elements show how HTML affects text positioning.
A block element gets it’s own line in the document when it’s rendered. Even if it is written directly after each other.
A block element in HTML:
<p>Hello world</p><p>Hello world</p>An inline element stays in the same line, even if we position them differently.
An inline element in HTML:
<span>Hello world</span>
<span>Hello world</span>“Span” is an inline element: it lines up in a row against other inline elements.
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.
A <div> (“division”, or section of the page) is a block element: text inside will appear on a new line in the document.
A div element in HTML:
<div>text division 1</div>
<div>text division 2</div>results in:
division 1
division 2
A <span> (“spans” across a line) is an inline element: text inside of a span will stay on the same line in the document.
A span element in HTML:
<span>Span 1</span>
<span>Span 2</span>results in:
span 1 span 2
Div and Span are examples of general inline elements to divide sections of the document that belong together.
To create an easy grid with 3x3 columns & rows:
<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
<img>(image) tag is an empty tag, that is self-closing. It needs an attribute to display an image.<a>(anchor) tags specify the part of the website the link will go to on the same page.
An image tag element :
<img src="images/firefox-icon.png" alt="My test image">An anchor attribute in HTML links to different places on the same page: Example: a table of content. Click on a link to get further down the page.
<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.
<class> (=attribute name)
="note" (=attribute value)
An attribute (identifier) element in HTML:
<p class="note">text</p>An attribute should always have :
- A space between it and the element name or previous attribute.
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
The main attributes are:
id(identifier)descriptive attribute; explains the purpose of the different code sections. Helpful to identify specific elements in a code document.src(source) attribute: explains which<img>(image) tag to display.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.target(target) attribute: specifies if the website will open or not in a new browser tab.
An identifier attribute element in HTML:
<p id="menu">text</p>A source attribute element in HTML:
<img src="icon.jpg" id="icon-image" />A hypertext reference attribute element in HTML:
<a href="https://www.medium.com/">Visit Medium Homepage</a>A target attribute element in HTML opens the link in a new browser tab:
<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>This so-called “index.html” page, consists of:
<!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.
Most time a web developer spends is not on writing code, but on debugging (finding out what typos or errors the code consists of) code.
Developers write code both for machines and for human beings. So the code must be easy to read for humans and well structured and indexable for machines. This is what you do with HTML.
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>
To read more about the basics of the web, read the Mozilla Web Docs:
