HTML?
an easy and straightforward html introduction.
What is HTML?
HTML stands for Hyper Text Markup Language. It’s the standard markup language for creating web pages. HTML works to describe the structure of a web page. Think about what one of your favorite web pages looks like. Whats the hierarchy? Is there a main header? Maybe a body section? If so whats written within these sections of the web page. Thats where HTML comes into play. It’s essentially a language used in documents designed to be displayed in a web browser.
Elements — are a type of HTML document component. Really I like to believe that it’s the star of the show, theres really no HTML without elements. Elements tell the browser how to display the content. An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here…</tagname>
just like that ^. Everything from the start tag to the end tag is considered an element.
Lets go over a simple HTML document and walk through common tags and their functionality:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <!DOCTYPE html> declaration defines that this document is an HTML5 document. HTML5 is the latest specification of the HTML language, basically the latest version. This tag is the very first line in the HTML document. It tells the browser what version of HTML the document is written so that the browser knows what to expect.
The <html> element is the root element of an HTML page. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag). Just remember the <html> is home to all elements. If you want it to show on your web page make sure it is within the <html> tag.
The <head> element contains meta information about the HTML page. The <head> tag in HTML is used to define the head portion of the document which contains information related to the document. This tag can also contain other head elements such as <title>, <meta>, <link>, and <style>. There is an abundant amount of different HTML tags, check them out here for reference.
The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. This tag is required in HTML documents! The contents of a page title is very important for search engine optimization (SEO). The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note that there can only be one <body> element in an HTML document.
The last two elements are pretty straightforward the <h1> element defines a large heading. The <h1> to <h6> tags are used to define HTML headings.<h1> defines the most important heading. <h6> defines the least important heading.
Lastly the <p> element defines a paragraph. Pretty simple. Browsers automatically add a single blank line before and after each <p> element.
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags, but uses them to determine how to display the document. Your web page will not display <h1>Welcome to my Blog</h1> but instead will display just the content Welcome to my Blog.
While in my bootcamp, HTML was one of the learning factors that took a second to understand and digest — however once I got the hang of it, it was a breeze. It’s actually really fun believe it or not. Once you get a hang of HTML and a bit of CSS (Cascading Style Sheets), formatting and styling makes all the difference to your web page.
“You don’t understand anything until you learn it more than one way.” — Marvin Minsky
Happy Coding —
