HTML, despite what impressions you may have, is not a programming language. It doesn’t have logic, it doesn’t behave a certain way based on user interaction – things are either there, or they’re not. HTML instead is what’s referred to as a markup language. Markup essentially means a way to format and organize data (or out content) in a way that browsers can understand, parse through, and render accordingly. By itself, HTML is quite simple and mundane.
There are essentially three parts to HTML: tags, attributes, and content.
Tags are the cornerstone of every HTML file. They are how we specify what elements we want to appear in our HTML page, and contain all of our site’s content. Tags come in two parts: an opening tag and a closing tag, with content appearing in between. The opening and closing tags let browsers know where an element starts and ends. (A few tags do not require closing tags).
Opening tags are formatted using an ‘<’ followed by the tag or element name, followed by ‘>’. Closing tags are formatted using a’<’ followed by a ‘/’, the tag or element name, then a ‘>’. For example, if we wanted a paragraph of text (paragraphs use the ‘p’ tag name), we would use the following format:
<p>This is my paragraph of text.</p>
If tags are the nouns of our markup (they tell the browser what element we want), attributes would be our adjectives, describing how we want our elements to appear. Attributes appear between the element name and the ‘>’ tag, and have the format attribute=”value”. Attributes never appear in closing tags, only opening tags. For example, if we wanted our paragraph to be center-aligned on the page:
<p align=”center”>This is my centered paragraph of text.</p>
As you may have guessed, the third part, the content, is what appears between our opening and closing tags. There’s nothing special about content – it’s just the text we want to appear inside an element. Of course, we don’t always want text content inside our tags, but rather images or other elements. Tags can be nested. For instance if you want bold text inside of a paragraph, you can do the following (bold text uses either the ‘b’ or ‘strong’ tag name, although ‘strong’ is preferred):
<p align=”center”><strong>This is my bold, centered paragraph of text.</strong></p>
Just make sure your nested tags are closed in the same order they are opened, and they do not overlap. For instance, this is bad:
<p align=”center”><strong>This is my broken, bold, centered paragraph of text.</p></strong>
That’s really all there is to HTML. The rest, as they say, is just details.