DEV Community

Cover image for HTML Crash Course
César
César

Posted on • Updated on

HTML Crash Course

#html #tutorial #beginners #webdev

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

4. Paragraphs

We use <p> tags to declare paragraphs.

<p>I am a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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.
-->
Enter fullscreen mode Exit fullscreen mode

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.
-->
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
>
Enter fullscreen mode Exit fullscreen mode

8.4. Source (src)

We use the src attribute to add the image path.

<img src="cat.png" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

10. Meta

<meta> tags contain special data about a webpage.

<meta charset="UTF-8" />
Enter fullscreen mode Exit fullscreen mode

11. Semantics

11.1. Header

<header> tags always come at the top of the webpage inside the

tag. It's like an opening that usually contains a logo, a navigation menu, a search bar etc., depending on the projects.
<header>
  <p>Hello I am a paragraph inside a header.</p>
</header>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

21. SVG

<svg> tags are used to create SVGs.

<svg>
  <rect height='100' width='100' style='fill: red;'>
</svg>
Enter fullscreen mode Exit fullscreen mode

22. Comments 

<!-- This is a comment in HTML -->
<!-- Comments don't show up on a webpage -->
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
aarone4 profile image
Aaron Reese • • Edited

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

Collapse
 
cesar_code profile image
César •

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.

Collapse
 
xxdaniel123 profile image
xXDaniel123 •

Very informative and concise.. thx bro👏👏

Collapse
 
andrewbaisden profile image
Andrew Baisden •

So much good information here really great for beginners.

Collapse
 
nnguyenminh profile image
nnguyenminh •

Wow, that's awesome ! Thanks so much, keep it up like CSS or JS bro !

Collapse
 
cesar_code profile image
César •

Thank you! Yes, it's coming out soon.

Collapse
 
aesprii profile image
Aesprii •

Nice summary. Thumbs up!

Collapse
 
cesar_code profile image
César •

Thank you very much!

Read next

hassanazhar profile image

Detailed Comparison of Prettier, Biomejs, and VoidZero

Hassan Azhar -

hana_sato profile image

Real-Time Processing of Big Data: Tools and Best Practices

Hana Sato -

kanhaiyabanjara profile image

Web APIs

Kanhaiya Banjara -

uhteddy profile image

Introducing svelte-bundle

uhteddy -