HTML stands for HyperText Markup Language and is responsible for web page formatting. It denotes which text is a heading, link, paragraph among many other things.
HTML uses predefined tags that enclose a particular line or block of text. The tags open at the start and close at the end of the text like so:
<h1>Heading </h1>
These tags and their contents combined can be called elements. The closing tag must have a forward slash after the first angled bracket. If there’s no closing tag the entire text will be formatted to the opening tag style format until a closing tag is found.
Some elements have no closing tags. These are called self-enclosing tags, e.g <br>, </hr/>, and <img/>.
HTML Standard Format
All HTML pages must contain a standard set of elements for proper functionality.
<!DOCTYPE html> <html> <head> <title>Document Name</title> </head> <body> <!--Page Content goes here--> </body> </html>
You need to know standard procedures. It’s easy to see things working and displaying but applied wrongly.
The HTML doctype
This is specified at the beginning of the HTML document. It denotes the HTML version being used. HTML 5 is the modern version of HTML.
HTML Tag
This element encloses all elements on the page. This is the root element
Head
The head tag contains the document’s info like its title, meta info, and links to stylesheets and scripts.
The contents of the head element are not rendered on the page but used internally by the browser. The title tag is displayed on browser tabs and must be present in all HTML documents.
Body
The body tag encloses all elements that will be displayed on the page.
Inline Elements
HTML elements are typically grouped into block or inline elements. Inline elements are used to encapsulate free-flowig text that is inline with other text like this:
Inline elements only occupy the space covered by the text, i.e they end where the text ends.
Some common inline elements:
<a> Link element
Used for displaying hyperlinks.
<a href="https://google.com" title="Google search">Search</a>
Output:
Search<img> Image
Used for displaying images
<img src="https://webdesyn.com/wp-content/uploads/2024/09/comm-lg-300x200.jpg" alt="People in city">
Output:
<span> Span
The span tag has no meaning. Typically used for for wrapping inline text or other inline elements without any formatting.
<em>Italics
Used to emphasis text. The text will be displayed in italics.
<strong> Bold
Indicates that a text is serious and needs urgent attention. The text is displayed in bold.
See the Pen Emphasis by Denver Kunaka (@Denver-Kunaka) on CodePen.
Block Elements
Block elements are different from inline elements in that they occupy or span the entire width of the page. Instead of ending where the text ends they extend to the end of the page. Take a look below:
Block tags are used for enclosing blocks of text (text spanning multiple lines) or containing other elements (inline or block)
Point of note.: You cannot use inline elements as containers of block elements. Inline elements can only contain themselves.
Common block elements:
<h1> Heading
Displays page headers from h1 – h6. h1 is the main heading while others are used as sub-headings. It’s good practice to have one h1 element per page.
<p> Paragraph
Used for wrapping a block of text as a paragraph.
<div> Div
The div element is usually used to wrap and contain other elements. It is meaningless in that it has no meaning in terms of what’s being rendered unlike elements like h1 and p.
See the Pen Untitled by Denver Kunaka (@Denver-Kunaka) on CodePen.
Semantic Tags
HTML 5 introduced and added semantic tags as a way of imposing meaning to HTML elements.
Semantic tags have meaning and are self-explanatory unlike elements like div, a, and span that hold no literal meaning.
Common semantic tags:
- <main>
- <article>
- <section>
- <aside>
HTML Attributes
HTML attributes are ways of holding certain information and data of an element. For example, the <a> element has a href attribute that holds the actual URL. The img tag has a src attribute for holding the image URL path.
<img class="fit-picture" src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt="Grapefruit slice atop a pile of other slices" />
Some elements must have attributes for them to display properly, e.g the <a> and <img> elements.
Attributes are usually predefined, e.g href, src, width, height, I’d, class, however, custom attributes can be created to hold data.
ID & Classes
The id attribute contains a unique identifier for any given element, e.g. my-first-paragraphy.
Classes are identifiers that can be used to identify multiple elements. For example, my-paragraph class may be assigned to many elements.
<h1 id="first-heading">My heading</h1> <p id="fist-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p class="my-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <p class="my-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
IDs and classes are mainly used as selectors for CSS or JavaScript.
The Style & Script Tags
HTML Comments
HTML comments allow you to document whatever you are doing so that when you resume later on you’ll remember the code. Comments also help others to understand your markup.
Here is how HTML comments look like:
<body> <!--Page Content goes here--> </body>
Debugging HTML
HTML is easy to write but can be hard to maintain as elements grow. You don’t get warning errors as in programming like JavaScript. You typically notice errors in your markup by the way the page is displayed.
One noticeable HTML error is when you forget the closing tag or have a missing slash. The entire block of content will have the formatting of the first opening tag until a closing tag is found. Take a look at the markup below:
<a href="https://google.com">Search Here <h1>My heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <div class="info"></div>
Notice the closing </a> tag is missing which will make all elements down linkable.
