2.2. Basic HTML Tags

2.2.1. Headings

Like any document HTML documents may have several layers of headings. In fact you can have heading levels from 1 to 6 in an HTML document.

Now modify the example above to add the next three levels of headings. What do you notice? What happens if you add a level 7 heading? What happens if you close an h2 tag with an h1 or an h3?

Another aspect of the heading tag is that it is what we call a block tag. Notice that each heading appears on its own line. Thats pretty much what we would expect for a heading. But not necessarily for other tags. shortly, we will see some inline tags that do not each appear on their own line.

2.2.2. Paragraphs

Paragraphs are another funamental element of documents. Paragraphs are also another example of a block element in that each paragraph gets its own space and is separated from other html elements by blank lines in the document.

What happens when you put a paragraph inside another paragraph? What about a header inside a paragraph?

2.2.3. Images

Images are another common element of a document or a web page. To include an image in a document you must use an img tag. Image tags are an example of an inline element because they just flow in with the surrounding text. They do not force a new block to be created in the rendering of the html. Here are a couple of images:


Luther Bell: https://runestone.academy/ns/books/published/webfundamentals/_images/LutherBellPic.jpg


Norse Logo: https://runestone.academy/ns/books/published/webfundamentals/_images/norse-logo.png

The image tag has a new component to it called an attribute. In general tags can have many attributes in the case of an image we can inlude it by using a src attribute that contains the URL to the image we want to embed. We can embed any image on the internet in our own document by referring to it by its URL in the src attribute.

Try modifying the example above so that it includes the norse logo rather than the bell. You can also change the height and width of an image by using a height= attribute or a width= attribute. Try changing the size of the image in the example above. Notice what it does to the flow. Try changing just one of height or width and then try changing both at the same time. You can stretch your image in all kinds of crazy ways.

There are several other attributes of the image tag as well. You can read about them here.

2.2.5. Simple Text Formatting

Making text bold or italic and other formatting is easy in HTML as well. The following example illustrates the basic text formatting tags.

You can mix and match these styles in all kinds of ways. Try making a superscript inside a superscript. Try making the subscript bold or italic.

Check your Understanding

You have attempted of activities on this page