HTML stands for Hypertext Markup Language and is used to define the structure and content of a webpage. HTML is made up of elements such as headings, paragraphs or images. Elements are created by surrounding content between an opening and closing tag. Tags are created using angled brackets and closing tags include a forward slash.
<tag>content</tag>
Some of the most common tags include p for paragraph and h1 to h6 for headings.
The content inside a tag could be text or you can ‘nest’ additional elements which are referred to as ‘children’ of that tag. Nesting tags is an important part of writing HTML and organising content on a webpage. For example, you can create an ordered or unordered list using the ol or ul tag. You can then nest li tags to create each item within the list.
Some HTML elements are structural, such as divs and spans. They are invisible, but are used to group elements together and define sections in your webpage.
Attributes can be placed inside the opening tag and provide additional information about an element, such as the source of an image or destination of a link. Global attributes can be applied to any element, common examples include ids and classes. They apply a label to an element, allowing you to target it in future using other languages. Element-specific attributes are unique to an element, some are necessary for that element to work. For example, to create a link you can use the <a> tag which requires the href attribute, used to specify the destination of the link.
<tag attribute = “value”>content</tag>
Elements that are self-contained; only require attributes and not content, don’t need an end tag. For example <img src = “image.png”, alt = “an image”> places an image on the webpage.
The style of your elements need to be written in a different language. This language is known as CSS. While it’s possible to use the style attribute to write CSS inside an element, this is strongly advised against. It’s best to create and link to a separate CSS file, but that is a different topic.
The basic starting structure of a HTML file starts with the doctype declaration that tells the browser what version of HTML is being used. This is followed by the HTML element which contains two children; head and body. The head element contains metadata about the webpage while the body contains the actual content on the page. This basic structure is known as boilerplate.
An important part of writing HTML is using indentation. Indentation refers to creating a space on each new line of nested code to improve readability and organisation.
You can write HTML code in something as simple as notepad. But it's extremely helpful to use a dedicated text editor such as vscode, sublime text or notepad++.
Once you have saved your file in HTML format, you can copy the file path into any web browser and congratulations, you have created a web page.