Skip to content

HTML Basics

Jump to bottom
Gingertonic edited this page Feb 19, 2021 · 3 revisions

Mandatory Tags

There are four tags which are mandatory on a website, these are:

<!DOCTYPE>
<html>

    <head>
    </head>

    <body>
    </body>

</html>

Pairs of Tags

HTML tags should almost always have be in pairs, an opening and a closing tag with content between them.

<h1>This is a heading</h1>

The exception to this rule is a self-closing tag, which does not contain content.

<br/>

Nesting

We can create tags inside of tags to better organise the content of our HTML, this is know as nesting.

<header>
    <h1>Title of Page<h1>
    <h2>Subtitle of Page<h1>
</header>

Attributes

Attributes enable us to add extra information to tags, such an #id or a .class, to differentiate between them.

It's important to rememebr that IDs are unique and classes are not as they can be used to label a group of tags!

<div id="newsfeed" class="blue-border">

An attribute can also be used to provide data such as the src of an image tag or the value of an input tag.

<img src="image.png" alt="An image"/>

Comments

As developers, a big part of our job is to write readable code.

One way in which we can achieve this when code gets bloated or confusing is to leave notes to ourselves in the form of comments.

<!-- This is our main header -->

<h1>Title</h1>

Whitespace

Another way in which we can make our code readable is to properly indent and leave the appropriate white space.

This is only for our benefit as when the browser reads our code to display back to us, it removes all of the whitespace.

Googling

Developers spend a lot of time on google searching for syntax, helpful articles, etc.

This isn't a bad thing, developers are not meant to be databases for knowledge, that's why we built the internet. The resources on the web are available for us to pull on as and when we need it.

Being a developer is like one big open book test - so please make use of these resources yourself!

Resources

For more information on our transformative coding education, visit us at https://www.lafosseacademy.com/

Clone this wiki locally