Semantic HTML


In the early days of the web, you’d just open a plain text file and start coding your website line by line or paragraph by paragraph in HTML.

Nowadays, most people who maintain websites rely on a type of interface known as a What You See Is What You Get or WYSIWYG editor for formatting the text on their websites. Basically, this means they format their content through highlighting text and selecting the appropriate button or use a dropdown menu to make that text bold or italicized, to format it as a paragraph or a list or to make it a heading.

As WYSIWYG editors have evolved, they’ve gotten really good at making preformatted text look the right way, but behind the scenes, the code has problems. Basically, a WYSIWYG editor prioritizes styling your content so it looks right to human eyes over marking it up in ways that are meaningful to algorithms (and thus to any human interacting with your content in a non-visual manner)..

Semantic markup in HTML conveys information about the meaning of the content to which it’s applied. While this may not seem important to the person reading a webpage with their eyes, it’s a critical difference to the person reading the same page with a screenreader or accessing the content through a virtual assistant like Siri or Alexa. It’s also important in how Google and other search engine algorithms read your site.

Visual or presentational markup conveys information about how the content should be presented and should be done using CSS.

Wrapping text in <strong> tags, for example, renders the text in boldface type and tells us that it should be emphasized in some way. 

You can also render that text bold using CSS without conveying meaning about it.

Similarly, <em> tags enclose text that should be emphasized and rendered in italics, while using CSS to italicize the text gets the same look, but doesn’t alter the meaning.

The semantic tags tell an accessibility device like a screenreader that the marked text is important and should be emphasized or stated strongly. Visual markup tells the device that you’ve just made the text look different to set it apart visually, not because the screenreader needs to say that text differently.

Take a look at this example of a resume. Coding a resume is great for practicing semantic HTML because resumes contain content you want to emphasize, such as a headline, and content that you just want to visually set apart, such as the company you worked for, the city where it’s based, and the years you worked there.

They also contain multiple nested headings — this person had multiple jobs at one company, see? — as well as unordered lists and paragraphs.

Let’s talk for a minute about headings. We learned about the document <head> element in the last lesson. That’s where you put information like what language and character set you’re using for the page and what its title is. Headings are a little different. There are six levels of content headings in HTML5. The top level is <h1> and they descend in importance down to <h6>.

Web browsers have default settings for how they display headings, and it’s common for beginning coders to use headings to get the text to look a certain way or to NOT use headings because they don’t like the look of them.

Remember, though — HTML is for labeling content, not for controlling display. Display is done through CSS. Use heading elements to outline your content and change the way they look later.

Think about outlining an essay in middle or high school. The top level heading is a Roman numeral. The second level is a capital letter. The third level is a regular number. The fourth level is a lowercase letter. You can have multiple second-level headings under the same top level heading and so on from there.

Headings in HTML work in a similar way. They outline your content. Google and other search algorithms rely on that outline to determine what the HTML page is about and include it in relevant search requests. 

There’s usually only one top level heading on a webpage. There may not be any subheadings or there may be several. You don’t skip from an <h1> to and <h3>, however. Use the next level down in that particular section when you want to add subheadings.

Now, let’s briefly talk about lists. Lists are another set of elements in HTML that often involve nesting elements.

The two most frequently used types of lists are ordered lists <ol> and unordered lists <ul>. Ordered lists contain an unlimited number of list items <li>, each of which starts with a number and goes up sequentially – 1, 2, 3, 4, and so on. Unordered lists also contain an unlimited number of list items <li>, but the list items in an unordered list start with bullet points. The key is that the overall list type determines how the list items are displayed. 

In the next lesson, I’m going to introduce you to CodePen and ask you to use the guide to common HTML and CSS tags included in this module to code your resume (or a sample one you pull from the web). We’ll use that to practice what you’ve learned about HTML.