Lay the foundation of every webpage
We’re ready to start looking at what makes up HTML. We’ll examine HTML elements and we’ll see how those elements fit together to form a web-page. Later, we’ll look at HTML5 and some of the differences between it and the previous versions.
Each HTML site has a few tags that must be present. These include the doctype, html tag, head tag, and body tag. As a matter of fact, each time you start creating any website, you’ll want to include these elements first to get them out of the way of more complicated code.
<!DOCTYPE html
<html lang-"en">
<head>
‹meta charset-"UTF-8">
‹title›Title</title›
</head>
<body>
Hello, my name is Dino Cajic
</body>
</html>
Open your favorite IDE (Integrated Development Environment) and enter the following code into it. You can enter the following in Notepad, although for more advanced code, you’ll want to have the nicely color-coded editor.
Save it as index.html. Why index? Web-servers know to look for the index file as the main file. If you upload your website to the main server folder, usually public_html, the server software will look for the index.html or index.php file. Since that’s the default file name, you don’t have to specify the file name in the address bar when you’re entering the address.
For example, you can enter dinocajic.xyz or dinocajic.xyz/index.html; they’ll both lead you to the same page. The file index.html should be lowercase since some servers won’t know to look for the uppercase version. Your other files should also be lowercase. If multiple words are used to construct the file name, utilize either an underscore or a dash as separators. For example, if you’re creating the About Us page, you should name the file either about_us.html or about-us.html.
Once you open the page in your browser, you’ll notice a mostly empty screen with the text “Hello my name is Dino Cajic” written on it. Inspecting the source code, you’ll notice that the html you’ve written is right there.
As you can see, there are a few tags that make-up this file. The first one, <!DOCTYPE html>, is not actually an html tag. It’s just a way to tell the browser the version of the html document. <!DOCTYPE html> signifies that the following code is written in HTML5 and that the code should be rendered as such. Prior to HTML5, the website designer had to worry about all sorts of different doctypes.
Thankfully, HTML5 simplified the process. Technically, you don’t need the doctype declaration at all if you’re targeting newer browsers only, but in order to keep older browsers happy, it’s good practice to include it. Visit https://www.w3.org/QA/2002/04/valid-dtd-list.html to see a list of all the prior doctype declarations.
The next tag is the <html> tag; it signifies the start of the document. You should get into the habit of closing your tags instantly so that you don’t forget. The <html> tag is closed with the </html> tag. The <html> tag can have an optional language attribute. However, it is good practice to include it (for example, <html lang=”en”>). Once you close the tag, you can place your cursor in the middle, add a couple of spaces and start writing some new nested tags.
The next tag is the <head></head> tag. The head tag is reserved for your:
· title,
· CSS code and CSS includes,
· JavaScript code and JavaScript includes,
· and meta tags to name a few.
The character encoding (utf-8 charset) is sent along with the HTTP header. The character encoding just makes sure that special characters are rendered properly. You don’t have to worry too much about it; just know that it should be included in the head.
The title tag, which is located within the head tag, contains the title of the document. If you look at the tab, you’ll notice the word “Title” displayed. That’s because we entered the word title between the title tags: <title>Title</title>.
The <body></body> tags will hold all of your visible content. This is where you’ll spend most of your time writing code.
HTML Series
Continue your HTML Learning.
Build the web one tag at a time
HTML — Starting With The Basics
Part one of our HTML fundamentals series walks you through the absolute basics: the <!DOCTYPE> declaration, <html>, <head>, and <body> tags, text elements, links, images, and the semantic mindset that turns plain markup into well-structured, accessible pages.
Lay the foundation of every webpage
HTML — Basic Website Structure
Part two of our HTML fundamentals series shows how a well-organized file turns scattered tags into a real website. Build the classic header-main-footer layout, add navigation links, embed assets, and keep markup semantic for accessibility and SEO.
Meet the building blocks of markup
Part three of our HTML fundamentals series explores the vast library of elements that give every page its purpose. From headings and paragraphs to lists, forms, and multimedia tags, learn each element’s role, default behavior, and best-practice usage for clean, semantic markup.