A few people getting started in web development have asked me to explain HTML to them. HTML (along with CSS) is one of those things where the basics can be explained in a few minutes, and the details will take the rest of your life to learn. Let me show you what those basics are, and then where to go for the details.
HTML stands for HyperText Markup Language. "Hypertext" is just a made-up word that sounded cool in the early '90s. A "markup language" is any writing in a text that is not the actual content, and that helps structure the content.
The most common example of a "markup language" that you are already familiar with is punctuation. In English, a capital letter denotes the beginning of a sentence, a period (or similar character) indicates the end of a sentence. A comma separates clauses. An indent highlights the beginning of a paragraph. All these are written additions to the text that are not the content, but give structure to the content. HTML does this for web pages in a way that is easily readable by computers.
Instead of punctuation marks, HTML uses tags. Tags are bits of text in between triangle brackets ("<" and ">"), and they describe HTML elements. HTML elements each have three characteristics:
Here is an example of an HTML element:
<p style="background-color:yellow;">Welcome to my website!</p>The type is "p" (short for "paragraph"), there is a single attribute named "style", and there is only one child: a string of text that says "Welcome to my website!". This HTML code lets the web browser know that there should be a paragraph with a yellow highlight that has a greeting.
Incidentally, it will look something like this on a website:
Welcome to my website!
Anything in between the angle brackets is not visible on screen; it merely tells the computer some information about how content should be displayed.
There can be zero or more attributes, and zero or more children, but there will always be a type. The <p ... > tag opens the element, and the closing tag, </p> closes the element - just like a capital letter and a period indicate the opening and closing of a sentence. The attributes that apply to this element are placed in the opening tag. They are separated by spaces, and are written as the name of the attribute, followed by the equals sign, followed by the value of the attribute in double quotation marks. The closing tag has the same type as the opening tag, with a forward slash "/" placed before it to indicate that it's a closing tag. Lastly, the sub-elements or children go in between the opening tag and the closing tag.
Here are some other examples of HTML elements:
(elements with no children)
<img src="my_picture.jpg" />
<div></div>
(element with no attributes)
<div>cool</div>
(element with no children or attributes)
<hr />
(element with several children)
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
A couple things to note:
Elements with no children, such as the img (image) tag, needn't bother with a closing tag, so a slash is added at the end of the opening tag, making it a self-closing tag. It doesn't have to be done that way, but it just makes things clearer, and saves on your keystrokes.
As in the example with <ul> (unordered, or bullet-point list), the closing tag can be on a different line than the opening tag. As long as the closing tag exists and is placed after all the children, the browser will understand it just fine. This means that you cannot open a tag within an element, then close it somewhere else:
(this is wrong)
<p>This is a <span>really special</p>
<p>pair</span> of paragraphs</p>You may have also noticed that the child elements (in this case, <li> (list items)) are indented in the code. This is for the developer. It's just a visual cue that the <li> elements are inside the <ul> element. HTML ignores "whitespace" - spaces, tabs, line breaks, etc - which means you can put it all on one line, or split it over a thousand lines, and it will all look the same in the browser. This means that you can arrange the HTML code in your text editor in a way that makes sense to you and that helps you keep track of where everything is. In the end, it's highly recommended that you have some sort of consistent style guide that you follow - just to keep you sane.
There are two websites that really helped me with learning HTML, CSS, and javascript. The first is w3schools. It's very popular, and is a very simple reference site. I would only recommend it for the absolute beginners. The other is the Mozilla Developer Network website, or MDN. This is an excellent reference site. Compared to most online resources, MDN is more consistently up-to-date, and goes into much greater depth, while still being understandable by the average developer. That said, there are thousands of references on the internet. If you are unsure about anything while making your websites, just google "HTML ...." then your question, and it's fairly certain that an answer to your question will appear.
Getting your webpage on the internet requires a server or host, and that's a subject for another time, but trying your hand at coding HTML is incredibly simple. All you need is a text editor and a web browser. The text editor could be anything - notepad, even. For beginners on Windows, I would recommend notepad++ - it's free, and it has a lot of features that you might find useful later on. For people on other platforms, you might try Atom, which is also free and open-source. For now though, anything will do. Similarly, any browser will work, such as Chrome or Firefox.
Create a file. It can have any name, as long as the extension is .html. Open the file in the text editor and type in the following:
<html>
<head>
<title>My First Website!<title>
</head>
<body>
<h1>Welcome</h1>
<p>This is my first web page!</p>
</body>
</html>There are three important tags to learn here. <html> wraps the entire page. It tells the browser that "this is a single web page". If you leave it out the browser will figure things out, but if you want a truly "correct" html document, place this tag at the beginning and end of the file. The <head> tag gives extra information about the page, such as the author, the title (visible in the status bar of the browser), the language, what search engines like Google should do, and so on. Text in this section will not be printed on screen. If the web page were a book, then the head section would be like the front and back covers, the title page, and the publisher's information. The <body> tag is what we're really interested in. This is where all our content goes. You'll mostly be editing this section.
Save the file, and open it in your browser. There are two simple ways to do this. The first is to type the exact path of the file into the address bar, with file:// in front of it. In Windows, it would look something like this: file://c:/Users/Me/My Documents/learning_html/index.html. The other way is to locate the file with a file browser, and drag that file to the address bar. This will automatically paste in the filepath and open the page.
Edit the web page, save, and refresh. Repeat.
When you feel you've got the hang of things, move on to learning CSS, and using a server.