Create your very first HTML document from scratch!

Vera -

Hi reader! In this post, I want to share with you the most important things to know about HTML in 2024, and guide you to create your first 'index.html' document from scratch. (Step-by-step guide at the end of the post)

Structure

Let's start with the base, understanding the structure is the first step in understanding HTML. 

<!DOCTYPE html>: First comes declaration, it specifies the document type and version of HTML being used.

<html>: The root element of an HTML page, normally contains language and directionality details. Inside, <html> we have three main tags <head> and <body>. What do they do?

<head>: Contains meta-information about the document, such as title, character encoding, and links to stylesheets (in case you have separate document with CSS styles). Find more about ways of adding CSS to HTML here.

<body>: Contains HTML document visible to users, basically all the text, images, links, etc. In the next section, let's take a deeper look at each tag.

With Visual Studio then you can just type '!' and press enter. It will automatically create HTML structure for you, like in the example below.

Tags

<h1> to <h6>: Used for headings, with <h1> being the highest level and <h6> the lowest. It's important to remember that there can be only one <h1> per page!

<p>: Defines a paragraph, used for small text sections. Check the example of heading and paragraph tags right below.

<a>: Creates hyperlinks to other web pages or resources that you specify in href. Remember that links are always connected to something that user can see on the screen. Normally inside the <a> you will have a text, image or button, something visual that the user can click.

<img>: Inserts images into the document. Requires a link of the image and description. Btw the description is quite influential to website positioning in search. (Companies like Google force it to make sure blind people can still use it, what I think is essential.)

<div> and <span>: Generic containers used for grouping and styling content. It's not visual to the user, but essential for the design side. When you need to add spacing between elements and make them be adaptable to different screen resolution.

<ul>, <ol>, <li>: Used to create lists. <ul> is an unordered list, which means all <li> list items inside it will be represented by bullet points or in other not counted way. <ol> is an ordered list, where all list items are ordered.

<table>, <tr>, <td>: Used for creating tables and defining rows and cells. First define a table with <table> tag. Inside, create table rows <tr>, and define how many table headers it will have with <th> tag. Last step add table data by using <td> tag.

Attributes

src: Specifies the source of an image or other media. For example, in <img> tags to show image stored in your files.

href: Defines the URL of a hyperlink. For example, redirecting link to another page. Example in <a> tag section.

alt: Provides alternative text for images, useful for accessibility and SEO. Example in <img> tag section.

id: Uniquely identifies an element within a document. All ids mast be different and used only once. It's an essential attribute to quickly interact with a specific element, when we want to modify it. To create an id use kebab-case, by adding '-' between words.

class: Shared identifier for multiple elements. For example when we have multiple buttons, they all could have the same class. It's a very common practice when they all share the same design.

Semantic HTML

Semantic elements like <header>, <nav>, <section>, <article>, <footer> provide meaning to the content, making it more understandable to both humans and machines. Also, they improve accessibility by helping screen readers and search engines better understand the structure of the page.

Forms

<form>: Defines an HTML form for user input.

<input>, <textarea>, <select>: Elements used to create various form controls like text fields, text areas, and dropdown menus.

Attributes like 'action', 'method', and 'name' specify where form data should be sent, how it should be sent, and the name of the form data.

Validation

Nowadays, it's critical that all websites and web application can be used by anyone, therefore validating HTML ensures that your code follows the rules and standards set by the W3C (World Wide Web Consortium). Tools like the W3C Markup Validation Service can help identify errors and ensure cross-browser compatibility. Click here to find more about it, or here to download.

Follow this steps to create HTML document:

  • Create HTML file named 'index.html'. It's important to call it that way because many web servers are configured to look for an index.html file in a directory, provides cleaner and more intuitive URLs, and again let's not forget about SEO, it loves well-structured things.
  • Write HTML structure. More about it in the beginning of the page.
  • Give a website the title, it's reflected in the title bar of a web browser.
  • Decide how you want to add CSS, find more about it here
  • Open document in preview to see changes in life. I use Live Preview extension from Visual Studio, here is the link to download it. Now let's test the HTML with something, like <h1>Hello World</h1>, if it's reflected in the preview you are good to go.
  • Last step is to work on the <body>. It's better to move step by step when you're learning. First take a look at the website design and divide it by logical sections, using semantic HTML elements. Then identify all HTML elements that you want to add to the document. Most commonly it will be titles, paragraphs, images, links, and buttons. Depending on the complexity of the design, put elements in <div> tags to later easier manipulate their position and design on the website.

I hope this post was helpful, and you learned something new! Remember that starting is tough, but every step forward makes the impossible possible. Keep moving forward and practicing by creating small projects, where you can experiment with different tags and attributes.