Even the simplest of web pages must contain at least one block of text. Usually, these fields are semantically delimited by the <h> and <p> tags.
In a browser, the above code looks like this:
Do you want to try it out? You can do so in the playground.
The visual difference between headings and paragraphs is:
- Headings are styled as bold text and paragraphs are not.
- Typically, <h1>, <h2> and <h3> are all larger than paragraph text size.
- While an <h4> element has the same font size as <p>, search engines give it more importance when reviewing the content of the page.
Each of these elements occupy a whole line, and the spacing above and below them is constant, even when nested. This behavior is specific for block elements, which both headings and paragraphs display as. Here, you can see the whole line and spacing of nested paragraphs:
This HTML will look like this in the browser:
Try it out in the playground!
Links
Hyperlinks, or links as they are commonly called, represent the way to click either text or images to tell the browser to move to another web page. Links can also open certain files, open user’s email program, or even jump to different locations of a web page.
Links are defined by the <a> tag. Every link must have the href attribute, which takes a path of where to go navigate the web page to. In this example, the “contact.html” would be in the same folder as the existing webpage:
When links navigate to web pages on other web servers, it is required to use the “http://” protocol, then the domain name, any folder structure, and then the file. In this example, the web page is on another web server, then looking on the enki.com domain, then within the samples folder, and then linking to the page.html web page.
And here is how it would look in the browser:
You can try it out yourself in the playground.
When links are used with text, such as headings and paragraphs, the text links use most of the style properties of that text (like the font family, font size, font weight) with a few changes:
- link text is blue by default (color: #0000EE;)
- link text has a text decoration with an underline (text-decoration: underline;)
Learn More
