Before we begin getting into Hugo Templates, we will do a quick overview of HTML, which is the base language of all templates.
If you already know HTML, feel free to skip to the next section.
What is HTML?
HTML is the language used for describing the layout of web pages. It allows us to put buttons, links, text, images and videos into a page.
To start experimenting with HTML and the things covered in this overview, create a file on your desktop called index.html and open the file in VSCode and also open that file in your web browser.
Elements
HTML has many elements which are what describes what we want to display on a page. For example, there is a paragraph element and it looks like this:
<p>Your sentence here</p>
Go ahead a write that in your index.html file you created. Save the file then open it in your web browser to see your paragraph.
We will go over the main elements below, and feel free to test each one in your index.html file. Remember to save after every change and reload your browser window to see your changes.
Headings
Headings are used for creating larger text titles on your web page. For example, on this page some text is larger because it is a heading for the content below it. To create a heading you would write:
<h1>Heading 1</h1>
<h1> elements create the largest header, but you can go all the way to <h6> for sub headers.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
h2 will be slightly smaller than h1, h3 slightly smaller than h2 and so on…
Paragraph
Paragraph elements are used for showing basic text with no formatting.
<p>I am a paragraph</p>
Images
Image elements are used for displaying images.
<img src="/path/to/my/image.jpg" />
img elements must have a src attribute, (we’ll go over attributes below), but the src attribute stand for source and it must be a path to the image file on your computer or to a url to an image on the internet.
Go ahead and save an image on your computer next to your index.html and try to display it on screen.
Images can also have an alt attribute, short for alternate, and those are used for displaying text if the image is not able to load properly or for people using voice assistance technology when browsing sites so the alt text will be read aloud to the user.
<img src="bird.jpg" alt="bird flying through the sky" />
Lists
Lists are used for displaying groups of items together. They look like this:
- I am a list item
- I am a list item
- I am a list item
or like this:
- I am first
- I am second
- I am third
The first list can be made like this:
<ul>
<li>I am a list item</li>
<li>I am a list item</li>
<li>I am a list item</li>
</ul>
<ul> stands for Unordered List and it should be used when the order does not matter.
If order matters, you can use <ol> for Ordered Lists.
<ol>
<li>I am first</li>
<li>I am second</li>
<li>I am third</li>
</ol>
Links
Links create a clickable link on your page. This link can take the user anywhere you want, such as another website or another page on your site, or even just another scroll position on the current page.
<a href="https://google.com">I am a link to Google</a>
The <a> element stands for anchor and the href attribute is the destination.
You can also make it so the new link opens in a new tab in the browser automatically by including a target attribute.
<a href="https://google.com" target="_blank">Click to open in a new tab</a>
You can also make links open the users default mail application to send an email to a specific address.
<a href="mailto:test@gmail.com">Send me an email</a>
Divs
Divs are used for grouping other elements together. This allows large web pages with thousands of elements to be organized logically.
Divs provide no formatting, except for adding new lines between divs.
<div>
<h1>Welcome</h1>
<p>My name is Bob</p>
<a href="https://youtube.com">Check out my youtube channel!</a>
</div>
Attributes
Attributes are used for passing extra information to the element. We have already seen many examples above, such as src and href, but there are dozens of attributes that can be used and each element can have their own specific attributes.
To learn about all available elements and attributes, check out w3schools html tutorials for more information.
Before moving on to the next lesson, experiment with creating a full webpage with many different elements, don’t worry about styling it to make it look pretty yet.