HTML Basics
TLDR – To Long, Didn’t Read
- All HTML Documents must Start with a document type.
<!DOCTYPE html> - After the
<!DOCTYPE html>HTML Documents will be sandwiched between<html>and</html> - Web Browsers Render what’s in between the opening and closing body tags
<body></body>
HTML is used to describe the structure of a webpage and consists of a series of elements. Each element tells the browser how to display the content.
Elements are represented by tags that have special meaning for how the content is displayed in the browser.
Check out the code example below right demonstrate a typical HTML document structure.
HTML Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Html Tutorial">
<meta name="keywords" content="html, css, javascript etc">
<title>Home Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<article>
<h2></h2>
<p></p>
</article>
</section>
<aside>
</aside>
<footer>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</footer>
</body>
</html>
As you can see in the code example above we have our DOCTYPE tag followed by the opening HTML tag with the language attribute.
Then we have our opening head tag which contains other tags and information that won’t be viewable on the front-end of the webpage but is important information to provide to the web browser and also to link to external assets.
We then have four meta-tags. Meta tags represent metadata associated with the HTML document. You also often find attributes used with the meta tag like name which would describe the type of metadata, content which specifies the value and charset to declare the character encoding used to render the content.
- The first one is for the charset
- the second one is for the viewport which sets the scale at one
- the third meta-tag is for the description which is where you would put a short description about that particular webpage which is what the browser will use as an excerpt in the search results.
- The fourth meta-tag is for keywords that you might want to focus on but generally isn’t important for search engine optimization anymore.
We then have our title tag which would display the name of that particular webpage and then the closing title tag.
We also have the link tag which is used to inform the web browser to load another asset that’s needed for the webpage. In this case we link to our stylesheet.
We then close off the head section with the closing head tag.
There are other meta-tags and HTML tags that we can use in the head section of our HTML document but I’ll save that for a more thorough tutorial on the head section of the webpage.
Then we have our opening body tag which is the parent element for all other HTML tags and content that will be displayed on the front-end of the website.
We then have our opening and closing header tag. This is often where you will find your site logo along with the tagline and sometimes, you’ll also find a navigation menu.
We then have our opening and closing nav tags. In between the opening and closing nav tags is where you will find links to other pages from the website.
We then have our opening section tag which is a generic HTML element that is used as a container for additional HTML tags.
We then have our opening article tag which is typically used for your main article or as an excerpt on your blogroll page.
Right after the opening article tag, we have our h2 tags which in this case would be used for the title of the article.
Then we have our opening and closing paragraph tags which would hold a standard paragraph.
We then have the closing article tag followed by the closing section tag.
Then we have the aside opening and closing tags which is where you would put secondary items on a webpage that may be directly tied to the main content of the article. Typically, this will be a sidebar in either the left-hand or right-hand side but can also be used in other areas of your webpage.
We then have our opening footer tag which is for the bottom portion of our webpage and can be used to display copyright information, another navigation list, contact information etc.
Nested inside the footer tags we have an unordered list which can be for featured articles or pages or any information that is typically displayed in the footer section in list format.
There’s also other types of content that he can place in the footer section but I’ll save that for another tutorial. We then close off our footer tag, our body tag and HTML tag.
This is an example of a very generic template that can be used for regular webpage.