HTML sub-guide
- HTML
- HTML Skeleton
- Headings
- Paragraphs
- Anchors
- Media
- Lists
- Attributes
- Links
- Meta
- Semantics
- Non-semantics
- Styles
- Tables
- iframes
- Forms
- Buttons
- Select
- Datalist
- Template
- SVGs
- Comments
This crash course targets beginners in web development. It helps and guides those who want to have a thorough understanding of HTML tags. It can also be a refresher for advanced developers.
You can find the code and guide on my GitHub html-guide. Here is the second part of this article which tackles HTML Text Formatting. Enjoy!
1. HTML
So What's HTML?
HTML is a Hypertext Markup Language. It is not a programming language; it's just a way of structuring the content and rendering it on a webpage. To use this markup language, you will have to employ HTML opening tags <> and closing tags </>.
So what do you have to learn in HTML? You need to understand the basics.
Note that when you create a new file you have to save it with an .html
extension. For instance, the homepage is conventionally named index.html
.
2. HTML Skeleton
HTML skeleton triggers the environment where you are going to work. Before starting any projects, you will have to include the following HTML skeleton:
<!-- `DOCTYPE html` refers to the declaration of the HTML version you are using which is basically HTML5. -->
<!DOCTYPE html>
<html>
<head>
<!-- We use <meta> tags to add data that characterises a webpage. -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <title> tag allows you to add the website's name. -->
<title>Webpage</title>
<!-- <link> tag lets you add stylesheets where you can add styles to the webpage. -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Inside the <body> tag, we add all that has to do with the webpage content. -->
</body>
</html>
3. Headings
Headings are titles that go from <h1>
, the biggest, to <h2>
, the smallest.
<h1>I am a title</h1>
<h2>I am a title</h2>
<h3>I am a title</h3>
<h4>I am a title</h4>
<h5>I am a title</h5>
<h6>I am a title</h6>
4. Paragraphs
We use <p>
tags to declare paragraphs.
<p>I am a paragraph.</p>
5. Anchors
We use <a>
tags to create hyperlinks that take the user to another page other than the current one or navigate in the same page.
<a href="http://www.google.com">Visit Google</a>
6. Media
6.1. Images
We use <img>
tags to add images. Note that these tags are self-closing tags which means they don't require a closing tag; it closes itself.
<img src="apple.jpg" alt="apple" />
src
and alt
attributes are required. src
contains the image path. alt
contains a brief phrase about that image so in case the internet breaks down somehow, the user will still know what the image is.
6.2. Videos
We use <video>
tags to insert videos.
<video controls>
<source src="olaf.mp4" type="video/mp4" />
</video>
<!-- video tags can have multiple attributes to give the videos some functionalities like:
1. 'controls' to make the video controllable by the user.
2. 'muted' to make the video in silent mode.
3. 'autoplay' as the attribute suggests to make the video play when a webpage first loads
4. 'poster='thumbnail.jpg' to place a poster before the video kicks off.
-->
6.3. Audios
We use <audio>
tags to insert audios.
<audio controls>
<source src="olaf.mp3" type="audio/mpeg" />
</audio>
<!-- audio tags can have multiple attributes to give the audios some functionalities like:
1. 'controls' to make the audio controllable by the user.
2. 'muted' to make the audio in silent mode.
3. 'autoplay' as the attribute suggests to make the audio play when a webpage first loads.
-->
7. Lists
7.1. Ordered Lists
Ordered lists are number-based lists. They go in chronological order.
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
7.2. Unordered Lists
Unordered lists are bullet point based. They are not organised in chronological order.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
7.3. Definition Lists
Definition lists are description based lists. They contain descriptions and terms attached to them.
<dl>
<dt>Item 1</dt>
<dd>Item 1 is an amazing product which you can buy</dd>
<dt>Item 2</dt>
<dd>Item 2 is a fantastic product</dd>
</dl>
8. Attributes
8.1. Ids
We use an id
attribute when an element has a unique style that's not common.
<p id="unique">
<!-- Note that you can give any other name. It doesn't have to be 'unique', it can be a name of your choice such as 'text', 'danger' etc. -->
I have an id attribute. You can only select me because I'm unique.
</p>
8.2. Classes
We use a class
attribute when some elements share common styles. We can also reference single elements.
<p class="red-text">
I have a class. That doesn't make me special. Other tags and I have a common class because we share common styles.
</p>
<p class="red-text">
I'm another tag that shares the same style as my neighbour tag
</p>
8.3. Hyper-reference
We use <a>
tags to create a hyperlink. To make it work, we need to insert the link inside the attribute href
, which stands for hyper-reference.
<a href="http://www.domain.com"
>I have got a hyper-reference (href) on me so you can go to that link</a
>
8.4. Source (src)
We use the src
attribute to add the image path.
<img src="cat.png" />
8.5. Alternative (alt)
alt
plays the role of an alternative for images not being displayed due to connection problems. It shows up the phrase you include inside the alt
attribute.
<img src="cat.png" alt="this is a cat" />
8.6. Style
We use the attribute style
to add some styles to the elements.
<p style="color: red;">I'm a paragraph and my color is red</p>
Note that there are three ways of adding styles to a webpage:
- Inline style. This is achieved through employing the attribute
style
inside a tag element. - Style tag. This tag is implemented inside the
<head>
tag. - Separate stylesheets.
8.7. Title
The title
attribute gives a brief description of elements being hovered on. For instance, when a user hovers over a logo, a text shows up displaying 'Home'.
<a href="http://www.youtube.com" title="go to YouTube">YouTube</a>
9. Links
Let's agree on something. This link
is not like the hyperlinks enclosed by <a>
tags. We add this link
tag inside the head
as it contains stylesheets.
<link rel="stylesheet" href="style.css" />
10. Meta
<meta>
tags contain special data about a webpage.
<meta charset="UTF-8" />
11. Semantics
11.1. Header
<header>
tags always come at the top of the webpage inside the
<header>
<p>Hello I am a paragraph inside a header.</p>
</header>
11.2. Main
<main>
tags appear between the headers and footers. They usually contain the centre or essentials of the webpage such as sections, articles, figures etc.
<main>
<p>Hello I am a paragraph inside a main.</p>
</main>
11.3. Footer
<footer>
tags appear at the end of a webpage. They usually play the role of the ending. They contain contact information, navigation links and copyright statements.
<footer>
<p>Hello I am a paragraph inside a footer.</p>
</footer>
11.4. Navigation
<nav>
tags are shorthand versions of navigation. We use them when we want to add a navigation bar.
<nav>
<a href="index.html">home</a>
<a href="about.html">about</a>
<a href="contact.html">contact</a>
</nav>
11.5. Sections
<section>
tags are used to structure our content in a better way. A webpage can have multiple sections; each section tackles a specific area.
<section>
<p>I'm inside a section</p>
</section>
11.6. Articles
<article>
tags are used for self-contained content such as a blog post etc.
<article>
<p>I'm inside an article tag</p>
</article>
11.7. Asides
<aside>
tags are used to display parts of the content and they are often presented as sidebars.
<aside>
<p>
I'm inside an aside tag. You will find me on the right or left side of the
webpage
</p>
</aside>
11.8. Figures
<figure>
tags are handy when we want to insert an image or a document that has a caption under it.
<figure>
<img src="parrot.jpg" alt="this is a parrot picture" />
<figcaption>Fig1. - Red Parrot.</figcaption>
</figure>
11.9. Blockquotes
<blockquote>
tags are meant to wrap quotes.
<blockquote cite="http://en.wikipedia.org/wiki/Main_Page">
I'm a quote taken from a wikipedia page.
</blockquote>
12. Non-semantics
12.1. Spans
<span>
tags are a quick way to grab the content inside it and give it a unique style with CSS or functionality with JavaScript.
<span>I'm inside a span which makes me an inline element</span>
12.2. Divs
<div>
tags are important when we want to control children etc.
<div>I'm inside a div (division) which makes me a block element</div>
13. Styles
<style>
tag is a way to add styles to our webpage by selecting the elements from HTML and styling them. We usually place this tag inside the <head>
tag.
<style>
p {
color: red;
}
</style>
14. Tables
<table>
tags are meant to create tables on a webpage.
<table>
<tr>
<th>first name</th>
<th>last name</th>
</tr>
<tr>
<td>Brad</td>
<td>Smith</td>
</tr>
</table>
15. Iframes
<iframe>
tags are used to embed another document within the current HTML document.
<iframe src="demo.html" title="this is an Iframe"></iframe>
16. Forms
16.1. Form Tag
<form>
tag is meant to declare a form. Forms are important to get data from users. There are various types of forms such as sign-in, sign-up, contact forms etc.
<form action="#" method="POST">
<!-- Here where form elements have to be -->
</form>
16.2. Form Elements
<form action="#" method="POST">
<!-- A label tag acts like a title -->
<label>First name:</label>
<!-- Inputs -->
<!-- Inputs act like a field where you can type some data. -->
<!-- Inputs with a type of text are designed to have text in them. -->
<input type="text" />
<!-- Inputs with a type of password are designed to have passwords in them that are hidden. -->
<input type="password" />
<!-- Inputs with a type of radio display a radio button which allows you to select one of the multiple choices. -->
<input type="radio" />
<!-- Inputs with a type of checkbox display a checkbox button which allows you to select one zero or more than one choice. -->
<input type="checkbox" />
<!-- Inputs with a type of submit display a submit button that allows you to submit the form -- it technically comes at the end of the form. -->
<input type="submit" />
<!-- Inputs with a type of button display a clickable button that allows you to click. -->
<input type="button" />
</form>
16.3. Form Attributes
action
attribute is designed to take care of the data submitted. It is the endpoint where the data is captured. Once the user fills in the data and presses on submit, you will have to create a server path where the data goes and be dealt with on the server-side.
<form action="#" method="POST">
</form>
method
attribute determines the HTTP method you want to apply before the data is sent to the server. These methods are POST, GET, DELETE etc.
17. Buttons
17.1. Button Tag
<button>
tags are meant to create clickable buttons.
<button type="button">click me</button>
17.2. Button Input
<input>
tags with a type of button are also meant to create a clickable button.
<input type="button" value="click me" />
18. Select
<select>
tags are meant to create a dropdown list with options. The user has to choose one of the options.
<select>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="black">Black</option>
</select>
19. Datalist
<datalist>
tags allow you to create a dropdown list with options like <select>
tags; however, the difference is that <datalist>
tags allow users to add their own options if they are not okay with the recommended ones.
<input list="colors" />
<datalist id="colors">
<option value="red">
<option value="blue">
<option value="black">
</datalist>
Note that the <input>
tag is important. It provides the user with a field where they can type their own option.
value
attribute adds a value to the options. There is another way to it, excluding the value
attribute:
<input list="otherColors" />
<datalist id="otherColors">
<option>yellow</option>
<option>brown</option>
<option>green</option>
</datalist>
20. Template
<template>
tags are used to hide data and manipulate it using JavaScript to display it.
<template>
<p>I'm hidden inside this template till a user click to display me</p>
</template>
21. SVG
<svg>
tags are used to create SVGs.
<svg>
<rect height='100' width='100' style='fill: red;'>
</svg>
22. Comments
<!-- This is a comment in HTML -->
<!-- Comments don't show up on a webpage -->
Thank you for your attention. I hope this course has been as informative as you expected. There is more to it, but covering every bit of HTML would be distracting. I have picked up the most important tags which you will end up using sooner or later.
For more, follow me on Instagram @cesarcode.init
Top comments (8)
Headings are titles that go from h1, the biggest, to h6, the smallest
I know this is a beginner tutorial and you have to decide what is important to understand but you assertion is not technically accurate. h1-h6 determines importance not size. H tags are semantic and are critical for screen readers and web crawlers. The size is determined by CSS classes which by default go largest to smallest to REPRESENT importance
Thank you for your observation.
That's the point; however, since it's a beginner tutorial, I wanted to keep it not only friendly but also not that detailed. A beginner sometimes finds it hard to understand HTML tags, let alone web crawlers and screen readers. We were all in their shoes. Things mustn't escalate.
I'm leaving web crawlers and all of that to another article which I'm currently working on.
Very informative and concise.. thx bro👏👏
So much good information here really great for beginners.
Wow, that's awesome ! Thanks so much, keep it up like CSS or JS bro !
Thank you! Yes, it's coming out soon.
Nice summary. Thumbs up!
Thank you very much!