HTML stands for Hyper Text Markup Language. While not a traditional programming language (it is technically a markup language), it’s what we use to create web pages. A markup language is generally used to define the structure and display of content, HTML is no different.
To write HTML, one of the first things you will need is a plain text editor. Most operating systems come with this capability built-in (TextEdit on the Mac and Notepad on Windows). While these applications work fine, there are some benefits to using a programmer’s text editor such as Atom, Sublime Text or VS Code.
In particular, they have line numbering, syntax coloring and other features that will make it easier to work with.
I recommend using VS Code, as it has a few extra features (built-in terminal, remote file editing) that will come in handy later in the semester.
HTML is a tag based language. This means that you define the structure of the content of a document using tags.
An example of a tag would be: <strong>some text</strong> which when rendered in a browser looks like this: some text.
Here are some tags that we’ll start with:
<html>...</html> Start and end HTML<head>...</head> Head of page, not actual content; Contains metadata about your page.
<title>...</title> Title of the page, displayed in the web browser tab; Also in search engine indexing, etc.<body>...</body> Body of the page, this is where the visible page content lives;
<p>...</p> → paragraph<h1> ... </h1> → headings (also h2, h3, ... h6)<strong>...</strong> → bolded text<em>...</em> → italicized text<small> ... </small> → small text<br /> → line break (notice that this tag doesn’t have any content and therefore is both an begin and end tag, with the slash)<hr /> horizontal rule → a line break which draws a line<a href="http://...">...</a> → a link to another page. The “href=""” portion is an attribute. Many tags have optional attributes, further details below.<div> ... </div> → Block-level grouping.<span> ... </span> → Inline grouping.
<!-- This is a comment --> CommentsHere is the source of an HTML example page:
<html> <!-- Start the HTML -->
<head> <!-- Start the Head -->
<title>This is a Web Page</title> <!-- The Title of the page, start and end tag with text in-between -->
</head> <!-- End the Head, always with a "/" -->
<body> <!-- Start the body -->
This is where you would put the content of the page. <!-- This is a comment and won't display -->
This will be on the same line as the above. To specify a line break, you use: <br />
This text will be a line down
<p> This text will also be a line down </p>
<!-- The <p> tag introduces a line break before and after the text on its own -->
<br /><br /> <!-- Two line breaks --> <!-- Line break tags include the closing "/" as part of them, there isn't a </br> tag. -->
</body> <!-- End the body -->
</html> <!-- End the HTML -->
To try this out, copy the above into a new text file and save it as something.html then open it in a web browser to see it.
Indenting (the spacing before each line that you see in the example HTML page above) isn’t strictly required, but it really helps YOU to see the nesting structure of the document. It gives you the ability to quickly recognize when you missed closing a tag, and keeps the code tidy.