Having spent the better part of the past few days answering questions about HTML, CSS, and JavaScript, I figured I’d write a series to help a beginner progress from knowing nothing about web development (and/or coding in general), to being able to kinda sorta make a website, to having a strong foundational understanding of what goes into building the front and backend of a website and a somewhat decent grasp of what the current landscape of web technologies looks like. But anyways, that’s enough of an intro, let's get started.
What is HTML?
In the grand scale of things, HTML serves as the structure for your website. HTML stands for HyperText Markup Language, so let’s try to break down what that means exactly, starting with “HyperText.” It’s text with a link. That’s all it is. Then we have the second part: “Markup Language.” In order for your browser to know how to structure the content on your page, you have to annotate it with tags, which raises the question...
What is a tag?
Tags in HTML usually come in pairs: you have opening tags and you have closing tags. Opening tags consist of a “<”, a word, and then a “>”. Closing tags differ slightly, as they have a “/” before the word (eg. “</section>” ). There are, of course, exceptions to this rule but that's a topic for a later time. Anything in between a tag’s opening and closing is considered to be inside that tag. Tags can be nested inside each other, for instance:
<outer>
<inner>I’m a inner tag</inner>
</outer>
Quick note: It is generally a best practice to indent every time you nest a tag inside another tag.
Making your first .html file
Though it might be hard to believe, your HTML code typically goes in a .html file. In order to make a .html file, you’re going to need a text editor of some sort. My personal preference is Sublime Text, but you can use Notepad or TextEdit or Notepad++ or MS Paint, it doesn't matter.
Once you have that set up, start off by making a new file and saving it as <filename>.html (pick a filename). After you have it saved, open it in the browser. If you’re using Sublime Text, that’s as easy as right-clicking and selecting “Open in Browser,” but if not then locate it in your files and open with your browser of choice. Technically at this stage you have accomplished the objective but let’s try to do a bit more.
Quick note: Typically you want to name your html files index.html, since that is the default directory file loaded by a web server.
The Document Type Declaration
Now the first line of pretty much every HTML file you write is going to be the same, and it’s not a tag.
<!DOCTYPE html>
This line tells the browser what kind of data to expect, in this case html, and ensures that it follows the proper standards when rendering your content.
The <html> tag
The first actual tag for your .html file is...the html tag. This tag acts as the root element, so all your other tags will be nested inside it.
<!DOCTYPE html>
<html></html>
The <head> and <body> tags
Now inside your html tag we need to add two tags: the head tag and the body tag.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
The head tag is used to store information about the page, such as the page’s title, additional metadata, links to supporting files, etc. For now we’re not going to worry about that. What we do care about is the body tag, where all our content is going to go.
Adding some text
Lastly, let’s add some text to our web page. The tag we’re going to use to wrap our text is the <p> tag, for paragraphs.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p>I’m a paragraph.</p>
</body>
</html>
Wrapping up
And now, we’re done. Once you save, you can reopen your .html file in the browser, or just try refreshing the page, and you should see some text. Hopefully you guys find this introduction to be moderately useful, and next time we’ll get started with some more information about tags.
Top comments (0)