HTML: the structure of websites

Source: W3C’s HTML5 logo

Basic Concepts of HTML

What is HTML?

WordProcessors & Text syntax

HTML Elements

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

1. Headers

<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

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

3. Parent-child elements

<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

  • <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

<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

  • 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

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

8. Div and Span

<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

<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

<!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

Common HTML mistakes

  • 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>

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

DevOps Engineer — What Do they even do?

2020 Upskilling: Enterprise DevOps Skills Report — Part 2

Run Fantom Opera on an eco-budget

Let’s develop REST API Endpoint for OSGi service - WSO2 Identity Server— Step by Step

Imgcook: How are codes generated intelligently from design files in Alibaba?

20th — 27th

How To Be A Good Programmer?

Developing an R Shiny Application with Statcast Data

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/

More from Medium

Jitsi IFrame in Use — A Shody Guide to Embeding Jitsi into Your Website

The perfect commit

My thoughts on learning Web in 2021

Five Data-Backed Reasons to Hire Remote WordPress Developers